Home / Onboarding / Demo spec
Download raw .md

Demo spec — Onboarding before/after ("Stride" running app)

Single self-contained interactive HTML file: demo.html in this folder. The on-screen artifact for Act Four of the onboarding script: BEFORE and AFTER onboarding flows (not single screens) for a fictional running app, walkable by the viewer.

Layout

Soft neutral page background (fresh, athletic feel — soft warm grey with a faint coral tint; NOT the navy of the paywall demo — different fictional app, different identity). Two iPhone frames side by side (stack on mobile), labels underneath: "BEFORE · 17 screens, 0 payoff" / "AFTER · 6 screens, 1 receipt". Each phone is a click-through flow: tapping the primary button (or dots below the phone) advances screens; a small step indicator under each phone shows position (e.g. "3 / 17" vs "2 / 6"). Add back/forward chevrons under each phone.

The app

"Stride" — running coach app. Inside-screen aesthetic: clean light UI, coral/orange primary (#FF5A36-ish), dark slate text, simple inline-SVG icons. Both flows end in the same product.

BEFORE flow (compress to ~8 representative screens of the nominal 17; label skipped ranges, e.g. a screen that says "…questions 5–13…" faded)

  1. Signup wall: name / email / password / confirm password, "Create account" — before any value
  2. Q1 "What's your favorite running shoe brand?" (no progress indicator, no skip) — the pointless question
  3. Q2 "What's your age range?" (no progress, no skip)
  4. Faded interstitial card: "…10 more questions…" (visual shorthand)
  5. Q14 "How did you hear about us?" (no progress, no skip)
  6. Raw iOS notification permission dialog (system-style alert, no context)
  7. "You're all set!" generic confetti
  8. Empty dashboard: "No runs yet" placeholder Interactions: fields are typeable (dummy), buttons advance. The tedium should be felt.

AFTER flow (6 screens)

  1. Welcome: logo + "Let's build your first week" + "Start" (no account ask; small "Log in" link)
  2. Q1 of 3 — THE COMMITMENT QUESTION: "What's your goal?" 3 tappable cards (Run my first 5K / Get consistent / Clear my head), progress "1 of 3", "Skip" top-right
  3. Q2 of 3 — "Which days work best?" (day chips, multi-select), "2 of 3", Skip
  4. Q3 of 3 — "What time do you usually have free?" (Morning/Lunch/Evening chips), "3 of 3", Skip
  5. PAYOFF SCREEN (the completion artifact — make this the hero): "Your Week 1 plan" — their goal quoted at top ("Goal: Run my first 5K"), three run cards on their chosen days/time, difficulty "Beginner-friendly". Primary CTA "Start Day 1". Secondary: "Save my plan" (account ask, politely, at the END — reframed as save mechanism)
  6. Notification primer: "Tuesday, 7:00 AM — want a reminder before your first run?" quoting their chosen day/time, buttons "Remind me" / "Not now" (custom primer, NOT system dialog) Interactions: the answers chosen on screens 2–4 MUST actually appear on screens 5–6 (goal text, day chips, time). This "answers visibly used" mechanic is the whole point of the demo — implement it for real with JS state.

Annotation layer

"Show annotations" toggle (default ON). Numbered pins matching the script's Act Four order: 1 signup timing (toll booth → save mechanism), 2 question count/skip/progress, 3 the commitment question (self-prediction), 4 the payoff screen (IKEA completion artifact), 5 the primed permission ask, 6 the counter. Pin cards cite ONLY these stats, verbatim: - Duolingo reports moving signup later raised DAU ~20% (First Round interview; company-published) - One intent question raised car purchases 3.3% vs 2.4% across 40,000+ households (Morwitz et al. 1993) - Beach study: 19/20 intervened after being asked one question vs 4/20 (Moriarty 1975) - Builders bid 63% more for boxes they assembled — effect vanishes without completion (Norton, Mochon & Ariely 2012) - Our audit (n=35 flows, top iOS apps, Aug 2026): only 25% of quiz flows allow skipping; 90% of notification asks are primed; 29% make accounts deferrable - Quiz→plan→paywall hostage sequence: ~1 in 6 flows, nearly all wellness apps (our audit)

Footer

"Built for the Build With Kris video 'The Onboarding Quiz Isn't Really Asking For Your Data' — sources in the video description." Scoreboard: BEFORE 17 screens · 0 questions used · 0 receipts | AFTER 6 screens · 3 questions visibly used · 1 receipt.

Craft bar

Same as paywall demo: fully self-contained (no external anything), system fonts, inline SVG, responsive, premium showcase feel, page chrome adapts to prefers-color-scheme (screens stay light — it's a morning-run app). The two flows must read instantly as the same product with different choices.