oluwatobi oyinloye
Back to all work

Smart Budget, Happy Wallet:A Budgeting App for New Grads

The goal of this project was to create a financial savings app for young adults. As a team of four, we interviewed students and early-career adults about how they manage money, then each designed our own app from the shared research. Mine is Smart Budget, Happy Wallet, a mobile budgeting app that replaces the manual spreadsheet with flexible, easy-to-read budgets and savings goals.

Group research, individual design. DS280 (Spark! UX/UI Design) final project, Boston University.

Built with

Design and prototype
Figma
Research boards
FigJam
Research methods
Contextual interviews and thematic analysis
Testing
Three rounds of usability testing

Problem Context

Young adults are expected to manage rent, loans and savings for the first time - often on a low starting income. Most budgeting tools, though, assume you already have a system and already understand the basics.

Based on our interviews (see more below), the people who wanted a budget most were relying on a banking app and a spreadsheet they kept forgetting to update. So our brief was clear: design a savings and budgeting app that fits how young adults actually think about money.

Design questionHow might we help young adults build a budget they'll actually keep up with?

Design Process

As a team of fourOn my own
  1. 01Contextual interviews

    Our team of four interviewed students and early-career adults about their budgeting habits, tools and frustrations.

  2. 02Thematic analysis

    We affinity mapped the transcripts together into 8 recurring themes, from spending habits to financial skills.

  3. 03Persona and journey map

    I turned the shared findings into a primary persona, Teaching Toby, and mapped his four-stage journey toward a stable budget.

  4. 04Wireframing

    I wireframed my own user flow, from onboarding through daily budget management, then built it out in Figma.

  5. 05Usability testing

    My high-fidelity prototype went through three rounds of testing, each with a new participant.

User Interviews

We ran contextual interviews and kept hearing the same gap: people understood, in general terms that they should be budgeting but the tools they had didn't match the way they thought about money.

"Very time consuming."
On a manual Google Sheet she'd nicknamed "Aspire"
"Very inflexible with categories."
On Mint's automatic savings
"Limited knowledge and topic is intimidating."
On where to even start

One answer summed up the risk we were designing against:

"Very interested, but know I'll give up about a couple days in."

Through this, we learnt that a budgeting app doesn't fail because people don't want to budget, but fails when it's harder to keep up than the spreadsheet it was meant to replace.

Research Synthesis

Affinity mappingWriting every observation on its own note, then grouping the notes until themes appear.

As a team, we affinity mapped every transcript into eight themes, keeping participants' own words where we had them.

Spending habits
Most people checked their banking app often and kept a rough mental tally, rather than a formal log.Checks banking account often
Frustrations
One person tried Excel, then a notes app, gave up on both and now just looks at the banking app.It was inconvenient because it was hard to use it on mobile
Goals
Retirement funds and paying down student loans came up again and again as the long-term target.
Methods
Tools people used were either automatic and rigid, or flexible and exhausting.Very inflexible with categories
Financial skills
Day-to-day money was manageable while taxes and investing were not.Don't have a thorough in depth understanding
Likes
Automation saves time while spreadsheets give control - people wanted both features.Offered a lot of control and flexibility
Accessibility
How easily a tool fits into an existing routine, on a phone, mattered as much as its features.
Obstacles
Irregular income and limited spare time made it hard to stick with any one method.

User Persona

Based on our interviews and research, we devised a persona, Teaching Toby, to represent the young adults we were designing for.

budget

Teaching Toby

Age
21
Work
Student, incoming teacher
Lives in
Boston, MA
Studying
Bachelor's in Education
Home
Lives alone, has a dog

Toby is about to graduate. As a new teacher he knows money will be tight, so he wants to learn to budget now and feel secure when his job starts in the fall.

"I'm ready to take charge of my finances, and be responsible after I graduate from college."

Habits

  • Mostly organised, a bit of a procrastinator
  • Forgets things he doesn't write down
  • Watchful, not an impulsive spender

