Designing the digital foundation for HSBC Insurance, from paper-based servicing to a scalable online experience

HSBC Insurance customers had no digital self-service experience. Policy information, coverage details, and account updates were delivered primarily through quarterly paper statements, creating friction for customers and operational inefficiencies for the business.

HSBC aimed to bring insurance products onto both web banking and native mobile platforms as part of a broader digital transformation initiative. The challenge was not only to digitise insurance journeys, but to do so within the constraints of a tightly governed enterprise ecosystem involving multiple stakeholders, approval bodies, and distributed teams.

Client / Project

HSBC / Insurance Dashboard

Client / Project

HSBC / Insurance Dashboard

Platform

Responsive web

Platform

Responsive web

Role

UI

Role

UI

Year / Duration

2019 / 1 year

Year / Duration

2019 / 1 year

Research - Phase 1

Identifying the gaps between banking UX patterns and insurance needs

Through UI exploration and close collaboration with UX, several structural limitations became clear within HSBC’s existing ecosystem.

To better understand customer expectations and behaviours, I also participated in two moderated user testing sessions involving 7–8 participants per session. Observing how users navigated policy information, interpreted insurance terminology, and interacted with proposed layouts provided valuable behavioural insights that directly informed subsequent design decisions. The sessions were especially useful in helping the team validate assumptions early and shape an experience that felt more intuitive and appropriate for HSBC’s customers.

HSBC Life Insurance Dashboard / Starting point

HSBC Life Insurance Dashboard / Building blocks

Problem statment

How might we design a scalable digital insurance experience within HSBC’s existing banking ecosystem while extending a limited design system to support complex insurance content, cross-platform consistency, and enterprise governance requirements?

How might we design a scalable digital insurance experience within HSBC’s existing banking ecosystem while extending a limited design system to support complex insurance content, cross-platform consistency, and enterprise governance requirements?

How might we design a scalable digital insurance experience within HSBC’s existing banking ecosystem while extending a limited design system to support complex insurance content, cross-platform consistency, and enterprise governance requirements?

Design response
Designing for scalability through a card-based system

I introduced a modular card-based layout to manage the complexity of insurance information while maintaining clarity across both web and mobile platforms. The structure allowed content to be grouped into digestible sections, improving scanability and navigation for users dealing with dense policy data.

The decision was also driven by long-term scalability. As HSBC Insurance continued expanding its digital capabilities, the card system created a flexible foundation that could accommodate future features, products, and servicing functions without requiring major structural redesigns.

Establishing the foundation for HSBC’s graphical system

Alongside product interface work, I developed a unified illustration, pictogram, and icon style guide to address the absence of a consistent graphical system within the existing library.

What began as a small collection of supporting assets evolved into a scalable graphical standard that other designers could follow and expand upon. The system introduced consistency across illustrations, iconography, and visual communication patterns, eventually becoming the foundation for HSBC’s broader graphical element library used across future digital products and experiences.

Phase 2

Making long-term insurance value easier to understand through data visualisation

Following the initial launch of the HSBC Insurance dashboard, the team continued enhancing the platform with new servicing capabilities. One of the key additions was the Policy Future Value Reprojection feature — a tool that allowed life insurance customers to view projected future values of their policies over time.

The feature became one of the most important areas within the policy servicing experience, helping customers better understand the long-term value of their insurance products rather than simply viewing static policy information.

The enhancement later contributed to the wider product experience that went on to receive industry recognition and award wins for HSBC Life.

Design response

The challenge was translating highly complex financial projections into something customers could actually understand. Insurance projections are often presented as dense tables of numbers with little context, making it difficult for users to interpret policy growth, long-term returns, or surrender values.

To improve comprehension, I designed a data visualisation experience centred around clear graphs, structured information hierarchy, and interactive chart behaviour. Users could explore projected policy values year by year, compare estimated growth over time, and review surrender values through an interface that felt significantly more approachable than traditional insurance statements.

Result

The feature became one of the most important areas within the policy servicing experience, helping customers better understand the long-term value of their insurance products rather than simply viewing static policy information.

The enhancement later contributed to the wider product experience that went on to receive industry recognition through the Asia Insurance Industry Award and the Bloomberg Businessweek Financial Institution Award 2021 for HSBC Life.

© 2026