HSBC Remittance Feature — full case study

A concept feature adding remittance services to the HSBC mobile app, with exchange rate comparison, rate alerts and transaction tracking, built inside HSBC's design system.

Client: HSBC

Category: Concept

A concept feature adding remittance services to the HSBC mobile app, with exchange rate comparison, rate alerts and transaction tracking, built inside HSBC's design system.

Metric: Rate comparison, alerts & tracking

Role: UX and UI Designer

Duration: Concept project

Solo concept project

HSBC serves over half of Britain's households and wants to expand its remittance services. The app is well rated, but expats sending money home routinely leave it for third-party providers with better rates, transparency and speed.

Expats in the UK who regularly send money to their home countries wanted alerts on their transactions, fair exchange rates without juggling two services, and remittance integrated into the banking app they already use.

  • A concept project adding one feature to an existing, well-rated app.
  • Everything had to be built inside HSBC's established design system.
  • Open banking (PSD2) opened the door to third-party providers inside the app.
  • The scope stayed tight: the remittance journey only, not the wider app.

Studied banking trends and competitors, discovered the open banking (PSD2) opportunity, and interviewed expats who regularly send money home about how they manage their finances.

  • Every participant managed their finances manually, with pen and paper or spreadsheets.
  • Third parties were chosen for remittance because of better rates, transparency and speed.
  • Notifications and alerts on transactions were wanted across the board.
  • Remittance and budgeting integrated in the bank's own app was a clear wish.

Crazy 8 sketching opened the ideation, and the strongest ideas merged into a story of Jack, the persona, a political researcher in London, sending money to his mum. A storyboard, a sitemap scoped to the remittance service, and a user flow for setting rate alerts followed.

Exchange rate comparison, rate alerts and transaction tracking, designed as lo-fi wireframes and hi-fi screens built entirely from HSBC's existing design system components, so the feature feels native to the app.

  • Six lo-fi wireframes and six hi-fi screens covering the remittance journey.
  • The feature designed entirely within HSBC's design system.
  • An interactive InVision prototype observed in usability sessions.
  • The open banking (PSD2) insight shaping the whole approach.
  • The concept shows remittance living natively inside the HSBC app.
  • A path to keeping remittance customers in the app instead of losing them to third parties.

Working inside an established design system was the real lesson: the challenge was making a new service feel like it had always been part of the app. The research also showed how emotive money is; sending it home is about family, not transactions.

I would explore the open banking opportunity further and test the flow with a wider group of users.

Overview

Category: Concept

Discipline: Mobile banking feature

HSBC serves over half of Britain's households and wants to expand its remittance services. Its mobile app is well rated, but sending money abroad is where the experience falls short. The brief: add a feature to the mobile app giving users the best experience of sending money home, with the ability to compare exchange rates, set rate alerts and track transactions.

Add remittance services to the HSBC mobile app, in line with HSBC's design system.

Target Users: Expats in the UK who send money to their home countries.

Role: UX and UI Designer

Tools: Pen and paper, Sketch, InVision

Empathise

  • Market research
  • Competitive analysis
  • User interviews
  • Contextual enquiries

Define

  • Personas
  • Empathy maps
  • Problem statements

Ideate

  • Ideation
  • Storyboard
  • Sitemap
  • User flows

Prototype

  • Lo-fi prototypes
  • Hi-fi prototypes

Test

  • Usability testing

Process, phase by phase

Empathise

Market Research

I began with the new trends and technologies reshaping banking, studying competitors who were finding innovative ways to help people manage their finances. A key discovery was open banking, the UK's implementation of the PSD2 directive, which opened the door to bringing third-party service providers into the HSBC app.

  • HSBC market research and competitive analysis

User Interviews

The interviews focused on expats who regularly send money to their home countries, looking beyond remittance at how they manage their finances day to day. Eight findings stood out: every participant managed their finances manually, with pen and paper or spreadsheets; they enjoy budgeting and tracking expenses; they want to save as much as they can; they want notifications and alerts on transactions; they use third parties to send money abroad for better rates, transparency and speed; they want remittance and budgeting integrated into their banking app; they want to hear about schemes and offers; and they save for rainy days, children and family.

User Persona

The persona focused on Jack, a political researcher in London who regularly sends money to his family as the sole earner. He wished HSBC could match the remittance rates of his third-party provider, saving him the time and energy of juggling two services.

  • HSBC user persona: Jack, expat sending money home

Empathy Map

The empathy map explored Jack's motivations and experiences around sending money home: the responsibility he feels as the sole earner, and the frustration of leaving his own bank to get a fair rate.

  • HSBC empathy map

Define

Problem Statements

Synthesising the observations from the Empathise phase, I wrote meaningful and actionable problem statements to kick the ideation off in the right direction.

  • HSBC problem statements

Ideate

Crazy 8 Ideation

The Ideate phase began with Crazy 8, sketching eight ideas in eight minutes. I merged the strongest of them into a single story: Jack sending money to his mum.

  • HSBC Crazy 8 ideation sketches

Storyboard

The storyboard captured that scenario end to end, from Jack checking the exchange rate to his mum receiving the money.

  • HSBC storyboard: Jack sends money to his mum

Sitemap

The sitemap focused only on the additional remittance service, showing how it would sit inside the existing app rather than reworking HSBC's whole navigation.

  • HSBC sitemap

User Flow

The user flow followed Jack setting a rate alert, so he is notified the moment the exchange rate rises above his target.

  • HSBC user flow: setting a rate alert

Prototype

Lo-fi Wireframes

I sketched layouts for the strongest ideas and digitised them in Sketch as lo-fi wireframes, keeping to HSBC's existing design system so the new feature would feel native to the app.

  • HSBC wireframe: exchange rates
  • HSBC wireframe: send money
  • HSBC wireframe: rate comparison
  • HSBC wireframe: rate alert
  • HSBC wireframe: review
  • HSBC wireframe: transaction tracking

Hi-fi Designs

The hi-fi screens brought the remittance feature to life in HSBC's visual language: checking live exchange rates, comparing them, setting alerts and tracking a transfer on its way home.

  • HSBC hi-fi: exchange rates
  • HSBC hi-fi: send money
  • HSBC hi-fi: rate comparison
  • HSBC hi-fi: rate alert
  • HSBC hi-fi: review
  • HSBC hi-fi: transaction tracking

Test

Usability Testing

I built an interactive InVision prototype around Jack's flow and put it in front of users, observing how easily they could check rates, set an alert and send money.

Reflection

Working inside HSBC's established design system was the real lesson of this project: the challenge was not inventing new patterns but making a new service feel like it had always been part of the app. The research also showed me how emotive money is. Sending it home is about family, not transactions, and the design had to respect that. With more time I would have explored the open banking opportunity further and tested the flow with a wider group of users.