Minimum for VIPs Today
Scenes 2, 3–6, 8–10 are clickable end-to-end. VIPs can land on Welcome,
build their Force Field, send a spark, and flip through the Onboarding Bingo with role
switching and Square One. Everything else is walkthrough-only for now.
FFH Onboarding — Storyboard
The journey from first click to force field live. For VIP Review.
🖥️ Desktop
📱 Mobile
📊 Tablet
🟢 CLICKABLE TODAY · 🟡 PARTIAL · ⚪ COMING
Version 2026-04-20
Chapter 1
Arrival
How the story begins — a doorway, a welcome, and the first breath of "why."
01
What they see
A minimalist splash with the FFH Force Field emblem pulsing softly. One-line prompt:
"You're the gift. Let's begin." No forms, no noise — just an open door.
What they do
Arrive via QR code at a community event, invite link from a champion, or ffh.com CTA.
Tap Start or scan.
📱 MobileQR scan default; full-screen splash
📊 TabletCentered emblem, large tap target
🖥️ DesktopDirect link; subtle motion backdrop
Ties to: Public landing / ffh.com entry points
02
What they see
Dr. Rob's "Welcome" narrative screen on a navy narrative stage — emotional orientation
to why they're here. A warm, cinematic moment, not a form.
What they do
Read the gift framing, press "Start building my force field →".
📱 MobileFull-screen narrative; single CTA
📊 TabletCentered stage; breathing room
🖥️ DesktopCinematic dark backdrop, 920px stage
Ties to: Deploy Ready/academy-welcome/ Act 0/1
Chapter 2
Building Your Force Field
Eight small choices stack into a personalized protective field — the user's first tangible "thing I made."
03
What they see
A soft grid of goal tiles — sleep better, quit smoking, move more, and more.
When tapped, the tile locks into position 1 of the Force Field with a gentle animation.
What they do
Pick what "healthier" means to them. Single tap. Advances automatically.
📱 Mobile2-column grid, swipeable
📊 Tablet3-column grid with illustrations
🖥️ Desktop4-column grid, hover lift
Ties to: academy-welcome/ Act 2 Step 1
04
What they see
Three name fields with a soft prompt: "Who would you show up for?"
Their answers seed a quiet, powerful moment later — the Share It spark.
What they do
Add the names of 1–3 people they'd show up for. Tap next.
📱 MobileStacked inputs, native keyboard
📊 TabletSide-by-side with preview chips
🖥️ DesktopThree inputs in a row, autofocus
Ties to: academy-welcome/ Act 2 Step 4 · feeds Scene 13 Share It
05
What they see
A preview message rendered from their earlier goal ("I'm starting a force field around
my sleep…"). Two buttons: Send the spark 💫 (gold) or Maybe later.
What they do
Click Send the spark → fires submitLiveItAction({type:'share_it_sparked'})
and auto-advances to the celebration.
📱 MobileFull-width message card; sticky CTA
📊 TabletPreview + buttons side-by-side
🖥️ DesktopMessage rendered like a soft chat bubble
Ties to: academy-welcome/ Act 2 Step 8 · LIVE It tracker
06
What they see
A rippling gold square pulsing outward. Headline: "Your force field is live."
They're welcomed by name. Two buttons: Go to my Dashboard → and Review my Force Field.
What they do
Pause in the glow, then pick their next move.
📱 MobileFullscreen celebration, reduced motion fallback
📊 TabletCentered emblem, two large buttons
🖥️ DesktopRipple animation on dark stage
Ties to: academy-welcome/ Act 4 celebration
Chapter 3
The Fork — Free vs Ambassador
The path splits. Either track lands on a Bingo card — but the card they land on depends on who they are.
07
Free Member
Universal 16-tile Bingo
Signup tier = Free. Lands on the default prevention card with Square One at center.
Their onboarding focuses on self-care + community joining.
Ambassador
Training Bingo
Signup tier = paid / affiliated. Lands on the training card: Foundation, 4 Key
Conversations, the Pledge, Shadowing, and Tough Moments.
What they see
Platform detects signup tier OR user picks role on the Bingo page via a toggle header.
Whichever they pick, the whole card re-themes instantly.
What they do
Usually nothing — they just arrive on the right card. Role switcher is always available in the header.
Role picker works · Free vs paid gating not yet live
Chapter 4
Your Onboarding Card
Sixteen tiles. One locked center. A clear "start here." The game shape everyone already knows.
08
What they see
The universal 16-tile grid. Square One locked at center (gold: Take Care of Yourself First).
15 surrounding tiles numbered 1–15. Tile #1 highlighted with "Start here →".
What they do
Tap Square One first (the gift to themselves), then work through tile #1 and onward.
📱 MobileScrollable 4×4 grid, tile tap = modal
📊 TabletFull grid visible, side panel for details
🖥️ DesktopGrid + role header + progress rail
Ties to: Deploy Ready/ffh-onboarding-bingo/
09
What they see
Same grid shape; different tile content — training-focused:
Force Field Foundation, 4 Key Conversations, Take the Ambassador Pledge,
Shadow an Experienced Ambassador, Handling Tough Moments. Role header shows:
"You are: Ambassador | or switch to: Leader · Chamber Member · Medicaid Advantage Provider".
What they do
Switch roles from the header if needed; tap training tiles in recommended order.
📱 MobileRole switcher = bottom sheet
📊 TabletInline role toggle above the grid
🖥️ DesktopRole pill row, keyboard-accessible
Ties to: ffh-onboarding-bingo/ role-aware mode
Chapter 5
The New Member Challenge
Four tiles, one afternoon — the minimum viable journey that proves FFH works.
10
What they see
Gold center tile opens into a gentle reflection flow. A prompt, a breath, a short
acknowledgement — then a 25-coin reward with a soft chime.
What they do
Tap Square One, work through the 3-minute reflection, close the modal. Logged to LIVE It.
📱 MobileFull-screen modal, one prompt per step
📊 TabletCentered 60% modal
🖥️ DesktopModal + subtle gold glow
Ties to: Square One modal · 25 coins · LIVE It. 3-min content is placeholder.
11
What they see
A light, elevator-pitch video about why FFH exists. Plays inline on every device.
Tile marks complete, 15 coins drop in.
What they do
Press play. Watch ~3 min. Close.
📱 MobileNative inline player, portrait safe
📊 Tablet16:9 inline, autoplay muted
🖥️ DesktopEmbedded in tile modal
Tile exists · video asset not yet embedded
12
What they see
An Ambassador + Leader tile. Four challenge templates: Steps, Hydration, Sleep,
Journaling. A name-your-team field, invitee picker pre-filled from the Inner Circle,
and a leaderboard seeded live.
What they do
Pick a 4-week challenge, name the team, invite up to 5 people from Step 4, confirm.
📱 MobileStepwise sheet — pick, name, invite, launch
📊 TabletTwo-pane: templates + setup
🖥️ DesktopFull form + live leaderboard preview
Ties to: vip-leagues engagement backbone. Engine + leaderboard wiring coming.
13
What they see
A prefilled spark message (from Step 8) with the Inner Circle already listed as
recipients. A single warm CTA: "Send the spark 💫".
What they do
Pick one person from their inner circle, tap send.
📱 MobileMessage preview, hand off to native share
📊 TabletPreview + recipient chips
🖥️ DesktopMessage + outbound channel selector
Spark click works · outbound messaging not yet wired
Chapter 6
Arrival on the Dashboard
Where the onboarding journey rests — and the ongoing story begins.
14
What they see
All onboarding actions visible at a glance: 4 tiles complete · 90 coins earned ·
21 minutes invested · 1 spark sent · 1 team challenge launched.
Every number traces back to a real action.
What they do
Scan their impact. Click a card to dive back in.
📱 MobileStacked stat cards + activity feed
📊 Tablet2×2 stat grid + feed sidebar
🖥️ DesktopHero stats + recent activity columns
Dashboard exists at /demo-dashboard/ · doesn't yet read from the unified live_it_actions pipe
15
What they see
A floating action button bottom-right on every page. Tap it and up pops Coach Lucy AI,
Dr. Rob AI, a notes pad, and a feedback channel — all in one place.
What they do
Ask, jot, or vent. The Clipboard follows them everywhere — including this page. Try it.
📱 MobileBottom-right FAB, bottom-sheet drawer
📊 TabletRight-side slide-in panel
🖥️ DesktopPersistent FAB + docked panel
Ties to: ffh-notepad-widget.js (live on this page)
16
What they see
Returning user: Bingo remembers their progress. Dashboard shows a streak.
Community feed is alive. The team challenge progress bar has moved.
What they do
Come back. Keep going. Invite one more person.
📱 MobileDaily nudge push notification
📊 TabletStreak card + feed preview
🖥️ DesktopStreak + leaderboard + activity columns
Persistence + streak engine coming