← back to the gallery
Onboarding walkthrough v2 — invited paths first (2026-07-21)
Refreshed visual walk of Trustead's onboarding, invited-user paths first, mobile 390px primary + one 1280 desktop pass. Headless Chromium (--use-mock-keychain --password-store=basic).
Cookie banner: dismissed on every page. Consent was pre-seeded per browser context with the exact localStorage write the banner's own Accept button performs (cookie-consent-v1=true), plus a click-fallback. Zero shots contain the banner.
Where each screen was captured (and why)
- Prod (trustead.app): every signed-out screen — the real "Loren's Friends" group link, personal-invite landings, the pitch, the sign-up form up to the phone step.
- Staging (next.trustead.app, same main build): everything past the OTP gate.
- Why the split: the prod Clerk instance has test mode OFF — the reserved fictional numbers (+1 XXX 555-01XX, OTP 424242) are rejected at "Send verification code" (
form_param_format_invalid), so no signup can complete on prod without a real phone. Staging has test mode ON (long-standing QA setup). Staging got a mirror "Loren's Friends" group link (creator = staging Loren) so the group-context slides render with the real name.
- Turnstile/bot protection was NOT the blocker — the sign-up POST goes through; only the fictional phone is rejected.
Path 1 — invited via group link (PRIMARY, 68 shots)
https://trustead.app/join/link/caME_CE272jBSZ7rdZDO-qyOo_nmZmBe
✅ The "Loren's Friends" link loads the join page on prod — verified at 390 and 1280, signed out ("You've been invited by Loren Polster … via the Loren's Friends group"). Safe to paste into the launch email.
Walked: landing → "Give me the pitch" (all 5 slides) → Create an account → name+18 checkbox → phone → OTP → welcome takeover: E1 welcome → basics (payments-outside checkbox) → vouch-back "Anyone in Loren's Friends you'd vouch for?" (completed for real: Vouch → "I know them" → 1–3 years + guest-rating consent → vouch recorded in DB) → vouch-for-friends → member number slide (#9) → demo-content note → founding-member ask → "Pick your path" hub → all three branches: Traveling (J1–J4), Hosting (IH–I3), Learn-more tutorial (L-track, 13 slides) → group-link complete page ("Would you like to vouch back…") → group members page → first real screens (home, browse, network, proposals, profile; viewport + full-page).
Path 2 — personal invite, pre-vouched (33 shots)
- Minted via the app's own "Invite + pre-vouch a friend" wizard (name → Vouch/Vouch+ → years + consent → message + link). The wizard works end-to-end.
- Walked the invitee side: "You've been vouched for by …" landing → sign-up → OTP → welcome slides → "Would you like to vouch back for Mia? Mia vouched for you — vouching back makes the connection mutual." Pre-vouch verified end-to-end.
Fresh personal invite links for Loren to try (minted as Loren on prod, expire 2026-07-28 — 7-day default):
Both verified live (landing renders "You've been vouched for by Loren Polster"). Link 1's landing was view-tested; link 2 untouched. Landings don't consume the link — only completing signup does. Note: personal invite links expire after 7 days (DB default) — worth knowing for the launch email timing.
Path 3 — cold signup (edge, 17 shots)
Prod landing (logo intro + all 5 pitch slides) → sign-up → OTP → organic welcome: welcome → basics → member number → demo note → founding ask → path picker. No invited-only slides leak into the organic flow. Smooth.
FIXED on this branch (small, obvious — gate green)
- Real group invitees saw fake vouchable people. The "vouch for friends" slide seeded the preview demo fixtures (Alex Rivera, Sam Okafor, Lena Park, Tom Becker) for EVERY group invitee and only replaced them when the group members API returned 1+ people. A brand-new group — exactly the launch-week "Loren's Friends" case — returned 0, so real users saw fake people with working "Vouch for Alex" buttons. Now the demo set is preview-harness-only; real users with an empty group get the graceful empty-state line. (
OnboardingV6Takeover.tsx, + test updated to mount the preview path explicitly.)
- Grammar on the same slide: "Vouch for people the Loren's Friends knows?" → "Vouch for people Loren's Friends knows?", and row subtitle "In the Loren's Friends's network" → "In the Loren's Friends network".
ITERATE punch-list (invited paths first)
- Feedback bug-pill overlaps CTAs at 390px. The floating feedback widget (bottom-right) sits on top of the "Continue" button in the invite wizard, on home-feed cards, and on the network page stat cards. Also the member-number slide's copy says the Feedback button is in the bottom left corner — it renders bottom right.
- Vouch-back doesn't remember you already vouched. After vouching for Loren during onboarding, the group-link complete page still shows a fresh "Vouch for Loren" CTA (no vouched state).
- **Group members page shows *yourself* with a Vouch button, and not the creator. As the first joiner, the list contains only you (with a Vouch button for yourself); Loren (creator) isn't listed — but he's the person a new member would want to vouch for there.
- No "you joined the group" confirmation on the main path. Finishing the Traveling/Hosting track exits to the home feed; the join itself is recorded silently. A toast or a one-line confirmation would close the loop (the complete page's vouch-back only appears if the user lands on it directly).
- Prod can't be signup-tested end-to-end.** Clerk test mode is OFF on the prod instance and the prod Clerk secret lives only in Worker secrets. If full prod QA walks are wanted, enable test mode on the prod Clerk instance (owner's Clerk dashboard) — staging remains the workaround.
- Minor: network page stacks two near-identical headings ("Your network" intro + "Your Network" section).
- Minor: pitch slide 1's entrance animation takes ~4s before content is readable — first-time invitees on slow devices may see a mostly-empty screen briefly.
Test artifacts / cleanup state
- Staging test users (phones 555-0197/98/99, names *Walkertest*): left in place — staging is the QA environment; Mia's vouch → staging-Loren is a normal staging artifact. Staging also keeps the mirror group link (
qawalk_lorens_friends_20260721xx).
- Prod: no accounts created (impossible with test mode off). Two invite rows added as Loren (the fresh links above). Owner "link clicked" email notifications were muted during the walk via the notifier's own dedup ledger and re-armed afterwards — Loren received no walk-generated emails.
Runner
scripts/onboarding-walk-v2.mjs (playwright via npm i --no-save playwright, never a dep). Modes: path1-prod, path1-staging, resume <phone> <traveling|hosting|learnmore>, complete, mint, path2-prod, path2-staging, path3, desktop.