Global Money
IA / UX & UI - HSBC
Introduction
HSBC Global Money is a single global account enabling customers to send and receive international payments seamlessly and instantaneously like a local.
By having a Global Money account, customers can hold funds up to 28 different currencies within the wallet, all of which will be linked to one Debit Card, allowing customers to spend in the currency of their choice whilst overseas.
Customers will also have the ability to exchange funds between their currencies and send international payments from their multi-currency wallets.
You can find more information about Global Money here. If you’d like to know more about my role and more details on this project, please get in touch.
My Role
Before joining this project, I worked on HSBC's existing global transfer projects as a UX designer. During that period, I learned a lot about how both domestic and international payments work and what type of regulations, risks and market requirements should be considered while designing journeys for customers.
When I heard that there was a brand new project that introduced exciting features to customers, I volunteered to work as a UX designer. In the early stages, we didn't have a dedicated design team to work with so I divided the work I needed to do into several compartments such as research, wireframing, information architecture and UI design.
I was confident about the experience I've got from the previous projects and I was excited to take that to the next level. The thing is, Global Money was on a different scale and I was about to move out of my comfort zone to an unknown territory.
Some of the journeys I worked on International Transfers prior to Global Money
Initial Work
The initial project brief was huge but it was clear:
Conduct an audit of HSBC's existing payment patterns
Competitor analysis on P2P payments, wallets and user profiles
Create high-level IA mappings based on the information gathered above.
Design quick mockups to present the Blue Sky thinking of the project.
During the audit phase, we scanned through what we offer as a bank on multiple channels such as credit cards, current accounts, loans, deposits and savings. This gave us a chance to communicate with global teams to ask questions like; "Do our customers need to make a call to freeze their debit cards?" or "Do we offer virtual cards in market X or Y?"
In the advanced timeline in the pipeline, we recreated these journeys within Global Money to see if they work with our value stream as well as with existing domain holders, ie Accounts, Cards.
An example map on Information Architecture branching
On competitor analysis, I focused on available payment rails to see the biggest dropouts during journeys, customer feedback, and complaints if there are any. In the end, I created a report with the pros and cons for each product, and the best features offered and added my suggestions we may want to include in our journeys.
One of many pages from competitor analysis report
Pre-MVP Stage
With all this information, we started working on initial journeys. Onboarding, Card Ordering, Managing Cards, Foreign Exchange and sections such as FAQ and Terms and Conditions were the first to be designed and tested.
We designed these journeys to visualise the high-level concept to be shared with stakeholders, developers and markets to gain some initial feedback.
Some Pre-MVP / Blue Sky screens
User Testing
Every time we introduce a new flow or functionality, we use our monthly user testing sessions to focus on these potential pain points. And then repeat the process to update the flows.
I made a collection of all user testing sessions I’ve conducted on an internal platform. By doing this, I shared all that feedback with any relevant parties as well as other teams who might be interested in the results.
Collecting key findings, updating prototype, testing and repeat.
You can find one of the prototypes we designed and used in user testing sessions here
Refining IA and focusing on International Transfers
Now we had an MVP product, we decided to focus on more complex functions such as using Global Money as a payment rail for International transfers. Once again, based on customer calls, user research feedback and getting more data from different global markets (especially from those we plan to launch the product in) we worked on creating an experience map.
This time, we had a dedicated design team to work on this project and my role, as a Lead UX designer, was to help both UX and UI designers by walking them through what we have done so far, how we work with different channels and markets, how to deliver designs and flows to both business, management and developers, focusing on international payment rails creating UX patterns specifically for those markets we will launch the product with these additional entry points.
Creating a customer experience sets was one of the main tasks to get more details about our user’s painpoints before we dive into more complex journeys. Our lead product designers and researchers worked on several journeys like this one above.
Wireframes
To have better communication with teams who review our journeys, we put number tags on top of each screen so anyone can comment on their questions by referring to those numbers. We also have gestures and animations indicating where there is a motion pattern that needs to be used. If we know which API is in motion on a specific pattern/screen, we also highlight them in our comments.
Challenges
Even with all that progress we had made so far and had a chance to work with more designers under the same roof, not everything was a smooth ride. We had some challenges on the way:
Payment options: International payment flows are such complex and intricate journeys. From day one, we aimed to make them as simple as possible. However, every market comes with different requirements and restrictions and we needed to modify some crucial patterns based on those changes.
One of the challenges was, that the business had a strong direction on having both amount entry part and payment options on the same screen since they believed that is the best use case for customers. In theory, that was the case indeed! However, the amount of information we needed to present was overwhelming to have on the same screen. The first thing we did was design the requested flow by spending a few sessions with UX and UI designers. Then, we came up with alternative suggestions and compared them with the original flow. In the end, we convinced the business that separate the amount entry screen and payment options into their dedicated screens. This also helped us to present potential error and warning messages more efficiently.
On the left: the current solution to select payment methods and view its details below.
On the right: a suggested solution that separates the information into two individual screens.
Error cases: When it comes to details like error screens, we didn’t have any solid guidelines to use. After 2 years of working on payment journeys, we had enough experience to understand how APIs work and how and when they fail. Also, we wanted to give our customers a bit more human approach when something goes wrong instead of a screen leading them to a dead end. I spent some time scanning our journeys and which APIs are integrated into those error cases to prepare mini guidelines. I covered both recoverable and non-recoverable scenarios by using existing toolkit components. By doing that, our developers wouldn’t need to create brand-new templates.
This guideline is part of the upcoming global app toolkit now.
Some screens from the “micro-guidelines” on how and where to use error screens.
Result
After 2 years of working on many aspects of Global Money, we have created several journeys and worked with multiple teams from all over the world. We have learnt a lot of things not only about international transfer but also about how a good, reliable and trusted financial product should be made.
The journey below is one of the modest flows we put all that experience into.