The problem with
personal finance apps
Most people don't lack the desire to manage money better — they lack tools that make it feel possible. Existing finance apps are either too simple (just a list of transactions) or overwhelmingly complex (built for accountants, not everyday users). The result? People open the app once, get confused, and never return.
ET was conceived as a personal budget and expense tracking web app designed specifically for busy individuals who want to understand their finances at a glance — without needing a finance degree to operate it.
"People don't fail at budgeting because they're irresponsible. They fail because their tools don't match the way they actually think about money."
— Core design premiseWho is really struggling
with their money?
Before drawing a single wireframe, I spent the first two weeks entirely in research mode. I conducted 6 in-depth user interviews, a competitive analysis of 5 leading finance apps, and a survey of 40 respondents to understand not just what people do with money apps, but why they stop using them.
The #1 reason people stopped using finance apps wasn't the lack of features — it was the anxiety of not knowing where they stood. Users wanted to feel informed, not interrogated. They wanted clarity, not completeness.
Adam's frustration boiled down to three core needs: understanding where his money goes, setting realistic saving goals, and being nudged — not shamed when he overspends.
Framing the right
design questions
With research synthesised into affinity maps and journey maps, I identified three core problem spaces and translated these into "How Might We" statements to open up the solution space without pre-supposing answers.
Pain points identified:
- Invisible spending — no real-time sense of how much is left in each category
- Tedious entry — manually adding every transaction feels like a chore
- No emotional feedback — apps show numbers, not meaning or progress
- Goal disconnection — savings goals feel detached from daily spending decisions
- Fragmented views — income, expenses and savings live in separate screens with no narrative
How Might We questions:
"Design for the feeling of control, not the illusion of it. Users should close the app feeling better informed, not more stressed."
— Design principle established at this stageFrom fuzzy ideas to
deliberate decisions
I followed a double-diamond process — diverging wide with ideas before converging on the most impactful solutions. The first pass produced over 40 rough sketches across 3 rounds of ideation. I used dot-voting with 2 stakeholders to narrow to the top 8 concepts before moving to wireframes.
| Decision | Rationale | Tested? |
|---|---|---|
| Persistent sidebar nav (not bottom bar) | Research showed users wanted quick access to Finance and Expenses without losing their place on Dashboard | Yes |
| Donut chart for income overview | Proportional view of salary vs cash-in-hand vs last month's balance is immediately readable vs tables | Yes |
| Colour-coded budget progress bars | Multi-segment bars (spent / overrun / remaining) let users see budget health in under 2 seconds | Yes |
| Category icon picker in modals | Reduced text input friction — tapping an icon is 3× faster than typing a category name | Yes |
| Sub-category support under Bills | Users with multiple bills needed granular tracking without cluttering top-level nav | Planned |
| Savings goals with due dates | Time-bound goals dramatically improve completion rates — transforms aspiration into a concrete deadline | Yes |
What ET actually
looks like
ET was designed around three core screens — each serving a distinct mental model in the user's financial life. Every element on every screen earns its place by answering a specific user need uncovered in research.
Goal: Give users a complete financial snapshot in under 10 seconds — without needing to tap into any sub-screen.
- Donut chart (Finance Overview) — Shows income composition (Salary, Cash in Hand, Last Month Balance) as proportional segments. Users instantly see where their money comes from, not just how much there is.
- 4 stat cards — Total Balance, Budget, Expenses, Total Savings surface side by side for instant comparison. No navigating away to find out if you're overspending.
- Expense vs Earnings bar chart — A 5-month trend turns invisible spending patterns into a visible story. Users can spot "July was bad" without running a report.
- Budget Progress Tracker — Multi-segment colour bars per category (Groceries, Utilities, Leisure) give immediate spending health at a glance. Red means overrun, no colour means safe.
- Saving Goals with progress bars — Travel and Health Care goals with % completion stay front and centre on the primary screen, keeping motivation alive daily.
- Recent Transactions — The last 3 transactions give immediate context on what just happened to the user's money — the most common "quick check" behaviour from research.
Goal: Let users manage income sources and budgeting categories in one place — with clear controls for editing, adding, and deleting — without anxiety.
- Monthly Income panel with $6898 total badge — The green total badge gives an immediate positive signal. Each income line (Salary, Cash In Hand, Last Month Balance) is individually editable — respecting that income isn't always just one source.
- Budget donut ($3843 Available) — A half-filled ring showing Expenses vs Available immediately answers "how much do I have left?" — the most anxious question users had in interviews.
- 4 budget stat cards — Monthly Budget, Available, Total Expense, Total Savings with percentage deltas give a CFO-level summary without requiring financial literacy.
- Budgeting Categories grid — 8 categories (Groceries, Rent, Phone, Electricity, Food, Transport, Shopping, Entertainment) each with circular progress rings showing $spent / $budget. The ring format was preferred 4:1 over bar charts in A/B testing for this dense grid layout.
- Savings Budget panel — Travel, Health Care, and Apple Vision Pro each have due dates alongside the target amount. The due date was the key addition from Round 1 testing — it transforms vague saving into a countdown.
Goal: Give users a full, filterable view of where money went — with a category breakdown that makes overspending visible, not shameful.
- Monthly / Quarterly / Yearly toggle — Users can zoom in on a bad month or zoom out to see a quarterly pattern. This was the single most-requested feature from the survey — "I want to know if I always overspend in December."
- Expense vs Earnings bar chart (9 months) — Longer time range than Dashboard. Surfaces longer-term patterns — great for spotting seasonal spikes or consistent overspend months.
- Category Expense donut ($2408) — Bills, Food, Transport, Shopping, Savings, Entertainment broken into a multicolour donut. The visual weight of each slice is proportional to spend — making the biggest cost immediately obvious without reading numbers.
- Recent Transactions grid (3 columns) — Dense but scannable 9-item paginated grid with category icons. Icon-first design means users identify transaction types faster than reading text labels.
- Savings Transaction panel — Kept visually distinct with its own header. Separates savings activity from regular spending — reinforcing that saving is a positive action, not just another expense line.
The "Add Expense" modal was designed with a category icon grid rather than a text dropdown — because in usability testing, users tapped a visual icon in 1.8 seconds on average vs 5.4 seconds to select from a typed dropdown. Visual pattern recognition beats text scanning for a task performed multiple times a day.
Did it actually work
for real people?
I ran two rounds of usability testing with the high-fidelity Figma prototype — a moderated session with 5 participants (Round 1) and an unmoderated remote test with 8 participants (Round 2) after applying fixes.
What I learned &
what comes next
Every project teaches you something you couldn't have read in a textbook. ET reinforced a principle I now apply to everything: the interface is only as good as the emotional state it creates. Users don't remember features — they remember how using the product made them feel.
- Anxiety reduction is a legitimate UX goal — design can be therapeutic
- Visual encoding (icons, colour, charts) beats text in high-frequency daily-use apps
- Modals should always keep primary actions visible — never assume screen height
- Testing at low-fidelity saves 10× the time vs testing at high-fidelity
- Delete confirmations aren't just UX convention — users genuinely fear irreversible actions
- Bank account sync via UPI / open banking APIs — to auto-import transactions
- AI-powered spending insights: "You spent 40% more on food this month"
- Onboarding flow — currently not designed, critical for Day 1 activation
- Accessibility audit against WCAG AA — colour contrast on progress bars needs review
- Dark mode variant — high demand from interview participants