Joice

A budgeting and saving app designed for females who are new into personal finance management

Case study photo.png

Background

I wanted to explore my own way of dealing with unfamiliar problems. At my core, I am interested in technology and curious about finances.

COVID19 has caused more new users to look into using PFM to help them get better control of their finances. The topic became more approachable since I am also personally looking to get into it. So I decided to look into how the current technology could help average people get better control of their finances.

Challenge

Design a PFM product for female millennial who are new to financial management can stick with.

My Role

UX design, UI design, Prototyping

Timeline

Mid November 2020 - late February 2021

Deliverables

App design,

prototyping

Industry

FinTech

Solution

Here is the TL;DR for the solution I came up with and feel free to click the link for the final Prototype. Explore my flows and dive deeper into my process and how I arrived at the solution below.

The user can interact with the feeds and help the AI optimise relevant content for them.

Clearly show up what money is available to them. And always save before spending.

Setup budget with guide and template so the user can finish it efficiently with good understanding.

Spending display with friendly-toned reminder and display of the money performance​

The beginning of the project

The issues I experience when I manage my money:

I'm passively managing money with PFM tools and the money is controlling my mood.

 

My goal using PFM tools was to 'save more money'. I put money into a savings account in a regular base, and tried to stick with my budget plan. After a few months, I reached my goal, but the feeling of managing money remains rather boring and unfulfilling to me, and I'm not sure how long can I keep it up.

I suspected that the reason was deeper than features.

I have tried other apps like Emma, CLEO, Spendee, the overall experiences are quite similar to Money Dashboard. And I don't think they will bring any meaningful difference. Reaching goals like 'save more money' is not enough to be happy and sustainably manage money long-term.

Assumption: The reasons might surround mindset and relationship to money

A survey showed that women are less confident about their money management, less engaged with personal finances and a majority seems to associate negative emotions with PFM.

These findings suggested that it could seem like simply using a PFM product won't be enough for the average female user because emotion and mindset play a role too, something which needs to be addressed somehow.

To validate this assumption, I spoke to other women to find out.

Design thinking

Describes my approach to the project.

Screenshot 2021-03-25 at 15.06.56.png

Kickoff

What I knew and don't knew

To ensure that my solution has meaning and impact, I've narrowed down my audience and made assumptions regarding the unique problem.

MVA

Female millennials with a growth mindset who don't understand money very well but want to manage their finances better.

Unique problem

 

Female millennials with a growth mindset who need a healthier relationship between spending and saving to achieve financially sustainable lifestyle.

Considering the MVA are beginners at using PFM's, more nuanced types of investing are not taken into consideration.

🔸 What I knew in the beginning

About the user

  • They are willing to learn about PFM

  • They have tried different ways to manage their finances already

About PFM products

  • They help users track their bank accounts in one place

  • They help users calculate money (reduce math/processing required by the user)

🔸 What I didn't know and wanted to find out

What are the real problems that the MVA faces when managing their finances?

🤔

There are many PFM products in the market. What do the MVA find to be lacking in these products?

🤔

What is her needs? Pain points?

What triggers you to check the PFM product you are using? (time of day, location, event)

What is wrong with the way she is doing it?

How does she currently manage her money?

What product has she used or is she currently using?

What does she like and dislike about them?

Reasons to use one product over another.

(The above thoughts are not exhaustive but rather representative of what I found most important)

Research

How I uncovered two main problems

💡⚡️ 

Problem 1: What are the real problems the MVA faces when they manage their finances?

Online user interview

I contacted fifteen people who seemed fitting as interviewees. Three out of seven who fit the profile were willing to do the interview.

Interviewees were

  • Female millennials

  • They were not familiar with personal finance management

  • They were interested in managing their finances

  • They had already tried at least one tool to manage their finances

Duration: 1h

Method: Facetime, Zoom, Descript

🔸 User's high-level needs

Analysing the findings through methods like 'Empathy mapping' and 'Jobs-to-be-done', I have condensed the needs into these four sections:

Empathy map.png

Jobs-to-be-done

  • Get spending under control and still enjoy life

  • Grow a healthy money management mindset

Functional needs

  • Track spends

  • Plan budget

  • Save more

Personal/emotional needs

  • Grow confident about managing finances

  • Manage money is not a difficult job. They want it to be easy and understandable.

Social needs/the better version of oneself

  • Someone who's financially independent and responsible, who doesn't let money control their life but rather uses it to live a better life.

