A judgment-free mobile app and responsive webpage that helps students and young adults track spending, set savings and budget goals, and build healthier and sustainable money habits, without the overwhelm of existing tools.
BFF (Budget-Friendly Finances) is a budgeting app designed for young adults and students ages 16–28. It helps users track spending by category, set savings goals, create spending budgets, and reflect on their financial habits — all in one place. A built-in Coach and Journal help students build healthier money habits that are sustainable for their future.
Teenagers and young adults lack a simple, judgment-free tool to track spending and set financial goals. Existing apps feel too complex and overwhelming, requiring too much setup before showing any value. This leads to financial avoidance and anxiety.
Design a mobile app and responsive webpage that feels approachable to users — letting them track spending, set savings and budget goals, and build better habits through a built-in Coach and Journal, without overwhelming them with complexity.
As Lead UX Designer & Researcher, I administered the full process: user research (surveys, interviews, usability testing), personas and journey maps, paper and digital wireframes, hi-fi mockups and interactive prototypes in Figma, and design iteration based on usability findings, before finally creating the final, fully functional and deployable, design.
I conducted interviews and surveys with young adults ages 18-24 to understand how they manage money, what tools they use, and what frustrates them. Most participants admitted to avoiding budgeting altogether because existing apps felt too detailed or complex for their relatively simple financial situations.
Initial assumption: students want detailed analytics and dashboards.
Reality: most just want to know "how much can I spend today?" — without complex setup or an ongoing tracking burden.
Students don't know where their money is going. Without a simple weekly view, overspending goes unnoticed until it's too late.
Existing apps require too much setup — linking accounts, creating categories — before showing any value at all.
Students saving for trips, textbooks, or emergencies have no easy way to track progress alongside everyday spending.
Financial stress leads to avoidance. Students want a non-judgmental space to reflect — not a dashboard highlighting failures.
"I know I should budget, but every app I try feels like more work than it's worth."
I started with hand-sketched paper prototypes to explore the core "how much can I spend today?" mental model quickly and cheaply — six screens sharing one bottom navigation. Once the flow felt right on paper, I translated it into a low-fidelity digital wireframe prototype in Figma: intentionally grayscale and low-commitment, but interactive enough to put in front of real users for the first round of usability testing.
I ran three rounds of moderated usability studies with college-age participants. Round 1 tested a low-fidelity prototype; Round 2 tested the high-fidelity mockup; Round 3 tested the high-fidelity prototype. Testing with real users, even informally, consistently surfaced issues that self-review missed entirely.
One participant, Kate (23), said "Goals" felt like it was only for savings — she expected to find her food budget there too.
A single list of savings goals with separate "Add money" and "Withdraw" buttons on every card — cluttered, and no place for budgets.
Split into clear Savings and Budgets sections, plus a "What's your goal?" type-picker when creating anything new.
Another participant, Marina (21), noted the orange/yellow "Tip" on the homepage and the "Welcome to Coach" on the coach page felt like a warning — not a helpful info card.
Warm orange/yellow info cards read as alerts, making users hesitant about a feature meant to feel supportive.
Switched to soft purple to signal "informational," shifting perception from "something is wrong" to "this is helpful."
Orange "Tip" and "Welcome to Coach!" boxes read as warnings.
Switching the "Tip" and "Welcome to Coach!" boxes to soft purple makes them feel calmer and friendlier, reading as helpful rather than a warning.
Color carries meaning beyond aesthetics...
A small shift from orange to purple meaningfully increased user confidence. See? Much more calming! This is where the psychology comes in.
The polished prototype, post-usability revisions — an approachable home dashboard, unified Goals page, a friendlier Coach, and a reflective Journal.
I adapted the core experience into a responsive web layout, reflowing the mobile navigation into a persistent sidebar and expanding the dashboard cards to make use of wider screens, while keeping the same information hierarchy and structure across breakpoints.
Text uses high-contrast dark on light backgrounds; the primary teal is tested against WCAG AA, and white-on-teal passes AA for the large text sizes used.
Budget warnings pair color with descriptive text ("80% used — 4 days left") so colorblind users aren't excluded from critical information.
Every icon is paired with a text label, and a "?" tooltip on "safe to spend" explains it in-context — no prior financial knowledge assumed.
Beyond baseline compliance, a dedicated Accessibility panel under Profile lets people tailor the app to their needs: Larger text bumps the base size to 18px, High contrast strengthens borders and text, Reduce motion minimizes animations, and Dark mode eases eye strain at night.
The redesigned Goals page addressed the single most critical point of confusion — in Round 2, participants immediately understood the Savings/Budgets distinction and created both goal types without guidance. The homepage budget cards gave users the at-a-glance awareness they said was missing.
Run a Round 3 study on the full hi-fi prototype, design a bank-account linking flow to power the "safe to spend" calculation, and prototype a more complete AI Coach with category-specific insights tied into the Journal.
The full set of Figma prototypes, from low-fidelity wireframes to the final high-fidelity mobile app prototype, and the responsive web adaptation:
Beyond the prototype, I coded a working version of BFF — create an account, log transactions, set budgets and goals, and journal, all running in the browser with no setup.