Budgeting App Design

Client: Google UX Design Certificate

Year: 2024

Role: UX Designer

Duration: ~1 Month

Relevant links: Prototype, Figma Design Files

Summary: I designed a budgeting app as part of the Google UX Design Certificate program, featuring smart spending limits, adaptive budgeting, and luxury spending notifications to help users effortlessly manage their finances and achieve their savings goals.

Alex, the Young Professional

Design

Calculating spending limits based on upcoming purchases

Nudging the user to cut down on luxury purchases

Paper Wireframes to Low-Fi Prototype

Usability Study Findings and Adjustments

Design system

Color Scheme

Icons

Flow 1: Onboarding Process

Flow 2: Marking a Transaction or Vendor as a Luxury

Flow 3: Overspending at the End of Each Month

Conclusion

Goal of the Project

As part of the Google UX Design Certificate, I was tasked to design an app based on several prompts that were presented to me. Due to a personal connection to budgeting and having seen friends struggle with it in the past, I chose:

"Help friend or family groups manage a household budget and save up for a common goal"

Research

After conducting competitive research on how alternatives such as Monzo and Revolut are solving this problem, I decided to lead a total of 10 customer interviews with a diverse group of participants to find out more about how and if the current budgeting process worked for them. My criteria were:

Age range: 18-62
Individuals who need to manage finances carefully and do not have a high disposable income
Individuals who have previously managed or currently manage a shared budget with others
Diverse demographics in terms of gender, occupation, and location (urban, suburban, rural)
Individuals with varying levels of financial literacy and tech-savviness

I asked a wide range of questions to understand their current budgeting and saving processes, the tools they use, and their frustrations and then summarised my findings in two main customer personas seen below.

Hans, the Retiree

“I like to spend freely and verify everything myself. I trust traditional methods over online banking.”

Goals:

Feel free to spend money without early-month restrictions.
Find deals for larger purchases

Frustrations

Frequent need to log into bank account
Skeptical about online banking and prefers manual verification.

Alex, the Young Professional

“Each month is different which is why the existing solutions are useless.”

Goals:

Avoid spending money on unnecessary things
Save more to one day purchase a flat
Predict future expenses based on planned activities

Frustrations

Can’t plan as historical analysis is not reliable
Putting smaller items on Splitwise feels bad
Spending feels random and unpredictable

As can be seen, Hans isn't the ideal candidate as he is skeptical about online banking and doesn't feel the need for budgeting at all. In contrast, Alex is an ideal candidate for our app as they have experience with using budgeting apps and provide real feedback on what they want from a new solution. In total, the interviews left me with the following insights:

Most retirees aren't interested in budgeting and prefer to spend freely. As such, they aren't a good target group for a budgeting app
Young professionals are the main target group
People don't save with friends or family but instead use joint bank accounts or apps like Splitwise; they prefer to budget individually
People find it hard to budget due to varying expenses each month
People continue to spend on luxury items they want to cut back on and need nudges to remind them.

Hence, I had two main problems to solve: (1) account for the fact that not every month is the same, and (2) nudge people to stick to their budget and not spend on unnecessary, impulsive stuff. At the same time, my app needed to be able to work across multiple bank accounts and credit cards and have a minimalistic UX without too many features, avoiding decision fatigue.

Design

I started the design process by coming up with viable solutions to these two problems and sketching a possible user flow. My app should include two main features to address the mentioned problems respectively: calculating spending limits based on planned purchases and nudging the user to cut down on luxury purchases.

Calculating spending limits based on upcoming purchases

My idea to account for differing monthly spending was to allow users to input their upcoming purchases at the beginning of each month. For example, if I am planning a trip to Bulgaria next month, I will input this in a form, and the app will take that into account and lower my going-out budget to accommodate it. This way, the app calculates the next month's limits based on the user's planned expenses, ensuring a more accurate and flexible budgeting experience.

Nudging the user to cut down on luxury purchases

To solve the impulsive purchase problem, I wanted to include a dynamic "luxury" spending category that was always set to 0. Users would be able to classify vendors or transactions as luxury items and receive frequent push notifications nudging them to spend less on these. At the end of each month, the user would get a summary showing how much they could have saved if they hadn't indulged themselves as much.

For example, if I classified Baskin Robbins as a luxury, every time I bought one of their products, I would get a push notification saying something like, "Not serious about your saving goals?" My interviews showed that users needed this kind of strict parent alternative and found the negative nudge extremely helpful.

Paper Wireframes to Low-Fi Prototype

