How I led UI design and supporting agile sprints to simplify complex insurance products, boosting online sales by 30%

I partnered with the product team to design the end-to-end B2C experience for HSBC Family Protector, the market’s first digital insurance solution with flexibility and personalisation.

Insurtech

Business: B2C

UX Strategy

Project Management

Usability Testing

iOS, Android, web

Content Complexity & Manual Hurdles

PAIN POINTS

We identified two key causes of high drop-off rates for HSBC Family Protector insurance:

Complex content and the lack of an instant quote tool made it hard to compare policies, forcing early account creation and causing drop-off at key steps.
The journey involved lengthy forms with no personalised recommendations, leading users to prefer insurance agents for convenience and guidance.

Existing quote result page and agreement modal after tapping ‘Continue’

My Role

I worked with an agile team, including a UX designer, product owner, business analysts, copywriters, and engineers, to redesign intuitive end-to-end interfaces and deliver high-fidelity prototypes. I assisted in managing two-week sprints, focusing on simplifying content, streamlining forms, and adding personalised UI elements.

Transforming Data-Driven Insights to Educate Users

SOLUTIONS

I streamlined HSBC’s onboarding by crafting intuitive tools and interactive calculators informed by user insights, enabling customers to choose suitable coverage with less effort and complexity.

View HSBC Family Protector Insurance Purchase User Flow v.1 (build on second release routines) in Figjam:

Simplifying Onboarding with a One-Minute Premium Calculator

I introduced an interactive premium calculator on HSBC’s public site (unlogged journey), requiring just four inputs: gender, age, smoking habit, and coverage amount. With an intuitive slider, users could quickly compare personalised premiums, reducing effort and streamlining the onboarding process.

One-Minute Premium Calculator on the ‘Get a Quote’ page.

Personalising Experiences with a Guided Coverage Calculator

I designed a three-step calculator for users at key life stages like marriage, parenthood, and home-buying. By capturing financial inputs, it provided personalised insurance recommendations in under five minutes. Visuals and interactive illustrations created a friendly, reassuring experience.

Three-step Guided Coverage Calculator.

Enhancing Flexibility with Additional Coverages

I created an intuitive ‘Additional Benefits’ section after the insurance quotation, enabling users to easily select add-ons options. Clear tiered pricing and side-by-side comparisons improved pricing transparency, empowering users to confidently personalise their policies.

Add-On options displayed after quotation results.

Simplifying Onboarding with a One-Minute Premium Calculator

One-Minute Premium Calculator on the ‘Get a Quote’ page.

Personalising Experiences with a Guided Coverage Calculator

Three-step Guided Coverage Calculator.

Enhancing Flexibility with Additional Coverages

Add-On options displayed after quotation results.

Simplified, Frictionless Content Presentation

SOLUTIONS

I redesigned the Family Protector journey into six clear steps: Quote, Additional Benefits, Policy Summary, Medical Questions, Applicant Details, and Review and Confirm. Each on a separate screen to improve clarity and focus. A top breakdown price bar and intuitive UI elements ensured key information stayed visible throughout.

Top breakdown price bar displayed across six stages of the purchase journey.

I integrated a streamlined online medical underwriting flow to assess eligibility and premiums upfront, reducing friction. I also introduced a step-up authentication log-in modal, enabling logged-in HSBC customers to auto-fill personal details via APIs, minimising manual input and improving the checkout experience.

Step-up authentication log-in modal for log on to pre-fill personal information.

Balancing Simplicity with Details

USER TESTING INSIGHTS

We ran high-fidelity usability testing with 16 tech-savvy HSBC customers (ages 25–55) who owned life insurance. The goal was to explore their shopping habits, test prototype reactions, and uncover adoption barriers.

Participants responded well to the simple, quick-to-use calculator, valuing the minimal questions and instant premium feedback. The option to include policy add-ons was seen as a valuable feature.

However, many users skimmed the landing page and missed the add-ons until later. When noticed, the lack of detail led them to compare options elsewhere, disrupting the journey at a critical decision point. This indicated the feature was useful but poorly positioned.

Balancing Simplicity with Details

USER TESTING INSIGHTS

Refining Content Strategies

IMPROVEMENT

To improve clarity and build trust, we partnered with copywriter to simplify content and restructure the landing page into five streamlined sections: Explore Additional Benefits CTA, key features with downloads, 3-step application guide, quick premium calculator, and FAQs. We also reworded sensitive financial questions to feel more approachable.

View Family Protector landing page revision of second and third release in Whimsical:

The add-ons page was moved to appear after plan selection, helping users focus on the core product first and reducing friction at a critical decision point.

HSBC Family Protector Insurance Purchase User Flowchart 2 (build on third release routines).

The add-ons page was moved to appear after plan selection, helping users focus on the core product first and reducing friction at a critical decision point.

HSBC Family Protector Insurance Purchase User Flowchart 2 (build on third release routines).

The add-ons page was moved to appear after plan selection, helping users focus on the core product first and reducing friction at a critical decision point.

HSBC Family Protector Insurance Purchase User Flowchart 2 (build on third release routines).

Elevating HSBC’s Digital Insurance

RESULTS

HSBC’s Family Protector became the first digital insurance solution in the market to offer flexibility and personalisation. I led the end-to-end responsive UI design, supported design sprints, and introduced user-centric features like interactive calculators and custom add-ons to simplify the user journey.

By reducing the process to five minutes and four questions, we significantly lowered drop-off rates. Post-launch, completed payments rose by 30%, and new business value increased by 38% year-on-year.

Elevating HSBC’s Digital Insurance

RESULTS

How I transformed customer data into value through out-of-the-box gamification

I introduced gamification strategy to the dashboard to strengthen customer engagement and reimagine brand experience.

Banking and Insurance

Personalisation

Design System

Gamification

Branding

Data Visualisation

How I successfully drove design system adoption and bridging between design with engineering

As a UI designer at HSBC for 3 years, I led scalable design system adoption across 5 financial products, streamlining end-to-end experiences in a complex global ecosystem.

Fintech

Design Systems

Branding

Governance

Documentation

iOS, Android, web