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
Provide new tools and innovative ways to help customers manage their money better.
Objective
Design a new personal finance management feature that embeds smoothly within the current HSBC app.
Research
Since there was no detailed 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 seem to prefer speed & convenience over face-to-face customer service.
Define
Defining the 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.
Understanding Ray's Story
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 problem 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
Generating Ideas
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
Integrating the new feature & defining the main task flow
Mapping out the existing app as a sitemap helped provide an overview of the product as well as where the new feature should be integrated. Since the feature would need to calculate the transactions in a bank account it made sense to embed it under the account section.
I also decided to figure out at a high level, how a budgeting feature should work and what steps would be required in a task flow for creating a budget.
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.
Moving on to the 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 new 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.
-
Users found the layout and navigation of the app simple and straight forward they found the onboarding process confusing and disjointed.
-
Instructions were too minimal & confusing.
-
More detail was required to allow users to understand how the budgeting process worked and what each step was for.
-
Copy didn't match the voice of the branding.
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.