I created paper wireframes to visualize and iterate on the app's layout and user flow. These initial sketches helped me quickly explore different design options and gather early feedback.

Next, I transitioned these paper wireframes into low-fidelity prototypes using Figma. This low-fidelity prototype allowed me to conduct user interviews and verify the usefulness of the features and the overall UX design.

Usability Study Findings and Adjustments

With the low-fi prototype, I conducted three rounds of usability studies. After each round, I adjusted the prototype and tested it again.

Findings from Round One:

Inconsistent and negative language (i.e. unnecessary)
Too many explainer pages
It's not clear how to access the "all transactions" page

Findings from Round Two:

The luxury spending feature is not clearly explained
The upcoming expense feature is a good idea but should be more

Particularly interesting was the feedback regarding the upcoming expense feature. Users didn't want to manually input their upcoming expenses but still wanted to account for varying monthly spending.

Based on this insight, I decided to scrap this feature. Instead, I wanted to ask the user how they want to account for a month of overspending after it had already happened. Users could choose to lower their savings goal or adjust for the overspent category in the following month.

For example, if I spent $200 too much on shopping due to my trip to Bulgaria, I could either reduce my savings target or cut back on shopping the next month to compensate. This approach was well received, and I decided to keep this iteration.

Design system

I explored several design systems and ultimately decided on Material 3 for its comprehensive guidelines and modern design principles. I used the recommended font, Roboto, for its readability and clean aesthetics.

Color Scheme

I decided to use the Material 3 theme builder plugin to develop a color scheme that adheres to the 60-30-10 rule. I chose a shade of blue as the primary color due to its accessibility for color-blind users and its association with trust in many cultures.

Icons

I picked the five icons from material 3 that most intuitively represented the spending categories.

Flow 1: Onboarding Process

I designed the onboarding process to be simple and intuitive, ensuring that users quickly understand the app’s main features and connect their first bank account.

The screens explain what our system does and why you should use it. They cover the two main features: smart spending limits and luxury nudges. Additionally, they explain the importance of connecting your bank account and the safety measures in place to protect your transaction data.

I ensured that connecting to a bank is a straightforward process, guided step-by-step to ensure ease of use. This approach helps users seamlessly integrate their financial data and start benefiting from the app's budgeting features right away.

Flow 2: Marking a Transaction or Vendor as a Luxury

I wanted to design this process to be as uncomplicated as possible. As such, I intentionally decided against a generic adjustable category—these should be automatically and accurately computed by our system's backend. Instead, the only choice the user makes is whether a transaction or vendor is classified as a luxury or if it should be included in the spending limits and analysis at all.

The process to mark a transaction or vendor as a luxury is straightforward and reversible with minimal clicks. A brief explainer page, shown the first time the user uses this feature, recaps what the feature is about. The luxury budget is always set to 0, and the idea is that if a user does spend on these categories, they'll receive push notifications nudging them to spend less. At the end of the month, users receive summaries showing how much they could have saved if they hadn't spent on luxury items, providing an extra nudge to help them stay on track.

Flow 3: Overspending at the End of Each Month

The usability studies concluded that the manual upcoming expenses feature was not suitable for a good user experience. Instead, as explained above, the user receives a notification at the end of the month if they exceed their spending limit. They are then asked how they want to handle this to get back on track.

The screen clearly shows how much their savings dropped and explains the two choices they have. They can either absorb the cost with their savings or adjust their future spending limits to make up for it in the next month or two.

If the user decides to adjust their limits, a screen is shown with the new smart limits that reflect these changes. For example, the Eating Out limit is lowered by $100 and the Shopping limit by $50. By doing this, the user restores their savings to the original $2000.

Lastly, the user can see their spending trends by month in the trends screen, providing a comprehensive view of their financial behavior over time.

The key insight behind this feature is that not every month is the same; spending limits are averages across the year, which unfortunately is not accounted for by current apps. For example, my average Shopping limit might be $300, but I might spend nothing in February and March, and then spend more in January due to end-of-year discounts or holidays. Spending limits should reflect this variability, rather than making users feel bad for overspending in January and great in February and March.

Conclusion

The last usability study I conducted concluded that almost all users preferred the current design to the existing alternatives in the market. However, the app still lacks several crucial features before going to production. For instance, I haven't designed the Help screen and left the Trends screen static, as both of these are fairly generic and can be adapted from alternatives such as Monzo.

This was my first UX design project, and I thoroughly enjoyed the entire process, from learning Figma to sketching wireframes and leading usability studies. I would recommend learning the basics of UX design to every engineer.

Page updated

Google Sites

Report abuse