Global framework for payments at HSBC
Project background
The HSBC Payments Hub serves as the central dashboard for all payment features within the mobile app. This case study outlines the development of a global design framework intended for use by 25 markets worldwide.
May 2023 - November 2023
My role
Collaborating closely with the product lead for payments, we set out a new vision for the mobile payments experience. This project spanned 1.5 years, progressing from the early vision to its implementation in our first three markets. My primary focus throughout this period involved UX research, information architecture, concept design, and collaboration with numerous stakeholders to establish a global framework.
Responsible for
UX discovery
Surveys, interviews & usability testing
Project management
Workshops with local markets
Problem definition & product scope
Journey blueprints
Creating north star concept
The Challenge
The HSBC mobile app was initially launched in Hong Kong in 2010 and expanded to other markets, including the UK in 2012. Over time, we added numerous payment features and functionalities, spanning domestic, international, and payment management services. However, this rapid feature expansion led to a critical issue: we lost focus on delivering a cohesive customer experience.
The app lacked integration and often presented products with internal names, falling short of customer-centric innovation. Furthermore, the experience varied across markets, causing inconsistencies for international customers who banked with us in multiple locations.
The Objective
Our objective was to create a global, scalable payment hub that brings together payments, payees and other features in a standardised framework. Removing friction and cognitive load to help customers complete their desired task in the fastest and most secure way possible.
The approach for this project was planned to ensure we were creating a global framework, carefully considering both global and local needs. It involved collaboration from design, product, and business experts in 8 markets, resulting in the experience currently available to customers in the Hong Kong, and Singapore.
Research & discovery
Our approach to discovery was simple; Identify customer needs across markets and design a common framework. This enabled us to build a consistent foundation for HSBC globally, whilst catering for specific local needs.
At the time of initiating this project, we had already collected 3 years worth of research at a global and market level. This includes: market research, UX benchmarking, competitor analysis, surveys, user interviews, customer journey maps, personas, usability testing, data analytics, staff and customer feedback, and complaints data.
This research provided a huge amount of quantitative and qualitative insights to help us understand customer needs and pain points through the payments ecosystem.
*Research data is shown for illustrative purposes only and has been modified for confidentiality.
Closed card sorting
As part of our quantitative research, we had participants complete two closed card sorting activities. We aimed to validate our information architecture while identifying any dissensus among markets.
The activity was integrated a part of the survey (using Optimal Workshop). Participants were instructed to drag each "job" into a category or place it in "cannot group" or "other" if they couldn't find a suitable category.
For example, a job could be: "Paying a gas bill."
Lo-fidelity concept
Informed by research and card sorting activities, we designed a concept that standardises fundamental elements while permitting customisation for local markets when needed. Our design is rooted in the "Jobs to be Done" (JTBD) of our customers, a methodology that centres on customer motivations and desired outcomes. By applying JTBD, we can construct user-friendly categories, defining a new information architecture that operates on a global scale.
| # | JTBD summary | As a customer, I want to... |
|---|---|---|
| 1 | Send money to someone I have paid before |
|
| 2 | Add a payee |
|
| 3 | Move money between my HSBC accounts |
|
| 4 | Make a payment to someone within my country |
|
| 5 | Deciding upon the best way to pay someone overseas |
|
| 6 | Use other payment related features (inc. 3rd party providers) |
|
Co-creation with markets
We engaged with 8 local markets to tailor our concept to their products and customers. This collaborative effort involved local stakeholders from the business, product, and design teams. We began by validating the approach, assessing its suitability and appearance within each market.
Subsequently, we initiated a series of design workshops and offline iterations to explore new ideas. Involving local teams was essential, not only for validation but also to tap into the expertise and insights of market experts.
Design validation
We refined our concept through multiple iterations until we reached the stage of high-fidelity designs. At this juncture, we carried out moderated usability testing in three critical markets: the UK, Hong Kong, and Singapore. The team skill-fully devised real-world scenarios with comprehensive task breakdowns. This approach enabled us to generate a qualitative research report that focused on task success rate, a valuable tool for easily identifying and quantifying customer pain points within the user experience.
*Research data is shown for illustrative purposes only and has been modified for confidentiality.
🇭🇰 Hong Kong experience
The Hong Kong app introduces a widget displaying recent payees, based on previous transaction data, such as date and frequency. This provides customers will a speedy way to make regular payments to friends and family.
🇸🇬 Singapore experience
The Singapore HSBC app introduces a financial contact library with quick access. Allowing customers to save multiple sets of account details under one payee, including a mix of domestic and International accounts.
Project summary
This was the creation of a true global framework, where 100s of features and journeys already existed across many different markets. These are some of my thoughts and reflections:
Designing for 10+ markets at once is daunting and pretty challenging. I would have invested more time in analysing differences in product and customer behaviour so that we can find 3-5 key markets to design for.
Finding the right balance of function and form was a key focus for us. In this case we prioritised function so that the framework was a solid foundation. However, for the next iteration I’d like to push the creative direction and visual design a lot more.
Co-creation with stakeholders and designers in local markets is a ‘no-brainer’. The power of collaboration with local teams not only helped us better understand the context, but made our mission theirs too.