Telepathic onboarding: welcome flow + context-aware dashboard
New: /dashboard/welcome — guided first-time setup - Step 1: 'What are you raising for?' (starts with what excites them) - Step 2: 'Where should donors send money?' (natural follow-up) - Step 3: 'Want auto-reminders?' (WhatsApp as bonus, skippable) - Step 4: 'Here's your link!' (dark section with copy/WhatsApp/share) - Auto-creates event + first pledge link during flow - User holds a shareable link within 90 seconds of signing up Updated: /dashboard (context-aware home) - State 1 (no events): auto-redirects to /dashboard/welcome - State 2 (0 pledges): shows pledge link + share buttons prominently - State 3 (has pledges): shows stats + feed - State 4 (has 'said paid'): amber prompt to upload bank statement - State 5 (100% collected): celebration banner - No more onboarding checklist — dashboard adapts instead - Event name as page header (not generic 'Home') - Event switcher for multi-event orgs Updated: /signup → redirects to /dashboard/welcome (not /dashboard) Persona spec: docs/PERSONA_JOURNEY_SPEC.md
This commit is contained in:
220
pledge-now-pay-later/docs/PERSONA_JOURNEY_SPEC.md
Normal file
220
pledge-now-pay-later/docs/PERSONA_JOURNEY_SPEC.md
Normal file
@@ -0,0 +1,220 @@
|
||||
# Deep Persona Analysis + Journey Redesign
|
||||
|
||||
## The Core Insight
|
||||
|
||||
The current product asks users to learn its structure.
|
||||
The redesigned product should **mirror how users already think**.
|
||||
|
||||
Users don't arrive thinking "I need to create a campaign then generate QR sources."
|
||||
They arrive thinking **"I have an event on Saturday and I need people to pledge."**
|
||||
|
||||
The gap between those two thoughts is where every user drops off.
|
||||
|
||||
---
|
||||
|
||||
## Persona Deep Dive
|
||||
|
||||
### Persona A: Aaisha — Charity Fundraising Manager
|
||||
|
||||
**Who she is:**
|
||||
- 32, works at a medium Islamic charity (£500k–£2M annual income)
|
||||
- Not technical. Uses Canva, WhatsApp, basic Excel
|
||||
- Her boss says "we need to collect pledges at the gala" and she's the one who makes it happen
|
||||
- She's done this before with paper forms and a shared Google Sheet. It was a nightmare.
|
||||
- She found PNPL from a WhatsApp forward or saw it on the landing page
|
||||
|
||||
**Her mental model (what she thinks is happening):**
|
||||
1. "I sign up" → She expects to land somewhere that asks "what's your event?"
|
||||
2. "I tell it about our dinner" → She expects it to set everything up for her
|
||||
3. "I get links to share" → She expects to be holding something shareable within 2 minutes
|
||||
4. "People pledge" → She expects to see names and amounts appear
|
||||
5. "The system chases them" → She expects this to happen automatically
|
||||
6. "Money arrives" → She expects to see green ticks
|
||||
7. "I download a report" → She expects a spreadsheet for her treasurer
|
||||
|
||||
**Her assumptions (things she takes for granted):**
|
||||
- "It'll ask me for my bank details so people know where to pay"
|
||||
- "There'll be a link I can send on WhatsApp"
|
||||
- "It'll remind people automatically — that's the whole point"
|
||||
- "I can see who's paid and who hasn't"
|
||||
- "Gift Aid should be handled"
|
||||
|
||||
**Her fears:**
|
||||
- "Is this going to be complicated to set up?"
|
||||
- "Will donors find this confusing?"
|
||||
- "What if someone pledges and we lose track of it?"
|
||||
- "Am I going to have to learn another system?"
|
||||
|
||||
**What she does NOT know she needs (until she's in the middle of it):**
|
||||
- She doesn't know she needs to connect WhatsApp first
|
||||
- She doesn't know each volunteer needs their own link
|
||||
- She doesn't know bank reconciliation is a feature
|
||||
- She doesn't know about the chatbot
|
||||
|
||||
**The golden path for Aaisha:**
|
||||
```
|
||||
Signup → "What's your event?" → Bank details → WhatsApp QR scan →
|
||||
→ Auto-generated pledge link → Copy to clipboard → DONE
|
||||
→ She's on the dashboard watching pledges come in
|
||||
```
|
||||
|
||||
Time to value: under 3 minutes. She should be holding a shareable link
|
||||
before she has time to wonder if this was worth signing up for.
|
||||
|
||||
---
|
||||
|
||||
### Persona B: Yusuf — Volunteer / Table Captain
|
||||
|
||||
**Who he is:**
|
||||
- 45, mosque committee member, not technical at all
|
||||
- Aaisha sent him a link on WhatsApp saying "use this at your table tonight"
|
||||
- He opens `/v/[code]` on his phone
|
||||
- He's standing at a banquet table with a phone and maybe a printed QR
|
||||
|
||||
**He never sees the dashboard.**
|
||||
His journey is: open link → show QR → watch numbers go up → feel proud.
|
||||
|
||||
**We don't need to redesign anything for Yusuf** — his view is separate.
|
||||
But we do need to make sure **Aaisha can get him his link easily**.
|
||||
|
||||
---
|
||||
|
||||
### Persona C: Fatima — Treasurer / Trustee
|
||||
|
||||
**Who she is:**
|
||||
- 55, retired accountant, meticulous
|
||||
- Logs in once a month, maybe twice
|
||||
- Wants: Gift Aid CSV, total collected vs outstanding, clean data
|
||||
|
||||
**Her mental model:**
|
||||
1. "Show me the numbers" → She wants a summary, not a feed
|
||||
2. "Can I download this?" → She needs CSVs for her spreadsheet
|
||||
3. "Which bank payments match which pledges?" → She'll upload a bank statement
|
||||
4. "Where's the Gift Aid report?" → She needs it for HMRC
|
||||
|
||||
**The key insight about Fatima:**
|
||||
She doesn't need onboarding. She needs **Reports** to be front and center
|
||||
when she arrives. The dashboard should detect that she's a returning user
|
||||
with data and show her the summary, not a getting-started wizard.
|
||||
|
||||
---
|
||||
|
||||
## The Journey Redesign
|
||||
|
||||
### Problem 1: Signup → Dashboard is a dead end
|
||||
|
||||
**Current flow:**
|
||||
```
|
||||
Signup (charity name, email, password)
|
||||
→ Redirect to /dashboard
|
||||
→ Empty dashboard with "Getting Started" checklist
|
||||
→ User has to figure out what to do next
|
||||
```
|
||||
|
||||
**Why this fails:**
|
||||
- The dashboard is empty. There's nothing to see.
|
||||
- The checklist says "Add bank details" — but she was thinking about her EVENT
|
||||
- She's now in "Settings" adding bank details when she wanted to be sharing links
|
||||
- By the time she gets back to the dashboard, she's forgotten what she came for
|
||||
|
||||
**Redesigned flow:**
|
||||
```
|
||||
Signup (charity name, email, password)
|
||||
→ Redirect to /dashboard/welcome (NEW — a single-page guided setup)
|
||||
→ Step 1: "What are you raising for?" (event name + optional date/target)
|
||||
→ Step 2: "Where should donors send money?" (bank details)
|
||||
→ Step 3: "Connect WhatsApp" (QR scan — or skip for now)
|
||||
→ Done: "Here's your pledge link" (big, copyable, with share buttons)
|
||||
→ Auto-redirect to dashboard (which now has an event and a link)
|
||||
```
|
||||
|
||||
**Why this works:**
|
||||
- Starts with the thing she's excited about (her event)
|
||||
- Bank details feel like a natural follow-up ("okay, where do people pay?")
|
||||
- WhatsApp is presented as a bonus ("want auto-reminders? connect here")
|
||||
- She ends up holding a shareable link — the actual thing she came for
|
||||
- The dashboard is no longer empty when she arrives
|
||||
|
||||
### Problem 2: The dashboard doesn't match her mental state
|
||||
|
||||
**Current dashboard for a new user:** Empty stat cards, a checklist, generic copy.
|
||||
|
||||
**What she's actually thinking at this point:**
|
||||
- "Did it work? Is my link live?"
|
||||
- "How do I share this with my volunteers?"
|
||||
- "When people pledge, will I see it here?"
|
||||
|
||||
**Redesigned dashboard for a new user (has 1 event, 0 pledges):**
|
||||
```
|
||||
┌────────────────────────────────────────────────┐
|
||||
│ Your appeal is live [Appeal] │
|
||||
│ Ramadan Gala 2026 │
|
||||
│ │
|
||||
│ ┌─────────────────────────────────────────────┐ │
|
||||
│ │ 📋 Your pledge link │ │
|
||||
│ │ pledge.quikcue.com/p/A8K3Y2 │ │
|
||||
│ │ [Copy] [WhatsApp] [Email] [Print QR] │ │
|
||||
│ └─────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 0 pledges so far — share your link to start │
|
||||
│ │
|
||||
│ ┌──────────┐ ┌────────────────────────────┐ │
|
||||
│ │ Add more │ │ Give each volunteer their │ │
|
||||
│ │ links │ │ own link to track who │ │
|
||||
│ │ │ │ brings in the most pledges │ │
|
||||
│ └──────────┘ └────────────────────────────┘ │
|
||||
│ │
|
||||
│ What happens next: │
|
||||
│ 1. Donors scan or click your link │
|
||||
│ 2. They pledge in 60 seconds │
|
||||
│ 3. They get a WhatsApp receipt │
|
||||
│ 4. We remind them until they pay │
|
||||
│ 5. You see it all here │
|
||||
└────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Redesigned dashboard for a returning user (has pledges):**
|
||||
```
|
||||
┌────────────────────────────────────────────────┐
|
||||
│ Ramadan Gala 2026 [Switch appeal] │
|
||||
│ │
|
||||
│ ┌──────┬──────┬──────┬──────┐ ← gap-px grid │
|
||||
│ │ 47 │£12.4k│£8.2k │ 66% │ │
|
||||
│ │pledg │promi │recvd │colle │ │
|
||||
│ └──────┴──────┴──────┴──────┘ │
|
||||
│ │
|
||||
│ ██████████████░░░░░░ 66% received │
|
||||
│ │
|
||||
│ ┌── Needs attention (3) ──────────────────────┐ │
|
||||
│ │ Ahmed K — £50 — said he paid 3 days ago │ │
|
||||
│ │ Sarah M — £100 — needs a nudge (10d) │ │
|
||||
│ │ Omar R — £200 — waiting since 5 Mar │ │
|
||||
│ └─────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌── Recent ────────────────── [View all] ─────┐ │
|
||||
│ │ Fatima A £50 Received ✓ Today │ │
|
||||
│ │ Bilal H £100 Waiting Yesterday │ │
|
||||
│ │ Mariam K £75 Said paid 2d ago │ │
|
||||
│ └─────────────────────────────────────────────┘ │
|
||||
└────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Problem 3: The onboarding checklist is a list of chores
|
||||
|
||||
**Current:** A dismissible checklist that feels like homework.
|
||||
|
||||
**Redesigned:** No checklist. The system **just does the next thing**.
|
||||
|
||||
After signup → welcome flow, there is NO checklist on the dashboard.
|
||||
Instead, the dashboard **adapts its content** based on what's missing:
|
||||
|
||||
| State | Dashboard shows |
|
||||
|-------|----------------|
|
||||
| No WhatsApp | Amber bar: "Connect WhatsApp for auto-reminders" (already exists) |
|
||||
| No pledges | "Share your link to start collecting" with share buttons |
|
||||
| Has pledges, no bank imports | "3 people said they paid. Upload your bank statement to confirm." |
|
||||
| Has overdue | "Needs attention" section is promoted to top |
|
||||
| All paid | Celebration: "All pledges collected! 🎉" |
|
||||
| Returning user, 2+ events | Event switcher at top |
|
||||
|
||||
The system anticipates her next thought at every stage.
|
||||
Reference in New Issue
Block a user