Designing a global hub for payments at HSBC
Date
Feb '22 - Nov '23
Organisation
HSBC
Role
Design Lead
Activities & deliverables
UX research
user surveys
card sorting
design strategy
information architecture
user flows
concept design
stakeholder workshops
prototyping
component design
user testing
localisation
Overview
I led the end-to-end design of a new global mobile payments hub, taking it from concept to implementation across three markets. The hub was designed to host multiple payment journeys - tailored to the needs, regulations, and behaviours of each country. My focus included UX research, information architecture, and concept design, delivered in close collaboration with global stakeholders to ensure consistency and scalability across regions.
The HSBC Payments Hub is a globally shared experience providing a central dashboard for all payment features in the mobile app
Customer problem
Descision fatigue & high cognitive load
The HSBC mobile app had gradually become cluttered and inconsistent, with layers of features added over time without a unified design strategy. Customers were faced with too many options, inconsistent design patterns, and internal jargon that didn’t align with their mental models. What should’ve been a quick payment became a mentally taxing task.
Core issues:
Too many competing options on screen, making simple tasks feel complex
Inconsistent UI patterns across journeys, leading to confusion and hesitation
Use of internal terminology that didn’t match how customers think or speak
Unclear hierarchy and flows, increasing friction and decision fatigue during key tasks like making payments
Business objective
Creating a global, scalable payments framework
The goal was to design a unified payments hub that could scale across markets, simplifying the user experience while accommodating local requirements. We aimed to reduce friction, support quick and secure task completion, and bring consistency to a previously fragmented experience. Collaboration with stakeholders from multiple regions was key to making it work globally and locally.
Key objectives:
Create a flexible framework that supports different payment types and regional variations
Reduce friction and decision fatigue by streamlining core payment tasks
Ensure consistency across markets while allowing space for localisation
Align stakeholders across global and local teams to build a shared design approach
UX discovery
Understanding jobs-to-be-done & mental models
Our approach centred on building a jobs-to-be-done framework that could balance global consistency with local market needs. To uncover user pain points and opportunities, we explored the entire experience through a range of research methods - focusing on how users think, what they need, and where the friction lives.
UX discovery activities:
Market analysis and UX benchmarking to understand global and regional norms
Surveys and user interviews to capture behaviours, expectations, and frustrations
Card sorting to explore how users naturally group and label payment tasks
Data analysis to identify usage patterns and drop-off points
Concept design with stakeholder collaboration and workshops
Design highlights
UX decisions & trade-offs
Creating a standardised global, scalable framework
With the scale of the task and complexity across markets, we needed a strong, structured concept to keep things aligned. We designed a modular framework that grouped journeys and features into three clear widgets: Payees, Payments, and Extras.
Before
Customers faced an overwhelming overflow menu - no hierarchy, no structure, and no alignment with how people actually think about making payments.
After
A clear, organised layout with grouped features and visual hierarchy, making it easy for customers to navigate and take action based on their mental model.
Trade-off
A standardised framework was key to supporting 25 global markets with variations of the same design. This meant saying no to some creative and personalised ideas, but this ensured we stayed true to the goal: a consistent, scalable experience that could evolve over time.
Design
Localised hub design & streamlined journeys
The interaction design was developed in collaboration with the design system team and refined through iterative testing in the UK, Hong Kong, and Singapore. A modular approach allowed us to customise widgets and entry points to meet the needs of different regions while maintaining a consistent user experience.
Design highlights:
Created new components in collaboration with the design system team to ensure consistency across markets
Iterative testing conducted in the UK, Hong Kong, and Singapore to refine the experience
Modular design approach for customisation based on local market requirements
Customisable widgets and entry points to align with regional preferences while maintaining global consistency
Streamlined experience by combining journeys to align with customer jobs, reducing friction and decision fatigue
Outcomes
Reduced time on task & improved customer satisfaction
Outcomes were measured both through qualitative user testing, and with analytics data after each launch. There was significant reduction in time spent on tasks, highlighting a more intuitive experience. Additionally, overall customer satisfaction was also improved.