A Global Strategy for Simplifying Payments at HSBC
Organisation
HSBC
Role
Design Lead
Timeline
February 2022 - August 2023
Overview
The Payments Hub is a globally shared experience for all retail HSBC customers (approximately 40 million people across 25 markets), the hub provides a central dashboard for all payment features in the mobile app. The goal of this project was to design a scalable product, simplify the overall payments experience, and accommodate local requirements. Our aim was to reduce friction, support quick and secure task completion, and bring consistency to a previously fragmented experience.
I led the design for the new hub, guiding it from concept to implementation across three markets. This project involved close collaboration with stakeholders from various regions to ensure both global consistency and the appropriate localisation. My focus included UX research, information architecture, navigation and concept design, all delivered with a clear emphasis on user needs and scalability.
> Reduced task completion time by ~40%, enhancing user efficiency
> Improved jNPS score to an average of +55 for payments experience
Design leadership
UX research
Workshop facilitation
Information architecture
Concept design
User testing
The Challenge
How might we create a unified payments framework that works across all markets?
The HSBC mobile app had become cluttered and inconsistent over time, with features being added in silo and without clear strategy. Customers were faced with too many options, confusing design patterns, and a list of entry points that didn’t align with their expectations. What should’ve been a simple task, like paying a friend, had become complicated.
The challenge was to create a holistic experience for payments – reducing friction, streamlining tasks, and ensuring consistency across markets while adapting to local needs.
Existing payments hub experience across markets
Discovery
Understanding jobs-to-be-done & mental models
Working alongside a researcher, I planned & coordinated research across six key markets, focusing on understanding payment mental models and behaviours across a wide range of demographics. This included both digital and non-digital touch points, ensuring we captured a comprehensive view of how users interact with payments in different contexts.
Using a mix of market analysis, UX benchmarking, surveys, and user interviews, we aimed to uncover pain points, expectations, and opportunities in the payments experience.
Key research findings
This research revealed that users’ mental models were actually simpler than expected, often viewing payments as basic tasks like "Pay a friend," and considering details later. Customers also struggled with internal jargon, which caused further confusion, hindering navigation and entry point selection.
While we expected major differences across markets, core payment behaviours were largely similar, with variations appearing only with specific payment method, like QR codes versus pay-by-mobile; and with unique factors in some local payment rails that impacted user actions, timelines and fraud considerations.
Early validation of ideas with card sorting & tree testing
Card sorting and tree testing allowed us to explore and test how users naturally grouped payment tasks. I worked with a variety of stakeholders to produce tasks for card sorting and to design multiple IA structures for tree testing.
Both validation techniques provided us with a view of what worked well across markets and where differences emerged. These insights were crucial in refining our design, helping form the basics of a global design framework.
Payments reseach conducted in 6 key markets
Example of card sorting activity
Concept design
Workshops & co-designing with market stakeholders
To ensure our global framework could work in each market, I hosted a series of workshops with business and product stakeholders. These workshops and co-design sessions played a key role in aligning everyone on the goal of building a global app experience. We shared research findings and worked together to understand how each market’s unique experiences – such as varying payment journeys, functionality, and existing information architecture – could fit into the new framework.
Through these discussions with multiple markets, we identified what worked, what didn’t, and collected new ideas to evolve and refine the concept to ensure it would be adaptable and effective in every market.
Alignment with Hong Kong experience
Alignment with Mexico experience
Fewer steps, faster payments
Our aim wasn't just to re-organise entry points, but also to streamline the experience and align it with customers mental models. I led the implementation of global journey blueprints that consolidated multiple payment flows, reducing redundant entry points. By establishing consistent patterns and pre-journey steps, we created new unified, intuitive journeys.
Additionally, we aligned repetitive steps like review and confirm to improve consistency throughout the app.
Journey blueprint for domestic payments
Organising complexity. A framework for payments
Given the scale of the task and the complexity across markets, we focused on creating a structured concept to maintain alignment. I designed a concept framework that sorted journeys and features into three clear groups: Payees, Payments, and Payment management. Previously, customers were faced with an overwhelming overflow menu – lacking hierarchy, structure, and alignment with how people naturally think about payments.
The new information architecture provided a clear, organised layout with grouped features and visual hierarchy, making it easier for customers to navigate and take action based on their mental model. Because of the differences across markets, we prioritised maintaining a standardised framework to ensure consistency in each version of the app. This would create a strong design foundation, and allow us to explore more creative ideas later on, such as customer personalisation.
Initial concept for information architecture
The solution
An international brand with a local experience
The final hub design was created in collaboration with the design system team and iteratively refined through user testing in the UK, Hong Kong, and Singapore – our first 3 markets. I created a modular approach to customise widgets and entry points, ensuring we could balance local needs and global consistency. New components with multiple variants were created to ensure flexibility where required.
The solution was implemented using a phased approach, beginning with the payees widget and progressively rolling out one widget at a time across each market. This allowed customers to become familiar with the changes at a comfortable pace, while continuing to use the app for their daily payment tasks.
A Payee-First Experience
Through our research we learned that users primarily think about who they’re paying, not how they’re paying. Many markets had legacy banking systems that created friction in the payee experience, and limited users’ ability to save, edit and manage payees. This caused our payments experience to be very linear, considering payees as a sub-task when making a payment.
In response, we shifted to a payee-first approach, creating a new payee library that mimicked the behaviour of mobile contacts. This provided users with quick access and full visibility of payees, with improved management such as the ability to add multiple accounts under a single payee, covering both domestic and international payments across various payment rails. Singapore was the first market to adopt this new feature, significantly improving the payee experience and streamlining the payment process.
Customisable widgets
To accommodate the varying needs of different markets, I designed customisable payee widgets. Each variant was primarily driven by the available journeys and features in that app.
There were key differences between the Singapore widget (on the left), with full access to a new payee library, vs the Hong Kong version on the right, without a full library due to payee architectural constraints.
The carousel option for the payee widget was made optional, providing flexibility for markets to choose the best configuration for their users. Providing flexibility at this level ensured that we could design for technical constraints, without compromising the overall consistency.
Streamlining journey design
Each payment journey was carefully considered and thought about as part of a holistic experience. Using the new global journey blueprints, we redesigned many of the payment journeys in each of the first 3 markets to adopt this new framework.
As part of this work, new combined journeys were also created to further streamline a customers experience, such as the journey of adding both domestic and international payees, with multiple account types in the Hong Kong app. Previously this had been more than 5 different sub-journeys, independently embedded throughout the experience. Now, combined as one single add payee experience.
Results
One global experience, endless impact
The outcomes of the project were measured through both qualitative user testing and analytics data following each launch. We saw a significant reduction in time spent on tasks, indicating a more intuitive and efficient experience for users. Overall customer satisfaction also improved, reflecting the positive reception of the new design.
We successfully designed a standardised global framework that was launched in three markets and could be scaled to the remaining 22. This flexible, scalable solution ensures that users across regions will benefit from a consistent and improved payment experience, while still accommodating local market needs.
After launching in our first 3 markets, we saw the following impact:
> Reduced task completion time by ~40%, enhancing user efficiency
> Improved jNPS score to an average of +55 for payments experience
Reflections
During this project, I faced tough decisions as we navigated complex constraints and legacy systems, which sometimes made it difficult to push for more creative solutions. As the project progressed, I took on the responsibility of building and leading a team, eventually handing off some parts and collaborating with other designers in the final stages.
Along the way, I worked closely with key stakeholders, including regular presentations with the MD for Transaction Banking and some key presentations with the global CEO of HSBC Retail Banking. By ensuring stakeholders fully understood our process, I was able to avoid conflicting ideas and stay aligned. Building trust with senior business stakeholders was vital, as it allowed me to make confident decisions, even in the face of uncertainty, and ultimately keep the project moving forward smoothly.