Halden is a concept for a business banking and spend platform for startup finance teams. Accounts, cards, bills, approvals and payments in one product, designed end to end: research, user flows, wireframes, design system, high-fidelity UI and a working prototype.
A 40-person startup usually runs its money across a bank portal, a card provider, a bill-pay tool, an approvals thread in Slack and a spreadsheet that ties them together. Each tool is fine alone. The work happens in the gaps between them.
Missing receipts and uncategorized card spend pile up until close, when someone chases 30 people for screenshots.
A “can you approve this?” message arrives without the budget, the policy or the purchase order it relates to.
Cash position is rebuilt by hand each week, so founders make hiring calls on last month’s numbers.
I designed around three roles with different jobs. The same data shows up for each of them, framed for the decision they need to make.
“Show me what needs my decision, and let me make it in one step.”
“I just want to pay for AWS without filling in a form.”
“Get this supplier paid before the line stops.”
“Premium” can drift into decoration. These three rules settled design arguments and kept every screen focused on money and decisions.
One accent colour, generous space, and numbers set large. Alerts appear only when there’s something to do.
e.g. semantic colours never compete with the accentAny amount opens to its source: receipt, card, person, policy and approval trail. Nothing is a dead end.
e.g. transaction drawer, bill approval timelineDecisions happen in place, with instant feedback and an undo. No separate pages just to approve something.
e.g. inline approvals, card freeze with undoEach step produced something the next one built on. Click through to see the artefacts.
Every screen below is a real state in the prototype. Open it to click through the same flows.
Opening a transaction shows who spent it, where it came from and what’s missing. Dropping in a receipt triggers a scan, then confirms the amount matches.
Each card shows spend against its limit before you open it. Card details flip into view on request, and freezing is one switch with an undo.
Recipient, amount, review. Speed and fees are shown as choices with arrival dates, not jargon. Limits are checked before the review screen, so errors never arrive at the last step.
An invoice arrives with its line items read, its purchase order matched and the approval path shown. Approving schedules the payment two days before it’s due.
A full dark theme comes from the same tokens, not a filter. Power users get a command menu (⌘K) that can jump anywhere or start any action.
The sidebar becomes a tab bar with an approvals badge. Tables collapse to the two columns that matter: who and how much.
Motion confirms that something happened and where it went. Every animation uses the system’s three durations and two easing curves. Try them.
--motion-slow · --ease-spring1100ms · ease-out quart
$412.60$10,000--motion-slow · translateX + collapse.btn.is-loading · spinnerThe system is written as design tokens and components developers can use directly, with every state defined.