Overview
TRUE BUDGET is a smart budgeting mobile application that empowers users to manage their personal finances, track income and expenses, set financial goals, and receive financial advice. The design focuses on making finance management simple, visual, and collaborative for users of all income levels and ages.
What and How I Did It
I followed a user-centered design process that included:
- User research (interviews and surveys)
- Problem identification
- Persona creation
- User journey mapping
- Information architecture
- Wireframing and mockups
- UI design system development
Tools used: Figma, Pen & Paper, chatGPT, Adobe Illustrator and photoshop.
Problem Statement
Managing personal finances can be overwhelming, especially for young adults or students. Most budget apps are either too complex or too minimal, lacking visual clarity, personalization, or educational support.
Solution
TRUE BUDGET addresses these challenges by offering:
- Visual financial dashboards
- Income/expense tracking with receipts
- Goal setting & category-based insights
- Educational financial content (blogs, videos, podcasts)
- Peer-to-peer interactions (split bills, recent payers)
Design Process
Discover
- Studied existing financial tools (Mint, YNAB, Spendee)
- Conducted informal interviews with students and freelancers
Empathize
- Identified pain points around budgeting anxiety, lack of financial knowledge, and poor categorization
Define
- Defined core features needed: visual clarity, goal setting, advice, community-based interaction
Ideate
- Sketched various layouts, user flows, and possible modules
Prototype
- Created low-fidelity mockups (paper sketches) and mid-fidelity wireframes
Test
- Peer feedback and UI walkthroughs helped refine visual hierarchy and features
User Journey Map
| Stage | Task/Goal | Emotion | Touchpoints | Opportunities |
|---|---|---|---|---|
| Awareness | Wants to budget better | Confused | App Store, Social Media | Clear intro / onboarding |
| Onboarding | Adds income & expenses | Curious | App screens | Intuitive entry forms |
| Engagement | Explores financial insights | Empowered | Dashboard, Pie Chart | Simplified visualization |
| Learning | Watches financial videos | Confident | Advice Tab | Bite-size learning content |
| Growth | Sets savings goals & tracks them | Motivated | Goal Tracker | Gamify savings progress |
User Personas
Information Architecture
As illustrated in the IA diagram, the app is structured into four core tabs:
- Home
- Insights
- Goals
- Wallet
Each tab contains submodules like Recent Payers, Financial Advice, Spending Categories, To-do lists, and more.
Low-Fidelity Mockups
These paper sketches helped me iterate quickly and test layouts before moving into high-fidelity UI design.
Colors
| Color | Usage | Hex |
|---|---|---|
| Primary Green | Text | #1F8466 |
| Vivid Orange | Button | #FF9800 |
Components
TRUE BUDGET’s design system includes:
- Buttons (Primary, Secondary, Ghost)
- Inputs (With label, error, attachment)
- Cards (Balance, Advice, Payee)
- Charts (Pie, Bar, Line)
some of the Final UI & Models
