HSBC Finance App

Save Better. Invest Wiser. Spend Smarter.

An innovative personal financing solution for GenZ.

Client

HSBC Global Grduate Programme Gradhack 2020

My Role

Interaction Designer

UX Researcher

Duration

1 month

Oct 2020 - Nov 2020

Team Size

Context

THE INNOVATION CHALLENGE

As a part of the 2020 Gradhack Challenge conducted for all new graduates joining the Global Technology Graduate program at HSBC, we were asked to innovate on building a new age mobile banking solution for the future's largest consumer base - GenZ, and make banking a useful and integral part of our customer's life.

Approximately 61% of the world population use mobile phones -- that's over 4.78 billion people and grows every year! Mobile phones are one of the most influential technologies in the world!

SOLUTION

We decided to create a new feature in the everyday HSBC banking app called Personal Finance, which helps its users to save better by setting savings goals their goals and tracking them, invest wiser by learning about different ways of investing, and spend smarter by being up to date with their knowledge on financial schemes. I led the user research and design for the project.

This year, Generation Z (individuals born in 1995-2010) makes up more than 2.6 billion of the total population and by 2025 will be representing the largest age group in the world.

The Design Process

STEP 1: EMPATHIZE

Brainstorming to realize the pain points of the banking experience of GenZ

Creating an empathy map

Identifying the user journey to focus on

STEP 2: IDEATE

Rapid ideation and storyboarding

Feature prioritization map

Final concept

STEP 3: PROTOTYPE

Information Architecture

Wireframes

Final Product

01 Empathize

Through our initial brainstorming session, we tried to understand the major problems faced by GenZ. We found out the pain points and created an empathy map using it.

THE PAIN POINTS

information overload, yet not enough knowledge
stress about how to make the most out of the earnings
communication gaps between customer and the banks
guidance on how to use the full potential of banking services
very bad UIs of banking apps

EMPATHY MAP

As a next step to our brainstorming sessions, we created an empathy map where we tried to organize our thoughts into different categories -

THINK & FEEL - to understand what are the worries, preoccupations and aspirations of GenZ
SEE - to understand how GenZ perceive their banking environment and activities
HEAR - what they hear about banking practices from their social and familial circles and from other sources like the internet
SAY & DO - here we try to understand the behaviour and resulting actions on GenZ and their ways of operating.

From these categories, we were able to understand the PAINS of banking for GenZ. This further helped us realize the probable areas to focus on and we listed them in GAINS.

From our brainstorming sessions, we identified two major user journeys that bothered Genz the most.

We decided to focus on user journey 2 because we felt that it was something that was more important to most.

02 Ideate

Rapid Ideation

We did an exercise called Crazy 8's, which was to make us think beyond our first idea of a solution. To do this, we folded a piece of paper 3 times to create 8 panels and spent 1 minute per panel.

As a followup to the crazy 8s exercise, all the team members went ahead and sketched out how they felt their solution would look like

Top features

From our rapid ideation exercises, we landed on the following features that we felt would be most relevant to our User journey.

Features Prioritization Map

NExt we created a prioritisation map, where we mapped the above features on importance (user value) x feasibility (implementation potential).

THE CONCEPT

From the feature prioritization map, we landed on the final concept design for our solution.

We discovered three themes that categorized all the potential features for the solution - save better, invest wiser, spend smarter.

Lastly, we ideated three major features to realize the

03 Prototype

INFORMATION ARCHITECTURE

WIREFRAMES

2. Enter location, date, duration Screen

1. Home Screen

3. Interests Screen

4. Place Selection Screen

5. Itinerary and Route Screen

FINAL PROTOTYPE

Personal Finance - the feature aims to help GenZ finance smartly by learning, setting goals, and being up to date with the latest trends

Here the users get an opportunity to learn about and start investing in different ways through a four step process - learn, test, play, and get advice

Here the users can manage their savings by setting up goals, budgeting themselves, and keeping track of their progress

A section where the users can read up on the latest financial tips and tricks to manage their spending and earnings better

Feature 1: Learn About Personal Financing (Invest Wiser)

We created a four-step process to help our users navigate the process of learning about personal finance

Learn through resources
Play a simulation game to gain practical experiences
Test your knowledge on the concepts of investing
Get legitimate advice from experts at your bank

In the Resources section of LEARN, we provide different resources for users to read through to gain in depth understanding of financial management. Users get to browse through different topics and increase their knowledge base. As a generation that is very active on the smartphone, the concise resources curated by financial management experts would prove to be a very good way for them to begin their journey of INVESTING WISER

In the PLAY section of the feature, we explored gamification as a way to encourage our users to learn further about managing their finances. Simulation-based games have always been popular and engaging to the younger generations, and we felt that this would be the perfect opportunity to leverage it.

The simulation begins with a set number of coins given to the user. As a next step they can start investing it in different investment schemes likes stocks, bonds, real estate, etc. Then they can track their activities and understand their profit and losses. Without actually risking their money, the users can learn about high-risk investment options too.

In the Test Yourself section of LEARN, there are various short quizzes based on the resources section to help the users test their knowledge about the different topics in financial management. We felt that this would be a good way for them to assess themselves on their knowledge base.

In the Get Advice section of LEARN, we have introduced two different features -

Investment Calculator - The calculator takes in data like how much the user would like to invest and what they see their targets to look like, and generates their investment advice based on a trained machine learning-based model.
Getting advice from industry experts - here, the users can book a guidance session with the nearest subject matter expert from the bank.

Feature 2: Set Your Spending Goals (Save Better)

To save better, our users need to understand how they are spending. We created three sub-features for this -

Saving Goals - Here the user can set a budget for their saving goals on a monthly basis.
Monthly Expenses - Here the users can set a budget for their monthly expenses.
Check your progress - Here the users can check their spending insights and also their progress on their goals.

Feature 3: Read up on the latest financial trends (Spend Smarter)

Lastly, our users can keep themselves up to date with the latest trends, vouchers, and schemes in the NEWS section so that they can spend their money smartly.

DEMO DAY PITCH

We pitched our product in front of the other participants and the judges in a 3 minutes long video.

Visual Design Decisions

For our visual design, we decided to stick to the HSBC theme colors. Our feature Personal Finance, is an addition to the usual features of the HSBC mobile application.

We used the color #DD1020 and its hue. The logo remained the HSBC logo.

#DD1020

HSBC Logo

My Reflections

One of the major challenges for our system was to find something innovative that competed with the solutions provided by the traditional banks biggest challenge - the FinTechs. Moreover, with better user experience provided by their solutions, it became even more essential to explore ways to grab the attention of GenZ. We needed to think of features that would be attractive to GenZ, in terms of its content and user experience. Introducing gamification was a pragmatic solution to the issues. We felt that using a simulation to train GenZ on different invest options would be an exciting idea.

Looking back at the project, I feel that there are a few things that I would do differently -

Conduct continuous usability testing to assess the acceptability and usability of our solutions.
Design an in-app walkthrough to maje the users aware of the new feature and help them explore it in detail.
Revamp the third feature, Read, as I feel it could serve as an extension of learn and think of more possible solutions to help GenZ spend smarter.