Mobile Banking App

Designing a Mobile Banking app for HSBC



Project dates

 Feb 2015 –  June 2016



Project Summary

  • Define the mobile banking experience for HSBC customers in the UK and Globally.
  • Develop mobile-first features for customers to complete core banking tasks.
  • Design patterns which were thoroughly tested via an external agency were then detailed in a reusable component library.

Alongside a Visual Designer and Developer we produced an animated demo for a mobile banking experience as part of our pitch to HSBC. We won the pitch which subsequently turned into a huge project for the agency. I became Lead UX for the project working in quite challenging circumstances to scale up a team and deliver work to HSBC’s development teams.


UX Strategy

An initial workshop with key stakeholders helped establish the priority user journeys and KPIs to focus our design sprints and roadmap. Working in cross-functional sprint teams assigned a particular a user journey we unpicked the current user flows in order to try and optimise them. We established a framework for states, layers, page types and journeys within the App.


User flows

Design system

Design patterns were transposed into a component library, using an atomic design framework, for consistency, scalability and ease of going into development.

Design prototype

Tap anywhere on the screen to advance through the demo


  • Streamlined and improved core journeys … logon, account management, payments, transfers
  • Established a Design system for HSBC mobile Apps.
  • Established interaction and animation behaviours.
  • Worked in agile cross-functional teams to rapidly adapt to new priorities and features.
  • Delivered accessibility compliant front-end components as code to HSBC software delivery teams.