KeySign · lo-fi wireframes ← exploration hi-fi →
Develop · structure before skin

Lo-fi wireframes

Grayscale on purpose. Before any color or brand goes on, these settle the layout, the reading order, and the size of every place a thumb has to land. One decision per screen, the carried context up top, the single primary action always at the bottom edge where the thumb already is.

content block text / label tap target — min 44×44 px
Core flow · driveway to submit
01Field Home
9:41
why Carried buyer / financing / funds chips sit at the top — zero re-entry. The competing-offer warning is the sunk block. The flow begins mid-stride.
02Offer Builder
9:41
⋯ scrolls ⋯
why The completeness ring anchors top-left as the running score. Body scrolls; the primary button is pinned to the thumb. One competitive call (escalation), everything else pre-drafted.
03Disclosures
9:42
⋯ 8 items ⋯
why A scannable checklist — icon + two label lines per row. The one flagged item (dashed icon) reads differently from the ready rows without relying on color.
04Pre-flight Guard
9:43
why The blocker is stated plainly before the pen, not after. Two stacked full-width targets — primary "Queue it" fix on top, dismiss below. Catch the redo early.
05Identity
9:44
why 6-box OTP sized for big thumbs, auto-advancing. Identity per buyer is what makes a fast signature hold up — so it earns its own screen, not a buried modal.
06Signing
9:45
1 of 4
why The signature surface is the screen — a wide pad that works across a car hood. 4 marks, one active at a time, progress explicit. Big "clear / done" targets, nothing else competing.
07Submit
9:46
why Packet summary, then 3 delivery routes as toggleable rows. Online sends; offline queues — the same layout either way, so offline is a state, not an error.
08Open Escrow
9:47
why The deal doesn't end at signing. Accepted-price stats up top, contingency deadlines on a clock, the parties hub as avatars. Momentum carried into the escrow file.