Goals

  • Start a real retirement fund
  • Cover rent, groceries, gas and utilities without worry
  • Money left for hobbies and an emergency fund

Pain points

  • A low starting income
  • Hard to keep budgeting after the first month
  • Limited knowledge of topics like taxes
  • Pays for his own teaching materials

User Journey Map

Toby is graduating and needs to rent an apartment, so he has to save enough each month to pay rent on time. This journey map shows how that feels, stage by stage.

ExcitedResearchA little concernedSetting a budgetOverwhelmedComparingSatisfied and hopefulFuture
I wonder how the living and rent situation in Boston is money wise?

Looks at his finances, researches Boston rent and browses apartment sites.

The cost of living here is kind of high so I need to make sure I'm able to effectively budget.

Adds up his necessities, picks a rent amount and checks his bank app.

There must be a quicker and more efficient way for me to analyze my finances.

Weighs apartments, stretches his Excel sheet and reads app store reviews.

This application is much more convenient and easy to use!

Plans what's left, sets monthly reminders and sets up a budgeting tool.

Design Opportunities

Journey mapA timeline of one person's experience, showing what they do, think and feel at each stage. The low points are where design can help most.

Each dip in Toby's journey map pointed to something the app should do.

  1. Recommend how much to spend in each category.
  2. Break a budget into specific dollar targets and compare them to those recommendations.
  3. Explain financial offers and payment plans in plain language.
  4. Let people test a rent amount and see what's left over.
  5. Give short how-tos for taxes and investing.
  6. Show visual progress, so finances read at a glance.

Wireframes

My user flow and wireframes, from onboarding through daily budget management - drag or zoom to explore.

High-Fidelity Designs

Each screen was built to answer something we heard in interviews.

Onboarding screen

Getting startedA simple welcome with one clear next step: log in or create an account.

Home screen

HomeTotal balance, income and expenses up top, with recent transactions below.

Budget screen

BudgetsEach goal with progress bars.

Interactive Prototype

Click through onboarding and log in with any input, then use the bottom navigation to reach the Budget tab, where three budgets track progress against their targets.

If it doesn't load, open it in Figma.

Usability Testing

Each round put a new participant through the full flow and asked them to think aloud. Every round surfaced at least one point of friction, such as unclear icons, an ambiguous next step or a screen that buried the number people cared about, all taken into consideration and redesigned before the next round.

Participants completed three tasks: open an account and connect a bank, compare apartments by rent, and make a visualisation of their spending. After each task, they rated how difficult it was from 1 to 10, where 1 is very easy and 10 is very difficult.

Round 119, college student

  1. Open an account and connect a bankDifficulty 1/10

    Navigated through this part with ease.

    I realise I can use one of these so I can just use Google to connect my account.
  2. Compare apartments by rentDifficulty 3/10

    Chose "Housing" first instead of the Comparison tool, and needed the task clarified.

    So I click housing.
  3. Visualise spendingDifficulty 2/10

    Started from the Transaction icon.

    Oh nice, I can convert that into a widget.

Liked

Minimal, concise and straight to the point, with no in-app purchases.

Disliked

The navigation, and the interface might be a bit too minimalistic.

What the rounds had in common

  • Participants were a bit confused at first on the apartment task, and chose "Housing" instead of the Comparison tool.
  • Participants were sometimes unable to navigate back to the home screen or certain pages.
  • Some participants would have preferred other ways of showing results in the budgeting tool.

The one issue that stayed open at hand-off was that testers sometimes lost track of how to get back to the home screen from deeper in the app. I've flagged it here, since knowing what's still unresolved is part of an honest usability process.

Key Takeaways

People need a budgeting tool that fits their routine and doesn't punish them for forgetting, rather than being convinced to budget.

Letting the research lead made the design decisions easier, and testing showed where my first ideas still weren't clear enough.

Next project
The Curio Files