Donut Budgeting App
helps users create a monthly budget based on their spending habits.
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.
TECH AND TOOLS
Solo Product Designer
Canadian millennials and GenZs have been struggling with their debts and day-to-day financial management due to overspending on non-essential shoppings
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.
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
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.
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?”
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.
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
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.
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.
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
PROTOTYPE & 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.
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
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
Add New Category Budget
The vertical popup was replaced by a bigger horizontal popup to make it more accessible for users with fat fingers.
Home With Budget
Redesign the donut chart and category budgets to make them coherent and reduce distraction.
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.
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
If I have more time