HSBC
Designing & Integrating A New Feature Into An Existing App
Role: UX/UI Design
Team: Solo
Duration: 2 Weeks
Please note that this is a speculative project. It is a modified brief from DesignLab for a UX Academy capstone project.
HSBC is not associated nor had any involvement throughout this project.
Project Background
As the largest bank in Hong Kong, serving 38 million customers through four global businesses, HSBC wants to use their reach to improve the financial health of their customers. Their current mobile app has a lot of functionality but they want to continue providing value and help make customer lives easier. The features that they are offering focus primarily on spending and making payments. HSBC would like to round out their offerings by providing users with personalized features that allow them to manage their personal finances.
Problem & Objectives
Although HSBC is the largest bank in Hong Kong they still aim to be relevant and stay at the forefront of the industry. With the fast-paced adoption of fintech solutions in the industry and the increasing number of virtual banks, they want to provide new tools and innovative ways to help customers manage their money better.
To start with, they want to focus on their mobile app. The latest studies show a continual increase in mobile usage for banking, which is significantly above desktop usage. Younger generations, such as millennials expect to be able to do everything on the go and they have no allegiance to any particular service as long as it's beneficial or of value to them.
The majority of young adults in Hong Kong generally save regularly and have a strong sense of saving. Yet, nearly 60% do not have the habit of formulating a personal budget plan despite being crucial toward personal wealth management.
HSBC sees this as an opportunity to make a difference and help Millennials, as well as younger generations, with their financial challenges.
The primary high-level goal for the project is as follows:
-
Design a new personal finance management feature that embeds within the current HSBC app and in the operating system of your choice (iOS or Android). Make sure it embeds well and smoothly with the rest of the app.
Research
Since there was no specific direction about what was to be designed. The first step was to understand the target audience and find out what would be of value to them, as well as any pain points they had with how they currently manage their finances.
This would be achieved through generative research, conducting 1 on 1 interviews with people between the ages of 40-25 years old, and ideally with experience using online banking through a mobile app.
The research objectives were to uncover the following:
-
Understand how they currently manage their personal finance.
-
Understand how knowledgeable and aware users are with personal finance.
-
Find out what online and offline services they currently use, why and for what reasons. If they have a preference for one or the other.
-
What pain points they have around managing their finances.
-
What do they feel would help them to better manage their finances?
Secondary research was also conducted to find more information regarding the current state of the industry, what trends or emerging technologies were being utilised as well as looking at direct and indirect competitors to see how they were tackling the problem space.
Data from government surveys regarding financial knowledge was also collected to gain a broader perspective of the general public's attitudes and behaviours toward personal finances.
Market Research & Competitive Analysis
Some key takeaways from market analysis and competitive research:
-
Like all industries, banking & personal finance was affected by Covid. There was a massive push toward enabling more online services and adopting strategies to help customers without having to be physically present.
-
There has been a huge increase in adopting fintech due to HKMA's plan to push for Smart banking and the rise of virtual banks.
-
Although the general public has a high awareness of the need to save it is increasingly for material purposes rather than for future purposes such as retirement. This is especially more noticeable in younger generations.
-
The general public has fair knowledge regarding saving & investing but could still benefit from more education about how to invest and what all their options are. People still see investing in the stock market as too risky and that it takes a lot of time and dedication to learn about it.
User Interviews
Total of 8 participants.
3 Female 30-38
5 Male 25-40
Having conducted my interviews I used thematic analysis to create an affinity map to identify any patterns and insights from the data.
Some insights which I found were:
-
People need a central place where they can see all their financial information since they usually use more than one service with different banks or companies.
-
People tend to spend first before thinking about the consequences.
-
People need trusted sources of information that explain investing in a simple and easily digestible way.
-
People need more active but less risky ways to learn about investing.
-
People are seem to prefer speed & convenience over face-to-face customer service.
Define
Target Persona
Having analysed my research I was able to generate an empathy map to better understand how users felt about the problem space. This further helped to define a target persona and start highlighting some potential problem areas that we could focus on.
The target persona named 'Reliable' Ray came about from the aggregate of my research findings. He is in his late 30's, married, and planning on starting his own family. Although he's usually sensible with saving and spending he has a tendency to splurge a little on the latest gadgets or on special occasions for his family members. As well as saving to start his own family, Ray also needs to save for retirement, a down payment on a flat, and an emergency fund, all while making sure that he's able to cover the monthly bills and expenses as well as look after his retired parents. Needless to say, Ray has a lot to manage, yet he doesn't have a solid plan or a budget in place to help keep him on track.
Storyboard
With a target persona defined, it was time to figure out what Ray's problems are and how we could potentially solve them. I created a retrospective storyboard to better help empathise with Ray and see if there were any other potential opportunities to explore in the ideation phase.
Having spent some time empathizing from Ray's perspective, I came up with the following POV statements.
POV Statements
-
Ray needs a proper budgeting plan because he has many things to save for.
-
Ray needs trustworthy and easily digestible knowledge so that he can understand all his options for saving & investing.
-
Ray needs to cut down on his generous spending in order to save more towards his own goals.
-
Ray needs to manage his finances more efficiently in order to allocate appropriate savings towards each of his goals.
-
Ray needs an efficient way to learn in order to understand how to invest.
How might we's...
Ultimately due to time constraints, I would only be able to focus on solving one problem. From the POV statements above I chose to tackle the highlighted problem since it covered some other POV statements in the list and would provide the biggest impact to solving Ray's problems. I reframed the statement into several HMWs to help generate ideas on how to solve the problem.
As mentioned above Ray had several life goals to save for as well as various monthly and daily expenses to track.
Some HMW statements I came up with to tackle this problem are:
-
How might we help develop a budgeting plan for Ray to better track his spending?
-
How might we enable Ray to easily create a budget which he can customize & follow?
-
How might we help Ray be more aware of spending without a budget in place?
-
How might we provide Ray with advice on how to budget?
-
How might we make budgeting a fun task for Ray?
-
How might we highlight the importance of a budget so Ray can achieve his goals?
Ideate
Crazy 8's & Braindumping
Having defined the problem I could now start to generate ideas for solutions to the problem. Starting with a round of crazy 8's, I tried to think of different ways a budgeting feature could look or how such a feature could potentially work. After which I started to elaborate more and started sketching out flows and thinking about what features and functions would be needed.
Generating ideas from HMWs.
Making notes of different ideas and sketches of screens.
more ideas & sketches
Sitemap & Taskflow
It was at this point that I decided to stop and figure out at a high level how a budgeting feature would work and what steps would be required in a task flow for creating a budget and how it would fit into the existing app.
With a little research and understanding of how a basic budget is created, I simplified those steps and created a task flow that outlined the steps needed in the new budget manager feature that I was designing.
Mapping out the existing app as a sitemap also helped provide an overview of the product as well as where the new feature should be integrated.
Mid-Fi Wireframe
With more clarity toward what I was designing and what features and functions were needed to complete the task, I created a mid-fidelity wireframe of the new budget manager feature.
Prototype
From the wireframe, I proceeded to prototype the feature for testing.
Test & Iterate
With the first version of the prototype complete, I quickly moved on to testing. It became apparent early on in designing the new feature that users would need some form of onboarding or the learnability of the feature would need to be low in order for users to adopt it. So I decided on 2 specific tasks for testing, they were to find out if users:
-
Understand the onboarding process and are able to go through the process for initial setup.
-
Are able to edit spending limits and goals after the initial setup.
To achieve this, I conducted moderated user testing with 3 target users. They were asked to
perform tasks related to the objectives and asked to narrate their thought process. Then questions were asked depending on how they reacted during task completion.
Key Findings
With all the data collected I created an affinity map to find common usability issues or any particular areas of the process which users found most confusing. A major problem was that although users found the layout and navigation of the app simple and straight forward they found the onboarding process confusing and disjointed. This was mostly down to the fact that instructions were kept very minimal and there was no indication of steps which is common for onboarding flows. More detail was also required to allow users to understand how the budgeting process worked and what each step was for. However, this also brought up another problem of using similar language to match the voice of the branding while also providing enough explanation or instruction.
With little time remaining for the project, I decided to focus the next iteration on feedback regarding the onboarding process. Although it's not the main focus of the new feature, if users don't understand the purpose and how to use it, they're unlikely to use it at all.
Branding & Visual Design
It was also at this stage that I decided to apply HSBC's branding to the designs I had created. Normally this would have been incorporated earlier. However, I wanted to spend more time testing the feature to make sure that it was viable and to get at least one round of iteration completed.
Luckily I managed to find online documents regarding HSBC's brand guidelines and with reference to their existing app it was relatively simple to recreate app elements that conform to their design system.
Outcomes & Lessons
Overall I feel quite satisfied with the way this project has turned out. Although the idea for the final product isn't particularly unique I do feel like it's a feature that is viable and quite useful to users. However, I feel like there are potential problems that I haven't thought about yet or maybe the scope of the feature is too large to embed into an existing app?
Although it's relatively easy to adapt to a visual design system that's already in place, particular attention needs to be placed on writing style to make sure that it also matches the brand voice.
If I were to tackle this project again I would probably devote more time toward research and ideation. Given the broad scope of the brief, I'm certain there are many opportunities to discover which is hard to do alone. This also highlights the fact that working with a team is vital and ideally I would be able to collaborate with other designers.