Put income, spending and savings on one screen that explains itself

A personal finance tracker where income, spend by category and plain-language insights sit next to the everyday jobs: freeze a card, send money, check what cleared.

WireFin analytics screen showing total income, expenses and net savings, an income-versus-expenses chart, a spending-by-category donut, and insight cards

The problem

Most people can see their balance and cannot see their money. A bank app shows a number and a list of transactions, and turning that into an answer to "where did it go this month" means exporting a statement, sorting it into categories by hand and adding things up in a spreadsheet, if it happens at all. The everyday jobs, freezing a lost card, sending money to a friend, checking whether a payment has cleared, live in different corners of the app from the numbers they affect.

What it cost

For the person, the cost is decisions made blind: spending that only gets noticed once it has already happened, and savings that never get set aside because nothing ever said there was room. For the product, it is engagement that stops at the balance check, because there is nothing on the screen worth coming back for.

What we built

WireFin, a personal finance tracker where the numbers mean something. The analytics screen leads with three headline figures, total income, total expenses and net savings, then shows income against expenses over time and spending broken out across five categories. Beside the charts sit insight cards written in plain language, so a spike in a category is a sentence rather than a slice of a donut.

The same product carries the everyday jobs. A cards screen shows the virtual Visa card with its management controls, so freezing it is one tap, not a phone call. A send-money form and a recent payments table sit alongside, so what just cleared is visible next to the button that moved it. Ten modules in all, sharing one design system, so the analytics and the actions read as a single product rather than a dashboard bolted onto a wallet.

The three headline figures sit directly above the charts that explain them, so the total at the top and the breakdown beneath it are read together rather than hunted for. The income-versus-expenses chart runs over time, which is how people actually budget, and the category donut uses five buckets a household recognises rather than the long tail of merchant codes a bank produces. Every screen, from the analytics to the card controls, is clear on a wide screen and works on a phone without hiding anything.

WireFin analytics screen showing total income, expenses and net savings, an income-versus-expenses chart, a spending-by-category donut, and insight cards
Analytics: income, expenses and net savings up top, income against expenses over time, spend by category and the insight cards.
WireFin cards and payments screen with a virtual Visa card, card management controls, a send-money form, and a recent payments table
Cards and payments: the virtual card and its controls, a send-money form and the recent payments table.

What changed

Income, spending and savings are on one screen, categorised as they happen, with the reasons written out beside them. The jobs that used to live elsewhere, freeze, send, check, sit next to the numbers they change.

Stack

  • Next.js
  • TypeScript
  • Charting
  • Card issuing and payments API