# Demo Roadmap

*Updated: 2026-04-05*

Everything needed to go from "look at these Storybook screens" to "here, watch this" — a connected, animated demo that tells the Angels story.

---

## The Goal

Four demo videos (2-3 minutes each) showing complete user journeys. Each tells a story from a specific persona's perspective. Together, they show the full Angels ecosystem.

These demos serve three purposes:
1. **Investor meetings** — screen-share or send video links
2. **User testing** — "does this flow make sense to you?"
3. **Partnership pitches** — show therapists/charities what their clients would experience

---

## Demo 1: Kai's First Week (Survivor)

**Duration:** 3 minutes
**Emotional arc:** Hopeful → Engaged → Vulnerable → Supported → Empowered

### Script:

**Act 1 — Arrival (30s)**
- App launches with warm animation
- Persona selection: Kai taps "Survivor"
- Welcome screen: "You're taking a brave step. Let's set up your safety net."

**Act 2 — Building the Plan (60s)**
- Who to call: adds Mum (07xxx), adds therapist (Dr. Chen)
- What helps: selects "Cold water on wrists", "Call Mum", "Go outside"
- What to avoid: types "News apps", "Being alone at night"
- Review: sees complete safety plan, taps "Looks good"
- Invite angels: sends invite link to Mum

**Act 3 — Daily Rhythm (45s)**
- Day 1 check-in: "How are you feeling?" → taps "Good" → journal gate → writes "First day using this" → streak: 1 day
- Day 3 check-in: "Mixed" → journals about a tough meeting → streak: 3 days
- Day 7: streak celebration → mood sparkline shows the week

**Act 4 — The Crisis (45s)**
- Home screen → crisis button
- "I'm not okay right now"
- Alert sent to Mum (angel)
- Safety plan appears: coping strategies at the top
- Real-check: "Are you safe?" → "Yes, but struggling"
- Post-crisis day 1: "You activated your plan. That took strength."

**Key selling points highlighted:**
- Research-backed design (emotional readiness check)
- Escalation ladder in action
- No guilt, no clinical language
- Privacy: journal is private unless explicitly shared

---

## Demo 2: James Joins as Angel (Guardian)

**Duration:** 2 minutes
**Emotional arc:** Curious → Understanding → Connected → Reassured

### Script:

**Act 1 — The Invitation (30s)**
- James receives a link (mock SMS: "Kai has invited you to be their Angel")
- Angel invitation landing: sees Kai's name, learns what an Angel is
- "Being an Angel means Kai trusts you. Here's what that looks like."

**Act 2 — Setting Boundaries (30s)**
- Learn the role: what you'll see, what you won't (no journal access, no location)
- Set boundaries: notification preferences, availability hours
- "You'll be notified if Kai activates their crisis plan. That's it — unless they choose to share more."

**Act 3 — Connected (60s)**
- James's home screen: sees Kai's shared mood (with consent)
- Kai's check-in streak visible (shared via consent wizard)
- Nudge: "Kai hasn't checked in today — no action needed, just awareness"
- Crisis alert arrives: "Kai activated their safety plan"
- James sees what Kai wants him to see: coping strategies, not triggers

**Key selling points:**
- Consent-first sharing (Angels see only what's explicitly shared)
- Not surveillance — support
- The guardian gets value too (reduced anxiety about their loved one)

---

## Demo 3: Danny's Recovery (Recoverer)

**Duration:** 2 minutes
**Emotional arc:** Determined → Tracking → Challenged → Supported

### Script:

**Act 1 — Starting Fresh (30s)**
- Persona selection: "Recoverer"
- Welcome: "Recovery is a journey, not a destination. Let's track yours."
- Set sobriety date, select substances, name sponsor

**Act 2 — Building the Circle (30s)**
- Add triggers: "Friday nights", "Work stress", "Old drinking friends"
- Invite sponsor as Angel
- Build support circle: 3 trusted contacts

**Act 3 — A Trigger Moment (60s)**
- Friday evening check-in: mood "Mixed"
- Journal: "Colleague invited me for drinks after work"
- App shows coping strategies from safety plan
- Option to message sponsor (angel)
- Next morning check-in: "Good" — sobriety counter intact

**Key selling points:**
- Addiction recovery is a massive, underserved market
- Same platform, different persona — demonstrates extensibility
- Trigger tracking as prevention, not punishment

---

## Demo 4: Priya's Circle (Connector)

**Duration:** 1.5 minutes
**Emotional arc:** Caring → Organised → Connected

### Script:

**Act 1 — Mapping Relationships (30s)**
- Persona selection: "Connector"
- "You care about a lot of people. Let's help you stay connected."
- Add people: 4 contacts with relationship labels

**Act 2 — Staying in Touch (30s)**
- Set check-in frequency per person (weekly, fortnightly, monthly)
- Home screen shows: who's due for a check-in, who you haven't heard from
- Social battery indicator: "You've connected with 3 of 4 people this week"

**Act 3 — The Value (30s)**
- Nudge: "You haven't spoken to Sarah in 2 weeks"
- Quick check-in: send a pre-written "thinking of you" message
- Overview: connection health across entire circle

**Key selling points:**
- Not everyone using Angels has a mental health condition
- Connectors maintain the social fabric that supports survivors
- Expands TAM beyond clinical users

---

## Technical Implementation

### What We Need to Build

```
┌─────────────────────────────────────────────┐
│  Demo App (single HTML or lightweight SPA)  │
├─────────────────────────────────────────────┤
│  Journey Player                             │
│  - Loads journey definition                 │
│  - Renders current node's component         │
│  - Handles actions → transitions to next    │
│  - Persists data between nodes              │
│  - Animates transitions (slide/fade)        │
├─────────────────────────────────────────────┤
│  Fake Data Layer                            │
│  - Static JSON for each API effect          │
│  - Pre-populated user profiles              │
│  - 14 days of mock check-in history         │
│  - Pre-built safety plans                   │
├─────────────────────────────────────────────┤
│  Existing Components (from Storybook)       │
│  - All atoms, molecules, organisms          │
│  - PhoneFrame wrapper                       │
│  - Event system (journey:action/data)       │
└─────────────────────────────────────────────┘
```

### Approach Options

**Option A: Enhanced Storybook**
Use Storybook's play functions and interaction testing to script walkthrough sequences. Keeps everything in the existing tool.
- Pro: No new infrastructure
- Con: Storybook isn't great for cinematic demos; clunky navigation chrome

**Option B: Standalone Demo App**
A single `demo.html` (or small Vite app) that imports components and journey definitions, adds a journey player, and renders in a PhoneFrame.
- Pro: Full control over presentation, no Storybook chrome, deployable to Vercel
- Con: Separate build, potential drift from Storybook

**Option C: Storybook + Demo Pages**
Keep component development in Storybook, but add dedicated demo pages (like the existing `angels.html`) that compose components into scripted walkthroughs.
- Pro: Best of both worlds — Storybook for dev, demo pages for presentation
- Con: Two rendering paths to maintain

**Recommended: Option B** — a standalone demo app. It's the most impressive for investor demos, gives full control over timing and transitions, and can be deployed as a shareable URL. The Storybook remains the component development environment.

---

## Success Criteria

A demo is ready when:
- [ ] Someone unfamiliar with Angels can watch the video and explain what the app does
- [ ] The emotional arc is felt, not just understood
- [ ] Every screen transition is smooth (no jarring jumps)
- [ ] Data flows visibly between screens (mood selection → journal prompt → streak count)
- [ ] The demo works on a phone-sized screen (or in PhoneFrame on desktop)
- [ ] It can be screen-recorded without editing for a clean 2-3 minute video