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

Complex Insurance Processes and Limited Digital Trust

PAIN POINTS

While HSBC Hong Kong offers a diverse range of insurance products, users find it difficult to navigate the dashboard and access policies easily. Many rely on agents for policy management, especially for complex products.

To establish itself as a trusted digital insurer, HSBC must go beyond banking by simplifying the purchase journey and enhancing its digital experience, fostering stronger customer relationships.

Insurance dashboard

My Role

My focus was to design a more engaging, intuitive insurance experience that reinforced HSBC’s digital brand. I approached gamification not just as a feature, but as a way to make policy tracking clearer, more rewarding, and more enjoyable, helping build user loyalty and understanding.

Decoding User Data to Understand Behavior

PROBLEM VALIDATION

By analyzing user data and engagement behavior, we found that many users avoided checking their policy details due to a complex and unclear interface. This revealed the need for a more accessible and engaging experience.

To address this, we focused on personalization and gamification. I designed interactive UI elements, identifying key user data and defining an effective data visualization strategy to make policy information clearer and more engaging, encouraging regular user interaction.

New insurance dashboard concept

Transforming Data into Meaningful Insights

PROBLEM VALIDATION

To ensure gamification added value beyond visual appeal, I prioritized user needs and iterated through multiple review rounds to refine the most effective solution. The key goals were:

Build user confidence with a personalized, clear policy overview
Simplify complex data through interactive and engaging design
Encourage ongoing engagement with meaningful gamified experiences

Transforming Data into Meaningful Insights

PROBLEM VALIDATION

To ensure gamification added value beyond visual appeal, I prioritized user needs and iterated through multiple review rounds to refine the most effective solution. The key goals were:

Build user confidence with a personalized, clear policy overview
Simplify complex data through interactive and engaging design
Encourage ongoing engagement with meaningful gamified experiences

Designing Interactive Experiences

SOLUTION VALIDATION

This phase lasted a few weeks with weekly reviews to refine the approach. My focus was on simplifying the complexity of insurance products while ensuring intuitive visual representation that resonated with users.

Strategic Ideation

I analysed competitors and gamification platforms to identify effective engagement strategies, leading to three proposed concepts:

Quests & Missions - Animated “Mr. Umbrella”
A character-led guide to humanize HSBC’s expertise in a friendly, approachable way.
Points & Levels - Progress Tracking
A static visual system illustrating policy ownership and financial growth, reinforcing a sense of control.
Achievements & Rewards - Badge Collection
A reward-based system recognising users as they accumulate policies, fostering a sense of accomplishment.

After discussions with the product team and refinement of the brand strategy, we selected Concept B: Progress Tracking for its ability to clearly communicate financial protection and provide users with a motivating sense of progress without overwhelming.

Gamification Mechanics & Visuals

I designed a gamification model based on behavioural psychology, using dynamic banners to track policy milestones and drive intrinsic motivation. Animated life assets visualised financial security, while a soft HSBC brand palette kept the experience light yet professional.

Turning Abstract Policies into Engaging Experiences

CHALLENGE & SOLUTION

Insurance categories like life, savings, travel, and health are abstract and rarely interacted with daily, making them hard for users to connect with.

To address this, I introduced a home-based visual metaphor where policy progression unlocked expansions and accessories. This familiar concept made financial growth and protection feel tangible. With passive asset collection, users could track progress effortlessly, keeping the experience simple, engaging, and low-effort.

Solving Ambiguity: Crafting Meaningful Data Representations

Regulatory restrictions in Hong Kong limited the use of rewards in insurance marketing, prompting a shift toward progress tracking. To improve clarity and engagement, I applied the endowed progress effect and explored alternative mental models.

CHALLENGE & SOLUTION

The challenge was to represent user actions like policy purchases and milestones with clear, engaging visuals that reflected growth and success. I introduced two visual metaphors:

A realistic approach using home accessories to represent life insurance, symbolizing safety and stability.
An abstract approach using fruits on trees to reflect savings growth and long-term development.

The house represented present-day protection, while the tree symbolised future growth, creating a balanced visual language of security and progress.

Empty versus achieved states showed clear progress, and embedded tips guided users along the way. This approach emphasised intrinsic motivation by making progress feel visible and meaningful without using external rewards.

Gamification Mechanics & Visuals

Turning Abstract Policies into Engaging Experiences

CHALLENGE & SOLUTION

Insurance categories like life, savings, travel, and health are abstract and rarely interacted with daily, making them hard for users to connect with.

Solving Ambiguity: Crafting Meaningful Data Representations

CHALLENGE & SOLUTION

The challenge was to represent user actions like policy purchases and milestones with clear, engaging visuals that reflected growth and success. I introduced two visual metaphors:

A realistic approach using home accessories to represent life insurance, symbolizing safety and stability.
An abstract approach using fruits on trees to reflect savings growth and long-term development.

The house represented present-day protection, while the tree symbolised future growth, creating a balanced visual language of security and progress.

Balancing Engagement & User Priorities

USER TESTING INSIGHTS

To validate the design approach, high-fidelity usability testing was conducted with six HSBC insurance policyholders aged 30-50.

Users found the visuals engaging, especially in family contexts, and understood how illustrations reflected policy growth. This validated the engagement approach. However, feedback revealed a need to improve symbol clarity and balance playful elements with data-driven insights. These insights led the team to reassess priorities using an impact-effort matrix.

Driving Innovation Through Gamification in Financial UX

This project was recognised by HSBC’s wealth and insurance design teams as a valuable exploration of gamification in financial services. I introduced an interactive, user-centric approach to policy management, transforming complex data into a more accessible and engaging experience.

KEY TAKEAWAYS

Refining engagement strategy from habit-based to insight-driven
Enhanced data visualisation for clearer user understanding
Balanced creativity with technical and regulatory constraints

Although full gamification was not scaled, the work influenced future directions in personalised dashboards and investment insights, strengthening my ability to lead innovation, simplify complexity, and design for both impact and feasibility.

Driving Innovation Through Gamification in Financial UX

KEY TAKEAWAYS

Refining engagement strategy from habit-based to insight-driven
Enhanced data visualisation for clearer user understanding
Balanced creativity with technical and regulatory constraints

Driving Innovation Through Gamification in Financial UX

KEY TAKEAWAYS

Refining engagement strategy from habit-based to insight-driven
Enhanced data visualisation for clearer user understanding
Balanced creativity with technical and regulatory constraints

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

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