UI/UX Design · Product Interface
Northline
A personal finance dashboard designed around one question: what changed since I last looked?
- Sector
- Fintech
- Disciplines
- UI, UX, Product
- Scope
- 10 Weeks
- Deliverables
- 38 Screens
R. Alvarsson
Personal
Personal · August 2026
Overview
Total balance
£14,208.36
Everyday
£2,140.18
Current ···· 4417
Savings
£12,068.18
Instant ···· 9302
Spending by month
Essentials against discretionary, rolling 12 months
Recent activity
See allMeridian Coffee
Eating out · Today, 08:14
-£4.20
Money out
Harborline Transit
Travel · Today, 07:52 · Pending
-£2.80
Money out
Kestrel Grocery
Groceries · Yesterday, 18:31
-£63.47
Money out
Aldercrest Ltd — Payroll
Income · 28 Jul
+£2,940.00
Money in
Northgate Energy
Bills · 27 Jul · Recurring
-£88.10
Money out
Budgets
AugustOver by £14.30
Overview screen — desktop, 1440px
Overview
Most finance apps show you everything you own. Northline shows you what moved.
Northline is a self-initiated concept — a personal finance dashboard built to work through the problem underneath almost every money product. The data is never the hard part. Deciding what a person needs to see in the eleven seconds they actually spend in the app is.
We designed it end to end: information architecture, user flows, a component library with every state specified, and the finished screens on this page. Every screen on this page is drawn in HTML and CSS for this case study — no mockup templates, no stock screenshots.
The Challenge
A screen that answers every question answers none of them.
The category convention is to give the user a control room: balances, transactions, budgets, insights, offers, credit score, savings pots — all present, all rendered at roughly the same visual weight. It reads as generosity. It behaves as noise.
We built a deliberately faithful version of that convention as a starting artefact, then annotated what it costs. Three failures kept surfacing, and each one shaped a decision later in the project.
Balance
£2,140
Savings
£12,068
Credit
£1,410
Score
712
Pots
£340
Round-ups
£12.40
Rewards
1,204
Due
£88.10
Eleven numbers, no hierarchy, and a pending row distinguished only by opacity.
No primary answer
When every figure is styled the same, the interface has quietly delegated prioritisation to the user. Opening the app becomes a scanning task before it becomes a reading task.
Categorisation as homework
Budget features depend on categorised transactions, but the filing is pushed onto the person. The feature that needs the most accurate data is the one asking for the most unpaid labour.
State encoded in a tint
Pending versus cleared — the difference between money you have and money you have already spent — was carried by a 45% opacity row. It survives neither a bright pavement nor a colour vision difference.
Research
There were no users to interview, so we wrote down what we were guessing.
A concept project has no customers, no support queue, and no analytics. Pretending otherwise is how case studies end up quoting invented interview participants. What a concept project can honestly do is two things: study patterns that already exist in public, and be explicit about every assumption the design rests on.
So we ran a structured teardown of published banking and budgeting interfaces — recording the pattern, the job it does well, and the point at which it stops working — and kept an assumptions register alongside it. The register is the more useful artefact. It is the list we would hand to a client on day one and say: these are the questions your users need to answer before we commit.
Pattern teardown
Rolling 12-month bar chart
Orientation at a glance — season, trend, the month something unusual happened.
Answers nothing about today. Users open the app to ask "can I afford this now", and a year of history is the wrong instrument.
Automatic categorisation
Removes the filing work, which is the only reason budget features get used at all.
Almost universally silent about its own uncertainty. A wrong guess looks exactly like a right one until a budget is already skewed.
Round-up savings
Genuinely habit-forming, and pleasant to watch accumulate.
Placed on the home screen it competes with the balance for the same attention, on a screen that should have one focal point.
Pending vs. cleared
The single most consequential distinction on the screen for anyone near an overdraft.
Repeatedly encoded as opacity or a hue, never as a word. Ambient light, cheap screens, and colour vision differences all erase it.
Assumptions register
Assumption 01
The primary job is orientation, not analysis.
Test: a five-second exposure task. Show the screen, take it away, ask what changed. If people report a figure instead of a change, the hierarchy is wrong.
Assumption 02
People will correct a category if it costs one tap.
Test: instrument corrections per session against tap depth. If correction rate collapses past the first tap, the control belongs in the row.
Assumption 03
Showing uncertainty builds trust rather than eroding it.
Test: two variants — a silent guess and a labelled guess — measured on correction rate and on stated confidence in the totals.
Assumption 04
Mobile is where the product actually lives.
Test: session split by device and by context. Desktop earns depth — reconciliation, exports; the phone earns speed.
None of these have been validated. That is the point of writing them down rather than burying them in a rationale slide.
Flows & Wireframes
Categorisation should cost one tap, or none.
This is the flow the whole product hangs on. Budgets, insights, and the spending chart are all downstream of whether a transaction ends up in the right bucket — and every screen we designed later was tested against whether it made this flow shorter or longer.
Transaction categorisation — happy path
High confidence
Applied silently. No notification, no confirmation step — the row simply arrives correct.
Middling confidence
Still applied, but labelled a guess, with the change control in the row rather than three taps deep.
Low confidence
Lands in Uncategorised — a real destination with its own screen and a batch editor, not an error state.
Step 05 is the one that took the longest to argue for. An interface that admits it guessed is asking the user to do a small amount of work, and it is the only version of this flow that stays honest when the guess is wrong.
From block diagram to interface
Regions only. The argument at this stage is how many things earn a place above the fold — the answer landed at three.
Density resolved. Amounts get their own aligned column here, which is what later forced tabular figures into the type spec.
Total balance
£14,208.36
The structure survived intact. Colour arrives last and does one job: marking the current month and separating money in from money out.
Design System
A component is a decision you only get to make once.
Thirty-eight screens is enough that consistency stops being a matter of discipline and becomes a matter of infrastructure. The system was specified before the screens were finished, so that every later decision was a composition problem rather than a fresh design problem.
Colour
Ink and paper carry the layout. Mint appears once per screen — the single action the interface wants you to take — and never as a letterform on a light surface. Blue is structural: chart bars, selected states, links. Slate replaced a lighter grey once we measured it.
Typography
Every numeral in the product is tabular. Proportional figures make a column of amounts jitter, and a jittering column is harder to scan than a smaller one.
Grid and density
Components, with their states
Primary action
Default
Hover
Pressed
Focus
Disabled
Working
Amount input
Rest
Focused
A budget needs a limit above zero.
Category card
Groceries
£248 this month
Rest
Eating out
£91 this month
Selected — border and tick, not fill alone
Uncategorised
3 transactions
Empty-ish — a destination, not an error
The Interface
The transaction row is where trust is won or lost.
The overview screen gets the attention, but the detail view is where a person finds out whether the product is being straight with them. It is the screen that has to say "I categorised this myself, here is why, and here is how to tell me I was wrong" without turning into a settings panel.
Transaction · 8841
Kestrel Grocery
Harbour Road branch
-£63.47
Money out · Cleared
Category
Applied automatically. Matched to 11 previous payments at this merchant.
Transaction detail with the category editor open — the flow's payoff screen
The phone is the product
Desktop earns depth — reconciliation, exports, a year of history. The phone earns speed, so the mobile screens hold less and answer faster.
Good evening, Rea
Total balance
£14,208.36
Up £412.90 vs. July
Spending, last 7 days
Today
← Transactions
Kestrel Grocery
-£63.47
Money out · Cleared
Categorised automatically
Balance, transaction detail, budget. Three screens cover the overwhelming majority of what anyone opens a finance app to do.
Accessibility, decided rather than audited
Accessibility gets treated as a pass at the end of a project, which is why it usually arrives as a list of things that now have to change. On Northline it decided the palette. Several of the decisions below made the brand less pretty and the product more usable, and that trade was the right one every time.
Contrast is measured, not eyeballed
Ink on paper reaches 16.2:1. The brand mint measures 2.4:1 against paper — nowhere near legal for text — so mint is a fill, a chart mark, and a focus ring, never a letterform on a light surface. Trust blue clears 3.2:1, which is enough for a chart bar or an icon and not enough for a sentence.
The primary button carries an ink label
White on mint measures 2.5:1. Ink on mint measures 7.6:1. Every finance app in the teardown used white. Dark text on a bright button looks unusual for about a day, and then it just looks like the product.
Money in and money out are never colour alone
Every amount carries an explicit sign and every row states "Money in" or "Money out" in words. Red-green is the most common colour vision difference, and a bank statement is the worst possible place to hang meaning on a hue. Where a positive figure does take colour, it uses a darkened mint at 5.2:1 rather than the brand tone.
Pending is a word
The convention we tore down encoded pending as a faded row. Northline prints the word in the row's metadata line, and the same rule applies to Recurring, Refunded, and Disputed. Any state that changes what a number means gets a label.
Focus is designed, not inherited
A 2px ink ring at 2px offset, with a 1px paper inner ring so the same token survives on mint, on ink, and on paper without a per-surface override. It is specified as a component state alongside hover and pressed, not bolted on afterwards.
The keyboard path is the real path
Each transaction row is a button. Arrow keys move between rows, Enter opens the detail sheet, Escape closes it and returns focus to the row that opened it. The category picker is a listbox with proper roles, so the current selection is announced rather than implied by a tick.
Also specified: 44 × 44 minimum targets including the category chips, text that reflows to 200% without horizontal scrolling, and every transition honouring reduced-motion preferences.
The Result
A product where the interface does the filing and the user does the deciding.
One question per screen
Overview answers what changed. Detail answers why it was categorised that way. Neither tries to be both.
A system, not a set of screens
Tokens, five component families, and every state specified — so screen thirty-nine costs a fraction of screen one.
Accessible by construction
Contrast, focus, and non-colour encoding decided in the palette stage rather than patched at the end.
On the absence of statistics. Northline has no users, so it has no metrics, and we are not going to manufacture any. Adoption rates and error-reduction percentages take four seconds to type and cannot be checked by anyone reading this. What can be checked is on the page: the flow logic, the component states, the contrast measurements, and the reasoning behind each one. That is the work, and it is what we would be accountable for on a real engagement.