BudgetBridge
5 months
Senior UI/UX Designer
2 Designers, 3 Engineers
Project Overview
A smart personal finance app focusing on automated expense tracking, flexible budgeting, and behavioral savings goals.
Business Background
Most budgeting apps on the market felt like glorified spreadsheets. BudgetBridge aimed to capture the Gen Z / Millennial market by focusing on behavioral psychology rather than rigid accounting.
The Problem
Users found existing budgeting apps too rigid. If they overspent in one category, the app would show "Red" failing states, causing guilt and a 70% abandonment rate within the first month.
Objectives
- Increase user retention past day 30
- Simplify bank connection onboarding
- Gamify the savings experience
Success Metrics
- ↓ 50% onboarding drop-off
- ↑ 30% daily active users (DAU)
- ↑ 40% completion rate for short-term savings goals
The Challenge
Removing the guilt associated with budgeting while still providing accurate financial tracking.
Discovery & Research
Kickoff & Audit
Conducted a competitive audit of YNAB, Mint, and Cleo to understand their approaches to budgeting methodologies (Zero-based vs. Cash-flow).
Reviewed the current onboarding flow, which asked users to manually input 20 different budget categories before seeing any value.
Key Pain Points
- Manual transaction entry is tedious.
- Users feel defeated when a single unexpected expense "ruins" their monthly budget.
- Connecting a bank account feels risky without proper context.
Opportunities
- Implement "Flexible Budgets" that auto-rebalance if you overspend in one category.
- Use Lottie animations to celebrate small wins (e.g., staying under budget for coffee).
- Streamline onboarding to ask for only 3 primary categories to start.
Research Methodology
Diary studies over 2 weeks with 10 target users, plus in-depth emotional interviews.
Key Insights:
Personas & Journey
Jessica, 24, Graphic Designer
Young Professional
Goals
- • Save for a trip to Japan
- • Stop living paycheck to paycheck
Behaviors
Checks bank balance only when anxious. Responds well to positive reinforcement.
User Journey Shift
Before
Overspend -> Open App -> See Red Negative Numbers -> Feel Guilt -> Delete App.
After
Overspend -> Open App -> See "Rebalance" prompt -> Move funds from another category -> Feel in control -> Continue tracking.
Design Execution
UI Exploration
Typography: Circular Std for a friendly, approachable, and highly readable look.
Colors: Moved away from traditional Red/Green. Used a vibrant, calming palette of Teal, Peach, and Soft Yellow. Overspending triggers a neutral Grey/Orange state instead of Red.
Design System Components
Final Design Execution
A high-fidelity look at the final polished interfaces, components, and key interactions that were successfully handed off to engineering.
Final Outcome & Impact
BudgetBridge successfully gamified personal finance, turning a high-anxiety task into an engaging, guilt-free daily habit.
Key Learnings
- •Designing around the limitations and latency of third-party banking APIs (Plaid).
Future Improvements
- •Add shared budgets for couples.