HSBC Kinetic

Role

UI Design Lead

Via

Publicis Digitas

Outcome

Webby Award 2021

Impact

HSBC Kinetic is HSBC's flagship SME banking app — one of the most ambitious commercial banking products in the UK. I was brought in through Publicis Digitas as a senior contractor into a 300-person programme: 12 feature pods, multiple agencies competing for creative control, and no shared design language. My job was to fix that.

Design war room — paper prototypes

Multiple agencies. Political tension. Every pod building from its own toolkit. Siloed code meeting deadlines — but compounding design debt.

Publicis Digitas was brought in to resolve it. I led the design direction from day one.

HSBC Kinetic programme structure

War Room

Designing the system
while shipping
the product.

6 weeks. The best design minds from across the programme in one room. Line in the sand — what does Kinetic look like at Beta?

I led the creative direction. The patterns and interactions I designed formed the backbone of the experience. I crafted ~80% of the Beta vision.

Webby AwardBest UX · 20215%5%18%29%32%

Foundations

Finesse before scale.

Account overview
Spend analysis
Cashflow view

System Evolution

From Alpha
to Beta.

Alpha

Fast, reactive, in-product

  • Built alongside active features

  • High-impact reusable components

  • Rapid iteration, immediate use

The system was useful from day one.

Beta

Structured, reusable, scalable

  • Consolidated component library

  • Variants, properties, and rules

  • Clearer documentation throughout

The system matured alongside the product.

7%
6%
Design sprint — war room wall
HSBC Kinetic product card designs

Fragmented UI patterns became reusable components. One-off designs became systemised assets that scaled across flows.

Less duplication. More consistency. Faster builds across every squad in the programme.

Motion & Interaction

Presenting interaction in a way that
gives users energy, confidence,
and control.

Interaction framework

KINETIC

Entry

Inspire · Entice · Engage

Interaction

Encourage · Explain · Guide

Exit

Delight · Confirm · Reinforce

Simulate one-time deposit ÷

$4,594
2K
3K
4K
5K
6K
7K

The interaction framework gave every squad a shared motion language — a quick read on how movement serves the moment and earns user trust.

Testing drove iteration. Components weren't just reusable — they were validated against real financial workflows and real user behaviour.

HSBC Kinetic — product suite

The programme shipped as HSBC Kinetic — the UK's first dedicated business banking app, winning the Webby Award for Best UX in 2021.

A system that aligned 10 pods, reduced design debt, and gave the programme the tools to scale without friction.

Award

Webby
2021

Recognition

Webby Award for Best UX.
A programme that shipped.
HSBC Kinetic app — overview screen

NETMobile

HSBC NETMobile —
Corporate Banking DS.
HSBC NETMobile — design system vision
NETMobile form components

Alongside Kinetic I also led the library direction for HSBCNet — HSBC's corporate and medium business banking app. Both SME and corporate banking in scope simultaneously.

One team. Two flagship products. One design system approach.

Outcome

A better system,
a better product.
Account overview
Design system documentation
Spend analysis
Programme team structure
Cashflow view
Solidify component depository
Iceberg Toolkit — page 1
Product card designs
Card activation states
Locking card
Iceberg Toolkit — page 2
Frozen card state

Building off 85 issues in the pre-existing Alpha library, the Beta system unified the entire programme — reducing duplication and establishing a single source of truth.

Adoption came from usefulness, not enforcement. The system became the easiest way to design — and the default way teams worked.

Next
next-preview.jpg

Tesco

studi

William Paul — UI Design Lead · HSBC Kinetic via Publicis Digitas · 2019–2021

← All work