Greyscale layouts to settle what each screen is for and what comes first, before any visual decisions. Numbered pins explain the choices. Each screen also notes what changed on the way to the final UI.
Home
Answer “how much do we have?” first
Home · desktop
Move money
1
2
3
4
1
Total cash and trendThe single biggest number on the page, with a range switch. Founders open the app to check this one figure.
2
Burn and runway beside itMoney in, money out and runway sit next to the balance, so the number comes with its meaning.
3
Accounts as cardsOperating, payroll and treasury, each with a sparkline. Clicking one filters transactions.
4
“Needs your attention”A short to-do list: approvals, bills due, missing receipts. It links into each queue.
Changed in UIThe first wireframe led with account cards. Walking through Nora’s morning showed the question is always the total, so the balance and chart moved to the top and the accounts moved below.
Transactions
Review a list without losing your place
Transactions + drawer
1
2
3
Report
Save
1
Filters as chipsThe five views finance teams use most, one tap each. “Missing receipts” is its own chip because it drives month-end.
2
Side drawerDetails open over the list rather than on a new page, so the reviewed row stays visible.
3
Receipt slotA large, obvious target. Empty state explains what happens after upload.
Changed in UICategory moved from a column in the table to the drawer. On mobile the table shows only merchant and amount, and on desktop the category column became a quiet badge.
Move money · mobile
One decision per step
1 · Recipient
2 · Amount1
2
Review
3 · Review
3
Send
1
Amount is the heroVery large, with quick amounts for common payments. The keyboard opens straight to numbers.
2
Speed as choicesEach option leads with its arrival date. Fees sit on the right, where people compare them.
3
State the ruleA line explains whether a second approver is needed, before anyone presses Send.
Changed in UIValidation moved from the review step to the amount step. An over-balance amount now shakes the field and explains the limit, so the review screen never shows an error.
Approvals
Decide from the list
Approvals queue
1
Decline
Approve
2
Decline
Approve
3
1
Policy result on the cardEach request says whether it fits the budget and policy, in one sentence.
2
Actions stay putApprove and Decline sit in the same place on every card, so a queue can be cleared fast.
3
Empty state as a reward“You’re all caught up” replaces the list once it’s empty.
Changed in UIA confirm dialog before approving was removed. An undo in the toast is safer and faster than an extra click on every request.