04 · Personal Finance Self-initiated · Concept & Design

Budget.

A personal finance app I designed for myself — to see where the money actually goes, set monthly budgets that hold, and stay on track toward real savings goals. Money management made calm, clear and a little bit motivating.

Role
UI/UX Designer
Type
Personal Project
Platform
iOS · Android
Theme
Light & Dark
Project statement

Built to fix my own money habits.

I kept losing track of small daily spends and never knew if I was actually on budget until it was too late. Existing apps were either bloated with features I'd never touch or too rigid to match how I think about money.

So I designed Budget around three honest needs: understand where money goes, control it with category budgets and overspend alerts, and grow it through visible savings goals — all in a calm, dark-first interface that feels good to open every day.

Roles & Responsibility
Product & UX
Defined the problem from my own budgeting pain points
Information architecture & end-to-end user flows
Validated flows with friends who budget differently
UI & Design system
Dark-first hi-fi UI for every screen, plus a light theme
Reusable components: cards, rings, progress bars, nav
Tokenised color & type system for consistency
The challenge

Tracking money felt like a chore — so I'd stop doing it.

Problems
No clear pictureBalance, income and spending lived in different places — I never had one honest view of my month.
Budgets without guardrailsSetting a budget did nothing if nothing told me I was about to blow past it.
Tedious data entryLogging every expense across deep menus was friction enough to make me quit within a week.
Saving felt abstract"Save more" is not a goal. Without progress I couldn't tell, I had no reason to keep going.
Solutions
One glanceable homeTotal balance, income vs. expenses and live budget progress the moment you open the app.
Smart overspend alertsEach category shows % used with a clear warning when a budget is trending over.
One-tap addA persistent + button and quick income/expense actions make logging a two-second task.
Goals you can see fill upSavings goals with rings, milestones and auto-save turn "save more" into measurable progress.
Research · Personas

Designing for myself — then for people like me.

D
Divya
Designer · Age 28 · Dubai

Earns a steady salary, spends across many small categories and wants to save without feeling restricted.

Needs
  • See the whole month at a glance in seconds
  • Log a coffee or grocery run before she forgets
  • Know she's on track for her emergency & travel funds
Pain points
  • Abandons apps that take too long to enter data
  • Only notices overspending after the fact
A
Aarav
Early-career · Age 24

New to budgeting, intimidated by spreadsheets, wants gentle structure and quick wins.

Needs
  • Simple categories he can set up in minutes
  • Visual feedback that makes saving feel rewarding
  • A nudge before he runs out of his fun-money budget
Pain points
  • Finds most finance apps cold and overwhelming
  • Loses motivation when progress is invisible
Empathy map · Divya

What goes through your head on payday — and the day before.

Thinks

  • "Did I already spend my grocery budget this month?"
  • "Can I afford this without touching my savings?"
  • "Am I actually closer to my travel fund, or not?"

Sees

  • Bank apps that show transactions but no plan
  • Friends who seem to save effortlessly
  • Small daily spends that quietly add up

Does

  • Checks her balance far too often, with anxiety
  • Mentally tallies spending and usually under-counts
  • Promises to "be better next month"

Feels

  • Anxious when she doesn't know where she stands
  • Guilty after impulse spends she didn't track
  • Proud and in control when a goal bar fills up
User flow

From opening the app to logging a spend in two taps.

01
Open
Land on the dashboard — balance, income, expenses and budgets at a glance.
02
Add
Tap + to log an income or expense in seconds, no deep menus.
03
Categorize
Assign a category with its own budget & colour, or create a new one.
04
Track
Watch budget bars fill and get alerted before you overspend.
05
Save
Move what's left into goals and watch your funds grow.
Colors & typography

Calm dark surfaces, confident accents.

A deep near-black canvas keeps long sessions easy on the eyes and lets data lead. An indigo-to-violet gradient anchors the brand and primary actions, while green, red and amber carry universal money meaning — saved, spent and watch-out.

#6172FF
Primary · Indigo→Violet
#2FD27E
Positive · Income / saved
#FF5E6C
Negative · Expense
#FFB020
Warning · Overspend
#181C26
Surface · Card
#0D0F15
Canvas · Background
Hi-fi mobile app · Final designs

Every screen, redesigned.

Seven screens — home dashboard, spendings, categories, edit & add category, goals and savings — rebuilt with sharper hierarchy, generous spacing and a consistent component system.

Feature · Track & control

Know where you stand, instantly.

The home dashboard answers the only question that matters — "am I okay this month?" — before you scroll. Spendings breaks it down by day and category, and a friendly alert flags trouble early.

Dashboard, spendings breakdown and categories — the everyday loop of seeing, logging and organising money.

Glanceable balance

Total balance, income and expenses sit in one card up top — with a trend chip so context is never more than a glance away.

!

Overspend alerts

Each category tracks % of its budget used and warns you when spending trends over — before, not after.

+

Two-tap logging

A persistent add button plus quick income/expense shortcuts make recording a spend almost effortless.

Feature · Grow

Saving you can actually see.

Goals turn a vague intention into measurable progress — each with a ring, a target and a status. Auto-save quietly moves money on payday, and the savings hub shows every fund filling up.

Savings hub and goals — progress rings, milestones, auto-save and status tags keep momentum visible.

Behind the build

Problems I faced — and how I solved them.

Designing a finance app for myself meant being my own toughest user. A few decisions shaped the final product more than the rest.

01Information density

Too much data on one screen

Finance apps tempt you to show everything — balances, charts, transactions, budgets — and my first dashboard was an overwhelming wall of numbers.

Solved: a strict hierarchy — one hero balance card, then budgets, then recent activity — with generous spacing so each block can breathe.
02Visual design

Light mode looked flat and noisy

My original light screens leaned on hard borders and competing colours, which made the data feel cluttered and hard to scan.

Solved: rebuilt dark-first on a near-black canvas with soft cards and accent colour reserved for meaning — saved, spent, warning — then derived the light theme from it.
03Interaction

Logging had to be effortless

If adding an expense took more than a couple of taps, I knew I'd stop doing it — and an untracked budget is a useless one.

Solved: a always-present + button and one-tap income/expense actions on key screens, so capture is never more than two taps from anywhere.
04Motivation

Making saving feel rewarding

Numbers alone don't motivate. Without a sense of progress, goals get ignored and the saving habit never sticks.

Solved: progress rings, milestone amounts and "on track / needs attention" status tags turn every goal into visible, satisfying momentum.
05Design system

Keeping seven screens consistent

Cards, rings, progress bars and the nav repeat across every screen — and small inconsistencies quickly made the app feel unpolished.

Solved: a tokenised system of colour, type and reusable components so spacing, radii and states stay identical everywhere.
06Scope

Knowing what to leave out

It was tempting to add bill splitting, investments, multiple currencies — features that would have buried the core loop I actually needed.

Solved: ruthlessly scoped to track, budget and save. Everything else waits until the core habit is proven.