Home Office Calculator — design concepts
Three layout & flow directions for the same job: enter the home-office inputs, derive the
business-use %, fill the category table, and keep one journal per year up to date. All rendered in
the real Cashbook styling. Compare information architecture, hierarchy and the number of steps —
the design system already decides the visuals. Click a thumbnail to open the full concept.
The idea: everything on one screen — the derived % sits in a
collapsible card, the category table dominates, and a sticky footer holds the living journal + export.
- 👍 Fewest clicks for the common case (tweak a figure, re-post); matches the Xero workpaper an accountant knows.
- 👎 Densest single screen; the % inputs are hidden until expanded.
Critic (1–5): Xero 5 · Hierarchy 4 · States 4
Strong runner-up — grafted into the pick (account column + Dr/Cr journal split).
The idea: four steps — Method → Expenses → Review & post →
Export — with a running claim summary alongside each step.
- 👍 Lowest cognitive load on the first run; each decision is isolated.
- 👎 Extra clicks for the frequent repeat case (adjust one number after year 1).
Critic (1–5): Xero 2 · Hierarchy 4 · States 2
Rejected — a wizard adds steps to a repeat task and can't hold read-only/blocked years.
The idea: a financial-year rail on the left (each year with its
status — posted / locked / not started) and the selected year's workpaper on the right.
- 👍 Makes "one claim per year" and switching years first-class; posted/locked status is obvious.
- 👎 Adds a navigation layer around what is usually a single-year task; rail is empty for a new client.
Critic (1–5): Xero 5 · Hierarchy 4 · States 5
✓ Chosen direction — best scaffold for the many required states.
How to use this board
Walk each concept through the same lenses: information hierarchy (what's first / second / third),
edge & empty states, click-vs-think cost, and the "simpler than Xero, same power" test.
The chosen direction (or a blend) gets written up in
DESIGN.md, then built high-fidelity by
/cb-prototype.