Key findings

The user is lacking the right mindset and real drive to succeed

From the interview, the overall reasons that causes user dissatisfaction towards PFM can be condensed into the following points:

  • The user doesn't feel motivated enough to manage money consistently.

  • The user doesn't feel confident because they don't know how it actually works or how to optimise it, etc.
  • The user doesn't feel that they are growing any knowledge about money management.

During the interviews it became apparent that the users don't actually have much of a concept about financial management. They are passively using the PFM product and trying to keep up with their basic goals.

It's like when you go on a diet and follow a plan. People who succeed in dieting start somewhere, build awareness of what works for them and grow their knowledge around that, enabling them to follow through and stay motivated and happy during their diet.

It is the same for managing money; how much money and energy the user has is relatively limited, so it's important to understand why they do it in the first place, what spending pattern works for them, improve their knowledge and eventually it will  accumulated to form a better mindset.

The findings validate my early assumptions: The main difficulty the user faces is the lack of a better money mindset.

💡⚡️ 

Problem 2: There are many PFM products in the market; what do the MVA find to be lacking in these products?

I have quite a few products on my phone under 'PFM folder' which I use from time to time, but I don't feel that I'm managing money in a meaningful way that makes my life better.

                                                                                          - Celine (interviewee)

🔸 The users are lead by the features of the product but they don't actually know what they want to get out of the product.

The apps in group ① &  ② are top choices for the user to setup budget and have overview of their money. The interviewees want to do a lot with the products they have tried but they end up not really using them. This is a sign that the apps are not satisfying expectations. As a result, the user won't build any loyalty towards the product either, so long-term use will be hard to sustain.

① PFM apps for overview finances, make budget plan and saving plan:

Yolt, Money Dashboard, Cleo

② Budget apps: Budget, Spendee

③ Other PFM apps: Emma, Plum, Snoop

④ Other way to manage money: Notebook, Habit apps, Notion, Trello.

Key findings

The current landscape of products are not

beginner-friendly

Even if the interviewees have made the attempt and host several apps on their phones, they still don't feel any more confident about managing their money (they're more likely to establish a false sense of reassurance).

Combining their words from the interviews and my own analysis, I've rounded out the following potential explanations for the prevailing problem:

  • The product didn't succeed in motivating the userFor the relatively new user, managing money is not a fun job because they are not in the right mindset yet. They need encouragement and motivation to stick with the product. 

  • The budget setup didn't guide the user well enough: The interviewees has reported that they didn't feel assured throughout the process. They didn't know where to start, felt it took too much time to setup, or that they are not in control. 

  • The user's knowledge about PFM didn't improve: Even though the app will send weekly reports and tips, the user doesn't learn much. Maybe because they don't know how to react to the advice in the report? There's a high chance they are not even checking it but rather auto-dismissing the notification as a habit.

  • It becomes all about the money, not about knowing themselves better: Some may lose track of the original purpose for them to try and manage money. They end up caring only about keeping up with the current budget, and if they spend extra money they will feel bad or guilty.

Reframing the problem

Unique problem statement

The findings above have lead me to the following problem statement:

🔸 Create an experience that helps the MVA enjoy the journey of managing their money while growing a healthy, sustainable money mindset so that they will have increasingly better control over their finances in the long run.

🔸 Business goals

For this project, I want to design the product that simulates real-world constraints, so I have set up 'project goals' and used methods like 'Lean canvas' to define the scope.

Project Goals.jpg

Created project goals for measuring success of the design

Lean Canvas.jpg

Thinking through a 'lean canvas' helped me define the product's scope better and more quickly

In this stage, the solutions and features developed for the MVP should be aim at:

Priority business goal

  • Capture and maintain loyal customer

  • Increase user's engagement

Key metrics

  • Acquisition: How much downloads

  • Retention: How many users are using the product

  • Activation: How often users use the product

Business value & goal of the product: Ads, market research companies & tips

Considering that the type of product is about budgeting and saving, I won't be dealing with cashback or suggesting any financial products, in which case the business value of the product can be found by following the path of Money Dashboard and Snoop (they're also free to use).

At the beginning, the company can earn money from:

  • Ads based on insights generated by the user

  • Providing anonymous data to market research companies

  • User feedback

 

In the future, when the user gains real value from the app:

  • Sell money-related digital courses, workshops, etc.

  • Suggest low-risk investment products and earn commissions

Start the design

