SortMe Prototype — prd-101-getting-started

Screens in this prototype

Every screen and state, on desktop and mobile, at a glance. Click any frame — or Enter the prototype — to open it live.

Enter prototype

Step 1 — Connect your bank

primary

Reach: Overview (dashboard), brand-new user — the DEFAULT ENTRY and the start of the end-to-end journey; also opens the step-copy review series

Pre-connect dashboard: no accounts, empty regions; all six steps shown as the path ahead (ring Step 1 of 6), bank is the spotlight hero (step one). Click 'Connect bank accounts' to run the real importing state, then advance to step 2, and so on through to completion.

Desktop
Mobile

Day 3 — spotlight on sorting transactions

primary

Reach: Overview (dashboard), new user day 3 — bank connected, sorting spotlighted

All six steps live (ring 1/6), hero = Sort your transactions with live count; Welcome card coexists; Action Needed counts reconcile

Desktop
Mobile

Analysing — transactions importing

state

Reach: Overview, ~10 minutes after bank connect

Conditional step absent (ring 1/5); analysing panel + 'While you wait — Meet SortMe AI'; empty cashflow/spend

Desktop
Mobile

Nearly done — spotlight on first goal

state

Reach: Overview, day 5, 4 of 6 steps done

Welcome card dismissed; Action Needed empty (hidden); hero = Create your first goal

Desktop
Mobile

Collapsed — slim progress row

state

Reach: User tapped the collapse chevron (replaces permanent dismiss)

Mini ring + 'n of m done' + Continue; whole row re-expands; persists across sessions on build

Desktop
Mobile

Complete — one-time completion moment

state

Reach: Last visible step just completed

Celebration + farewell; card retires permanently after this; goals region shows the created goal

Desktop
Mobile

Step 2 — Sort your transactions

secondary

Reach: Step-copy review series — each step as the spotlight hero

Same moment as Day 3; listed so the six-step copy series can be flipped through

Desktop
Mobile

Step 3 — Review your subscriptions

secondary

Reach: Step-copy review series — each step as the spotlight hero

Transactions sorted; Action Needed shows only the subscriptions card (counts reconcile)

Desktop
Mobile

Step 4 — Set your budget

secondary

Reach: Step-copy review series — each step as the spotlight hero

Subscriptions reviewed; Action Needed empty (hidden)

Desktop
Mobile

Step 5 — Create your first goal

secondary

Reach: Step-copy review series — each step as the spotlight hero

Same moment as Nearly done; listed for the copy series

Desktop
Mobile

Step 6 — Meet SortMe AI

secondary

Reach: Step-copy review series — each step as the spotlight hero

Ring 5/6; goal created so My Goals shows the real goal

Desktop
Mobile