All case studies

Personal Finance

Loom

A money tracker built around the three seconds after you spend — say it in a sentence, send it on WhatsApp, or photograph the receipt.

TypePersonal finance tracker
SurfaceWeb app + mobile
RoleProduct design, UI system, frontend
Year2026
Loom dashboard with total portfolio, money in and out, budgets and recent activity
The overview — portfolio, what's in and out, safe-to-spend, and where it goes.

The brief

Every expense tracker fails at the same moment: the one right after you pay. An app that wants a category, an amount, and a date before it will accept anything loses to simply forgetting — and a month of gaps makes the whole ledger worthless.

Loom makes capture the easy part and does the structuring itself. Type “250 lunch”, message it on WhatsApp, or photograph the receipt and let OCR fill the form. Everything downstream — budgets, recurring auto-pays, per-trip spend, and a thirty-day forecast — runs off entries that were cheap enough to actually log.

01

Log it as a sentence

The primary field parses plain language — “250 lunch”, “petrol 800”, “earned 50000 salary” — into amount, category, and direction. The structured form is the fallback, not the front door.

02

Log it from WhatsApp

Send a message the same way you'd tell a friend what you spent and it lands as a transaction. No app switch, no install, and it works on the phone people already have open.

03

Log it from a photo

Upload a receipt and OCR pre-fills the expense — merchant, amount, date — leaving a confirm step rather than a data-entry step.

04

Let the fixed stuff run itself

Salaries, EMIs, SIPs, and subscriptions are set up once as recurring series, then tracked per occurrence with its own status, so projected cashflow and what actually cleared never quietly diverge.

05

Separate trips from daily life

Spend can be assigned to a trip or left in general, so a holiday doesn't distort the monthly picture and a trip can be read as its own budget.

06

Point the data forward

A thirty-day projection with a stated confidence, category pressure against budgets, and month-over-month history — so the app answers what's coming, not only what already happened.

Design language

Seven rules do most of the work. They exist because the product shows a great deal of data at once and still has to be readable on the fifth hour of a screening session — every one of them is a decision about attention, not taste.

01

A warm gradient ground, not a white page

The app sits on a soft wash of pale lime, mint, and peach. Cards are near-white and slightly translucent on top of it.

Why

Personal finance is an anxious place, and a white spreadsheet says audit. A warm ground reads as paper in daylight, and the translucency makes cards feel laid on the page rather than cut into it — the surface stays soft while the numbers stay exact.

02

Serif for money, mono for machine

Amounts and headings are set in a high-contrast serif; every kicker above them is 11px uppercase monospace.

Why

The serif gives a balance the authority of a printed statement. The mono labels read as system output. Together they separate what the app recorded from what it means, without a single divider line.

03

One dark card, holding the one number that is about you

Total portfolio is deep green with a lime sparkline; everything around it is light.

Why

Inversion sets reading order — but here it also marks the difference in kind. Every other figure is a record of a transaction; this one is a claim about your position, and it should not look like just another tile.

04

Lime is for actions; green and red belong to money

The active nav pill, safe-to-spend, and primary buttons are lime. Money in is green, money out is red, and neither is ever used for a control.

Why

If one green meant both income and clickable, every balance on screen would read as a button. Splitting the roles means colour never lies about whether something is a fact or an affordance.

05

The dock floats; the page scrolls underneath

Navigation is a rounded dark pill anchored bottom-centre, over the content rather than framing it.

Why

This is a phone-shaped product that also runs on a desktop. A bottom dock is thumb-reachable on mobile and costs no vertical chrome on desktop — one navigation that fits both, instead of two that drift apart.

06

Every card says its subject before its value

Panels open with a mono kicker — FORECAST, PRESSURE, RECEIPTS, RANKING — then a serif title, then the data.

Why

A dashboard is read in glances, not passes. The kicker is a scent trail: you find the panel you came for without parsing a single number on the way.

07

The calendar is a filter, not a picture

The month grid carries a coloured dot per day — income, moderate spend, heavy spend — and clicking a range drives every figure below it.

Why

Calendars in finance apps are usually decoration. Making it the control means the shape of a month and the query for that month are the same object, so noticing a bad week and investigating it are one gesture.

Screens

Every surface in the product, in the order a recruiter meets them.

Where it stands

Capture stops being the bottleneck. An expense costs a sentence, a message, or a photo — and because the ledger is actually complete, the forecast on the other end of it is worth reading.

Next case studyRoop Glass Solution