Define MVP

To make sure I will have a clear user group and their goals in my mind, I have created a persona based on insights from the user research.

Persona.png

Persona with personality sliders and behaviour pattern

🔸 The MVP is focused on helping the user understand their spending pattern, motivate them to save more and improve their knowledge of managing finances.

To form an idea of what features should be in the MVP, I expanded the design opportunity using the 'HMW' method. To build more empathy with the user, the methods 'Customer journey mapping' and 'Experience mapping' came in handy.

HMW.jpg

Brainstorming ideas with 'HMW' method

Customer Journey Map-budget save.jpg

Looking for design opportunities within the process where people plan budgets and save money ​

🔸 Defined solutions that solve the user's core needs

I have spotted the opportunities in 'budgeting' and 'saving' processes, associated with 'Build a healthy money mindset' and 'have control of their money' into the following solutions. These are also the focus of the MVP:

  • Guide and engage the user with budget/saving set up: This helps the user's setup process be quick and understandable. The guidance will lead them and the engagement will make them feel that they are still in control of the setup. This focus can help users feel more confident and included in the process.​

  • Integrate relevant content and insights: This will increase the user's chances to interact with the PFM tips, motivations, and other content by prompting them effectively. The user can improve their PFM knowledge, get to know the app better and adapt to a better mindset.

  • Motivate and help the user figure out their real goal in PFM: The user should understand managing money is not about money but rather it's about themselves. It will motivate them and consolidate their drive to follow the PFM plan.

🔸 The MVP features I chose for this stage

  1. Review net worth and individual bank account

  2. Link bank account for automation

  3. Feeds for contents, insights, tips, etc

  4. Budget setup with guide

  5. Inspiring cards display for goals

  6. Saving setup with goals

Branding & visual style

Based on the persona, user research and competitors branding , I have identify the brand voice of this PFM app and created 'objectives' to lead the design and put myself in a simulated real project environment.

🔸 Objectives

Create a mobile app that can:

  • Delivery the brand voice: Confident, uplifting, genuine

  • Have more user 'link their bank accounts'

  • Guide the user through the process and make them feel they are in control

  • Increase the user's engagement

  • Increase interaction with guidance and tips, leading to more ad click-throughs

Moodboard.png

Visual explorations of the picture can present a persona's vibe, inspiration of the product, potential color scheme & typography.

Branding.png

Part of the design system: Color and typography of the product

The design journey

How I design the feature 'budget'

🔸 Start with the feature 'budget setup' and define success metrics

I start with designing the feature 'budget setup', it's designing for the relatively-new female user. These are the metrics based on the user's needs, they serve as the measure of which is the best design from all the attempts.

  • Easy to understand

  • Give the user overview

  • Quick to set up with ability to modify and engage

  • Include guidance with ability to interact with

🔸 Create new flow and structure for budget setup

There were two tasks led me through the ideation phase to find the best solution for the budget setup.

① Analysis the competitors' budget setup feature

I have analysis the competitors's budget setup in details here, and used the above metrics to measure how success they are.

From the analysis, I had a more clear idea of what I can learn from the competitors, things like show the user both incoming and spending ('Money Dashboard'), clean layout and visual hierarchy (Yolt, Money Dashboard), a gathered place for feeds and insights (Spendee).

Competitive analysis.jpg

More detailed analysis of competitors' budget feature

② Explore and design the frame of budget setup

 

Consider these products don't offer a simple and quick budget setup, I decided to design the structure from the ground.
The initial setup could look something like:

  • Set up manually

The user sets up the budget amount, categories one after another.

  • Plan-based

The user pick a plan for budget or have default setting and ability to modify when they want.

  • Goal-based

Set up a goal first, it can be a saving goal or keep essential spending under a certain amount.

  • Quiz-based

Answer questions so the system can suggest a compatible plan.

  • Money-personality-based

Select the type of spending personality and the system will suggest a plan for the user.

These two plans will require more implementation effort and the value for customer won't be significant, so they were not be considerate in the sketching phase.

The strategies above on the left-side make more sense, so I put them into context, exploring the frame and steps of budget setup, layouts and tried not to obsess over little details. I want to move fast so I could start building the real thing and iterate more.

After deciding the direction, I began refining the design in grayscale. Covering all use cases was not realistic so went with what a new user would see in 'budget'.

Budget-sketch.png

Part of the idea sketches on 'setup a budget'

Budget setup.png

