Sign in with Microsoft (PRD-118) — design concepts
Concept screens exploring different layout & flow directions for the same feature, each
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: On the login, invite-code and register pages, the terms box and the Microsoft button come first, in one group; the email form sits under a divider. Register uses one terms box for both ways. Holding page: one waiting card in the app that lists invitations; "Create an organisation" sits behind a small link.
- 👍 One click for the 40 of 58 users who are SBA staff. Waiting needs no click, and creating an organisation needs a deliberate extra step (the CAS-2207 problem).
- 👎 Non-SBA users (clients, other practices) see Microsoft first and may try it and be refused.
Critic (1–5): Xero-style sign-in 4 · Hierarchy 4 · States 4 · all gates pass · no must-fix left
The idea: Today's forms stay as they are; the terms box and the Microsoft button sit under an "or" divider. Holding page: two cards side by side, "Join your branch" (selected) and "Set up my own practice" behind a button.
- 👍 Nothing moves for current password users; the smallest change to build and test.
- 👎 SBA staff scroll past a form they do not need, and "Set up my own practice" is still the only button on a first visit.
Critic (1–5): Xero-style sign-in 4 · Hierarchy 3 · States 3 · all gates pass
The idea: Each guest page first asks "Microsoft or email"; the form opens as a second step. Holding page: a welcome wizard outside the app chrome that asks "joining my branch" or "my own practice".
- 👍 The cleanest first screen, and the owner path is a clear, deliberate choice.
- 👎 Every password user gets one extra click on every login, and password managers fill less well when the form is hidden. A waiting user answers the question again on each visit.
Critic (1–5): Xero-style sign-in 4 · Hierarchy 4 · States 3 · all gates pass
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.
