Donut Budgeting App

helps users create a monthly budget based on their spending habits.

Summary

DONUT is a budgeting tool that helps users create and manage their budget conveniently by generating a recommended budget that matches the user’s spending habits. This is an individual capstone project which I worked on over 10 weeks at BrainStation, and my final deliverable was a high-fidelity prototype for the minimum viable product. 

ROLE

UX/UI Design
UX Writing
Project Management

TIMELINE

10 Weeks

TECH AND TOOLS

Figma
InVision
Notion

TEAM

Solo Product Designer

THE CHALLENGE

Canadian millennials and GenZs have been struggling with their debts and day-to-day financial management due to overspending on non-essential shoppings

Problem Space

This project came from a problem that I'm facing when I was moving out. It was a headache whenever I started to think about what I would eat the next morning with a limited budget. I have tried many different budgeting apps to keep track of my expenses and manage my budget, but the result didn't meet my expectations. It was all because the budgets I set were all wrong and sometimes unrealistic. 

But I'm not the only one...

For years, many Canadians, especially young people living in big cities (Toronto, Vancouver, etc), have been struggling with their debts and day-to-day financial management. Therefore, having a reliable solution to tackle this issue is crucial to help Canadian millennials and GenZs keep track of their bill payments and an effective way to start saving toward future goals and prepare for unexpected expenses.

Constraint

Research

• Lack of quantitative research and insights on Canadian spending habits

Feasibility

• The task flow must not confuse users. Otherwise, the app could be considered untrustworthy.
• Terms about finance used in the app must be clear and simple to most average users.

Experience type

• Mobile Experience on iOS

Now I will show you the step-by-step, in-detailed design process along with some methods and findings that I did to come up with the solution.

RESEARCH AND STRATEGY

Secondary Research

Several research pieces on how Canadian Millenials and GenZs manage their finance revealed that 40% of them say paying down debt is their most important short-term financial priority because they tend to spend 53% more on restaurants and 39% on shopping.

Main Insights

To collect quantitative and qualitative data and insights around personal finances, budgeting, and financial literacy, I conducted an online survey using closed-end and open-ended questions with 21 participants.

RESEARCH & STRATEGY

Understand My Audience

To get a deeper understanding of personal financial management, I conducted 3 in-person interviews with 1 millennial and 3 GenZs. All insights collected from the primary research have been used to create personas that represent prior users.

Below is the pain point and opportunities chart which I created based on the insights from the interview.

 I set out a "how might we" question that I would use as my north star to guide my solution development:

“How might we incentivize millennials and GenZs to stick to a budget rather than overspending on non-essential purchases?”

Persona

Using the interview insights, I developed a primary persona to solidify the target user's pain-points, behaviours, goals, and opportunities. These could then be referenced moving forward to ensure that my design decisions were aligned with my user.

Experience Map

I then created an experience map to visualize the current process that my persona would go through. From there, I was able to identify specific areas of opportunity based on the pain points they face.

RESEARCH & STRATEGY

Competitive Analysis

The competitive analysis provides strategic insights into the features, functions, flows, and feelings evoked by competitors' design solutions. To see what part of the experience was used when it came to budgeting only, I conducted research on the 2 popular personal finance platforms: Mint (left) and Emma (right).

Bar Graph for Visualization

Using the Bar Graphs is an effective way to show users' spending habits. Mint did a good job at enabling users to customize their budget while looking at the bar graph by using a slider.

Using Progress Bar and Pie Graph to show User's Budget and track the budget.

User can easily track their category-budget by paying attention to the progress bar's different colours. On the other hand, Emma used the pie chart to visualize the total budget.

IDEATION

User Flow

I categorized my user stories into epics (themes) and then identified the core epic that would best demonstrate the value proposition: Create a monthly budget based on actual spending habits.

I pulled some user stories within my core epics, which would become individual tasks for the user to complete. I arranged them into a task flow, thinking about the step by step process that a user might go through.

The task flow I chose was: Get the recommended monthly budget by requesting an estimated budget amount.

THE SOLUTION

Re-imagining how people plan and track their budget

Why is Donut different?

1. Using the user's spending habits to plan a budget.
2. Automated and quick process.
3. Visualization throughout the app to keep the user’s attention.
4. Simple and coherent

DESIGN

Rapid Sketching

DESIGN

Wireframing

Next, I translated all sketches to mid-fidelity wireframe using Figma. Many changes were made during development.

PROTOTYPE & TESTING

Usability Testing

I conducted 2 rounds of user testing, each round with 5 testers. After each round, I then synthesized the feedback as well as the observations I had made. I used this to determine areas that needed to be changed in order to improve the overall usability of the product.

ITERATION #1

Empty Home Page

Redesign the empty homepage to attract the users.

Add more details about the user's account to make it look more realistic, personalized.

Replace “Transaction” with “Spending” in the bottom nav bar

• Issue #1: The Home Page looks empty and did not attract the users.
  
  
• Issue #2: Testers didn't understand the transaction icon in the bottom navbar.

ITERATION #2

Suggested Budget

Add a caption for the recommended budget and remove the requested number.

Highlight the category budget amounts.

Replace old icons with brand-new, friendlier icons

• Issue #1: Testers didn't understand what $1225/ $1200 meant and the icons for each category budget were not friendly to the users.

ITERATION #3

Add New Category Budget

The vertical popup was replaced by a bigger horizontal popup to make it more accessible for users with fat fingers. 

• Issue #1: The vertical popup modal might be challenging for people with fat fingers

ITERATION #4

Home With Budget

Redesign the donut chart and category budgets to make them coherent and reduce distraction.

• Issue #1: Instead of showing a lot of info within the chart to make it complicated, I should only focus on the percentage of each category budget.
  
  
• Issue #2:  The percentage in the progress bar was not the priority for the users, they wanted to know how much left and how much they spent. 

DESIGN

Visual Design and Branding

After conducting usability tests to arrive at the latest version of Donut, I started thinking about the visual identity to create a high-fidelity product. The finance industry requires trust and dependability, so I decided to use a lighter tone of Azure and Blue as my two primary brand colours and the usage of SF Pro Display as the typography of choice to align with the system typeface of iOS.

Final Product

After all visual identity elements were ready, I began injecting these into the medium-fidelity wireframe to arrive at the high fidelity prototype. The high-fidelity prototype adhered to iOS system standards.

Open in InVision here

REFLECTIONS

Key Takeaways

• There must be better ideas than what I currently have.
  Instead of sticking with one single idea, I should always find more inspirations and sketch out every concept that comes into my mind.
  
  
• My problem is not the user's problem.
  This was my first challenge during User Research. The insights from the user interview did not align with my assumptions and I had to do another user interview. Although it was tough, I learned to consider problems from the user's perspective and focus on solutions the user would want to see.
  
  
• Test, test, and test
  Testing my prototype with users helped me realize that some screens and features were not apparent to the targeted users.

If I have more time

• Notification System:
  Create a notification system that notifies users about their spending, subscription payment, overspending alert, etc.
  
  
• Tracking the transactions:
  Due to time constraints, I could not spend enough time researching user spending habits to get more insights into how users track their expenses, especially those using cash. I want to think of a better tracking feature to help users manage their transactions.