THE INSIGHT:
Settings pages feel like work because they're designed as FORMS.
6 identical white boxes stacked vertically = 'I have to fill all this in?'
But Aaisha's mental model is a CHECKLIST:
'Am I set up? What's left? Let me fix the one thing that's missing.'
THE PATTERN:
Each setting has 3 visual states:
✓ CONFIGURED → single summary line
'Bank account · Barclays · ****5678' [Edit]
Clicking Edit expands the form inline.
○ NEEDS SETUP → expanded with instructions + form
The first unconfigured item auto-expands.
→ EDITING → expanded form with Save/Cancel
Save auto-collapses back. Green flash confirms.
THE RESULT:
- Everything configured? Page is SHORT. Green dots, one-liners.
- Something missing? That section is expanded and loud.
- No 'wall of forms' feeling.
- Only one section open at a time (accordion).
HEADER:
Old: Dark stats bar with 5 cells of status dots
New: Thin progress bar + human sentence
'You're all set' / '2 things left before you go live'
Counts only essentials (WhatsApp, bank, charity name).
LAYOUT:
Old: 6 separate bordered boxes, each with header + form
New: Single bordered container, divide-y between items
Each item is a clickable ROW that expands/collapses
Blue left-border accent on expanded form
Status dot: green=done, amber=needed, gray=optional
SPECIFICS:
- WhatsApp: collapsed to 'Connected · +447xxx · Receipts, reminders'
Expands to show QR or features grid
- Bank: collapsed to 'Barclays · ****5678'
Expands to form + live 'What donors see' preview
- Charity: collapsed to name + color swatch
Expands to form + pledge page header preview
- Stripe: collapsed to 'Connected' or 'Optional'
Expands to key field + webhook setup
- Team: collapsed to '3 members · 1 leader'
Expands to member list + invite flow
- GoCardless: dimmed when collapsed (advanced), expands normally
NEW COMPONENTS:
- SettingRow: generic expand/collapse row pattern
- WhatsAppRow: special case with QR polling
- TeamRow: special case with member list + invite
- SaveRow: Save + Cancel buttons, auto-collapse on save
- Field: reusable input (unchanged)
Omair Saleh
ce4f2ba52a