Concept screens exploring different layout & flow directions for the same feature, each
rendered in the real SortMe styling. Compare information architecture, hierarchy, the number of
steps, and how each holds up on mobile — the design system already decides the visuals. Click a
thumbnail to open the full concept.
The idea: the user is already in the app. One "Your SortMe" section at the top of the first-run Overview holds the tiles and the active question together; tap a chip and the tile fills in above it. Progress starts above zero (name, email, goal already count). Revised 4 Sep: question merged into the section in the light content style (no purple), one-tap chips from C.
- 👍 Strongest sense of ownership — you watch your own Overview assemble (endowed progress + IKEA effect); the paywall and bank-connect steps come after, inside the same app.
- 👎 Needs the app shell before
register/complete — open questions on top-bar state and where payment sits; the dimmed page behind the card competes for attention on a phone.
Critic (1–5): Mobile 4 · Hierarchy 4 · States 4 · Flow 4 — gates: all pass (round 2)
The idea: keep today's one-question-per-screen purple wizard, but rebuild it — data-driven branching, honest "Step n of N", Skip and why-we-ask on every step, a real date, back on web.
- 👍 Lowest risk and least new UI — it is the existing pattern done properly; the sentence-with-inline-control voice survives.
- 👎 Weakest ownership signal: nothing is visibly "yours" until the app appears at the end; six more purple screens is where abandonment lives.
Critic (1–5): Mobile 4 · Hierarchy 4 · States 3 · Flow 4 — gates: all pass (round 2)
The idea: SortMe AI asks the questions in its own chat, right after the account exists. Tap-chip answers, a typed field only for money and the invite, and every answer confirmed back in plain English.
- 👍 The why and the what-happens-next ride in the conversation; it is the same surface SCOPE.md names as the only backfill path for existing users, so one build serves both.
- 👎 A chat is slower than a form; 35 providers need a typeahead; it front-loads the AI before the user has any data for it to be useful with.
Critic (1–5): Mobile 3 · Hierarchy 4 · States 3 · Flow 3 — 3 gate fails at round 2, fixed after
How to use this board
Walk each concept through the same lenses: information hierarchy (what's first / second / third),
edge & empty states, mobile behaviour (preview each in the mobile frame), and click-vs-think
cost. The chosen direction (or a blend) gets written up in
DESIGN.md, then built high-fidelity by
/sm-prototype.