More refined  possibilities of budget setup layout 

Budget display.png

Possibilities of spending display

🔸 The main difficulty I experienced during the ideation and design phase

How to optimise design with clear direction and move forward fast​?

🤔

The below points cover my approach to this difficulty:

  • Let the wireflow lead the design

  • Keep assessing whether the design matches the user's needs

 

I focus on a single line of a user journey at a time and used story-telling and annotations to fill any gaps. It helped me develop more ideas without being distracted. I found this shorthand task flow created by Ryan Singer from Basecamp which helped me make changes to the task flow quickly while I exploring the design.

🔸 Wireflow: showcase with context, structure and visual layout

I kept going back to check the success metrics of the budget setup and user's needs to make sure the design is valuable to the user. When I validate a design, I will turn the task flow into a wireflow. It clearly indicates hotspots, user actions and visual feedback. It was very helpful and enabled me to navigate between the design of different user's tasks and it's still a lo-res prototype, making it more flexible and easy-to-change.

 

Below is an example of how I went through the first step of the budget setup: Edit available money. Firstly, I structured the user flow with a simplified version (shown below).

task%20flow_edited.jpg

I use this simple and quick-to-adapt task flow created by Ryan Singer from Basecamp to move forward fast in in the iteration.

I sketched the interface based on the user flow shown above. After iteration and refinement, I moved into a more detailed version with contextual user flow as shown below.

wireflow.png

Wireflow of the feature 'budget setup: Edit available money'

Usability test

Improve the design with the user involved

I don't have a large audience and data to track, so I chose to do online one-to-one usability tests to  validate and optimise the design. I had three users interacted with the prototype of the budget setup I made in Figma. 

The overview of the tasks for the usability test:

1. As a new user who just downloaded the app, you are trying out the budget setup feature. You have already linked the bank account and your regular income will have shown up in the app, now you want to add another income source: babe-sitting with £100. What would you do?

2. You have already setup the available amount of money for the budget in the previous step, now you are trying to setup the budget. What would you do?

3. You are also looking for guides and content to learn more about PFM inside the app, what would you do?

 

The success metrics of the test are

1. Does the user feel confident during the setup process?

  • Easy to navigate

  • Simple to setup

2. Is the content that the user relies upon to improve their understanding of the product and PFM well-designed?

  • Easy to find

  • Nice to interact with

🔸 The user's feedback is positive, but...

During the usability test, all users think the budget setup is easy to follow and they feel confident during the process. However, I noticed the users hesitating a few times. I marked these struggles on the wireflow, and had a quick interview afterwards with the users.

The below showcases what the user struggled with and the resulting design optimisation.

Problem: The users are not certain about how many steps are in the process. It brings uncertainty and the user might give up and leave the setup. 

1-1.png
1-2.png
2-2.png
2-1.png
2-1.png
Stepper.png

Solution

Divide the steps into:

1. Confirm the edit

2. Edit 'regular saving amount'

The modal window of 'Confirm edit will present an overview of what the user has edited and a notification card with confirmation button. The card with button motivate people and give them more information.

1-3.png
Task flow1-1.png
Task flow1-2.png

Solution

Add a progress bar so the user knows how many steps there are in total in the spending setup.

Add a motivation page to enhance a more relaxed and motivated vibe.

Problem: The purpose of this page is to show the details of the income for confirmation and edit 'regular saving' amount.

But the user was confused because it looks the same as the previous 'edit available amount'. It takes some time for them to realise the purpose of the page.

Task flow1-3.png
1-2.png

After the changes to the design, all three users commented these changes solve the uncertainty and doubts during the setup. They think the process is smooth and efficient compare to the other products they have used before. 

Breakdown of chosen design

Below I present the prototyping phase of the product and explain the reasoning behind the design direction.

Dashboard: For money overview and feeds.

Feeds:

The user has an all-in-one place to check insights, ideas, suggestions, etc.

1-1.png

The user has control of what they want to see (can pin it to read later), or what they are interested in (feedback via thumbs up or down). Such interactions with the app content helps the AI optimise the app experience for each individual user.

Budget: Set up a budget and keep track of spending.

1-3.png
1-2.png

Automatically display useful, relevant tips.

The user can check how she gets the available amount and so will have a clear idea of her budget & savings plan.

Edit available money: Incomes & savings

Pre-set template: Provide the user with a structure of what forms the available money.

Other projects
Joice: UX/UI design for a budgeting and saving app