Budget Buddy 💸
An intuitive budgeting app that helps users improve their spending habits.
PROBLEM STATEMENT
Balancing a budget and saving for the future can be one of the most difficult skills to learn when transitioning from young adulthood to adulthood.
Young, 20-something novice budgeters need and want to learn how to save their money for future large expenditures. Many of these budgeters feel intimidated or overwhelmed by most financial management apps and websites.
CHALLENGE
Create a budgeting app catered toward these young, novice budgeters that is: simple, intuitive, friendly, and insightful.
ROLE
Product Designer, Brand Strategist
Discovery
GOALS | High Level
1. Since my target users are 20 -29 yr old novice budgeters, I want to find out what pain points they experience with other budgeting apps and websites.
What do these users need and want from a budgeting app?
2. Find out what users like and dislike about popular budgeting apps and websites on the market such as Mint, YNAB, GoodBudget, etc...
3. Discover what makes a budgeting dashboard "intimidating." Innovate ways to prevent or eliminate this feeling from Budget Buddy's user experience.
ASSUMPTIONS | To Explore
1. Users who have limited knowledge about finance will prefer a simpler UI over a complex one (with extra features, info, and jargon they don't understand).
2. 20 -29 yr old users would prefer an app to a website to manage their budget so they can check their finances on the go.
3. Users will appreciate tips and insights on how to save money for the future.
User Interviews 🗣️
I conducted a series of interviews with 6 novice budgeters in their early-to-mid 20s to get a better sense of their thoughts and experiences related to financial management.
Below are some nuggets of wisdom and insights I gained from each interview.
"Whenever I buy stuff from Amazon, I think, "I need this," but I don't really need it, you know? The other day I bought a foam roller. I don't need a foam roller."
— Connor M. (25 yrs old)
"I generally manage my finances by opening my bank account and
then being sad."
— Margot S. (24 yrs old)
"I would want to get better at saving up for bigger things like vacations or nice furniture, things like that. But honestly, I don't like thinking about money too much. It gives me a headache."
— Dakota L. (26 yrs old)
"People making so much money tell you it will all be fine, when there are no guarantees. It’s like every decision matters and also nothing matters at all..."
— Maddie G. (25 yrs old)
"I've never managed a budget before.
I think I'd rather use a spreadsheet instead of an app...I guess using an app makes me kinda nervous. I wouldn't want to yell at me about my rent or give me more anxiety than I already have."
— Oskar L. (21 yrs old)
"It's hard figuring out how to save for what without regrets due to the ever impending end of the earth as a result
of climate change and the late-stage capitalistic hellscape."
— Rebecca W. (23 yrs old)
Persona Analysis 👩💻
After conducting my interviews, I created a user, Mary, to help personify my target base. Thinking of Mary helped me empathize and ideate throughout the discovery and design phases.
Mary has a ~50k salary and loves shopping for makeup and clothes. Unfortunately, she's had trouble saving up for a vacation.
Mary isn't "financially savvy" and feels intimidated by budgeting apps/sites that use terms like amortization, FICO score, and collateral. That being said, a simple excel sheet isn't cutting it anymore...
Competitor Analysis 🔍
I knew it would be important to conduct a competitor analysis on popular budgeting apps currently on the market. It was a great way to see which features, designs, and data visualization were common as well as where there was a gap in the market.
Discovery
Results
1 . GOAL Discoveries
I discovered from my research that users do not want to spend too much time thinking about or agonizing over their finances. The less they have to worry about, the better.
They also want to learn more about finance: specifically about saving for large expenditures and building credit. Finally, users are often discouraged by being "in the red."
2 / ASSUMPTION Discoveries
Many of my assumptions turned out to be true, or at least, half true. It seems that 20 -29 yr old users DO prefer simple and intuitive UI as well as an app format. While users WANT to become better spenders, they feel it is unlikely they would specifically seek out insights/tip within the app to learn more about finance.
3 / MVP Plan for Initial Design
3 Pages and a Design System
-
Main Dashboard
-
Secondary Dashboard
-
Insights Page
-
Logo and Design System
Design
Ideation notes and sketches
Taking what I had learned from my interviews, persona analysis, and competitive/market research, I created concept sketches for the 3 mobile screens I would design.
I also wrote additional notes about which features each screen would need as well as how I wanted Mary to feel as she went through the user flow.
Mary's User Flow for moving through the 3 different screens.
Accessibility
I wanted make sure that accessibility would be considered from the very first step of the design process. I decided data visualizations should be colorblind-friendly (or easily changed to be colorblind-friendly) for Mary's friend, Mario.
I checked the visual accessibility of my designs later on by viewing them in grayscale and allotting whitespace for optional labels.
Design Objectives 📋
After completing sketches and notes, I made several decisions about the overall look and feel of the budget buddy app that I wanted to keep in mind while wireframing and prototyping:
-
A lot of useful information should be visible on the dashboard page without needing to scroll.
-
That being said, the overall look should be clean, modern, easy to understand, and uncluttered.
-
-
The secondary food dashboard should have a similar (if not the same) layout with the main dashboard to maintain cohesion.
-
Specific insights should be available on almost every page. By spreading them out, the user is more likely to take them in organically and absorb the information.
-
Budget buddy should come across to its users as intuitive, friendly, and trustworthy.
-
The UX and UI should produce feelings of calm, delight, and joyful learning.
Main Dashboard Design
Looking through the various iterations of Budget Buddy's main dashboard design, you can see the progression from ideation sketch to final prototype. Throughout each iteration, I kept in mind my research from the discovery phase as well as my design decisions.
Budget Bar UI
I explored many different designs for the budget bar. In the end, I selected the most minimal and easy-to-read design. While some designs may have been more visually interesting and "unique," I did not want to sacrifice readability and information hierarchy for style or visual interest.
I also had to take into account that the user would look at several budget bars together when the accordion menu was open. Choices like having a gradient color, marker at the end of the bar, and drop shadow might be interesting to look at when there is just one bar. But when looking at multiple bars together, these stylistic touches could feel cluttered and increase the user's cognitive load. I wanted my users to be able to gauge their financial condition at a glance.
It was also important to design how the budget bar would look in 2 circumstances:
A. When the user is approaching the limit of their budget.
B. When the user has spent their full budget or overspent their allotted budget.
Most budgeting apps and websites I researched used red and "!" icons to indicate that a user was approaching their limit or had already overspent. I ended up deciding not to use this red/emergency method in my design. This type of design is meant to induce panic and maybe even guilt in its' users. I took into account that my target users were novice budgeters who felt intimidated or confused by other budgeting options on the market.
Instead of going red, I opted for a simple bolded message with an exclamation point. This way, users' eyes are drawn to the text but not bombarded by automatic feelings of guilt and panic. This design decision was also colorblind friendly; the warnings would register the same for both Mary and Mario.
Annotated Designs 📝
Below are my final annotated designs detailing all of the elements and their reasoning/functions on each page.
My overarching goal was for navigation and usage to be as simple and intuitive as possible. After all, the app is meant to be for a young, novice budgeter.
Dark mode UI.
Style Guides ✨
I knew budget buddy’s style guide would need many colors for all the different data visualizations; I made sure to keep the colors analogous so there would be a strong sense of theme and cohesion.
I went with mostly shades of blue and green that were pleasing to the eye.
Some positive connotations of blue/green include: finance, intelligence, calmness, nature, and trustworthiness.
For the typeface, I decided on Poppins. It has an open and friendly feel that is modern and professional at the same time. It is also highly readable.
I did not choose a secondary typeface since I didn't think it was needed; Poppins had a wide range of font styles that could cover Budget Buddy's textual needs.
Logo and Branding ❇️
While designing the logo, I wanted to keep the sense of friendliness and minimalism I had created in the UI. For this reason, I utilized the most prominent and soothing colors I had already selected and decided to keep the “b”s in “budget buddy” lower case.
I created 2 rounded shapes to represent the “b” alliteration of the app name, then added a small star to give a sense of delight and balance the composition of the logo.
My initial logo design only used the 2 primary blues from my style guide but ended up resembling the PayPal logo too closely. Looking back, I actually prefer the gradient because it makes Budget Buddy feel more youthful and friendly.
Reflection 🪞
I learned a lot throughout this project about balancing 2 opposing goals in dashboard design: making the layout feel clean and un-overwhelming VS. fitting as much important information as you can into a finite space. When it comes to good data visualization, both of these goals must be fulfilled for maximum usability.
