HSBC Personal Finance Management Mobile Banking App


This is a personal project where I wanted to add personal finance management features to the Hong Kong version of the HSBC mobile banking app. The current mobile banking app does not offer features which benefit customers in terms of managing personal finances. I wanted to create new features such as categorizing transactions and setting budgets which would work within the existing app. By having everything in one app, users would be more willing to use the features more.


Mobile banking has had a low adoption rate in Hong Kong despite the fact that nearly 7 in 10 residents in Hong Kong use smartphones. The main reasons include fears of lack of security, poor usability of mobile banking apps and lack of useful features. I chose to use HSBC's mobile banking app to add on these extra features because it is Hong Kong's biggest bank and if these features were added to its app, it would hopefully encourage customers to use it more.

01 Research

I conducted a survey, interviews, secondary research and competitive analysis of features offered by fintech and traditional banks products. Results of all the research showed that the majority of users would be willing to manage their personal finances if the task was easy to do without requiring too much effort. The features which users were most likely to use include setting budgets, savings goals and tracking expenses. For the first version of the app, I will work on setting budgets and categorising transactions but for the next version I will incorporate setting savings goals.


I created a persona to represent a short term saver and someone who needs to track her spending. I explored the pain points of this persona when it comes to personal finance management so I could use it for creating the wireframes.

02 Strategy

I used the UX strategy blueprint tool to help me decipher what it is I need to build the wireframes and app map for the HSBC mobile banking app.


I created a userflow for the app which features the two new PFM features of the HSBC mobile banking app.

03 Design

It's important to make the UI and UX as familiar to the current app as possible so it is as accessible to their existing users as possible.

High fidelity screens

For the two new features of the app, transaction categorisation and creating budgets, I decided to deviate from the existing HSBC corporate colours and introduce more colours for accessibility - for easier identification of categories.

Next Steps

After testing, I feel that some of the usability could have been improved mainly due to issues with the existing UI but overall users found the user experience good enough. For the next version, I will work on a feature to help users set savings goals for both the short and long term.

Other user feedback that was mentioned was to include data visualisation which would make the UI more interesting especially the colours which would help the users see at a glance how they are doing with their budgeting.