Beta Tester Walkthrough Screens — Design Artifact
Date: 2026-06-11 Issue: #3403 (Beta Tester Rubric) + Beta dashboard landing (#3505) Status: Ready for feature-developer
What this is
4-screen walkthrough that runs before the survey form in the closed-beta
tester flow. Current stub at /beta/walk/[token]/dashboard/page.tsx shows a
welcome header and a minimal survey; these screens replace the stub welcome
message and gate the survey.
Flow:
Invite email → NDA ack → [Screen 1] → [Screen 2] → [Screen 3] → [Screen 4] → Survey → Submit
Screens
| # | File | Purpose | CTA destination | Reading time |
|---|---|---|---|---|
| 1 | screen-1-welcome.html |
Welcome / NDA confirmed / structure-gap thesis / beta expectations | Screen 2 | ~1 min |
| 2 | screen-2-product-tour.html |
Top 3 differentiators with annotated in-app visuals | Screen 3 | ~2 min |
| 3 | screen-3-demo.html |
3-step interactive annotated walkthrough of IC structure enforcement | Screen 4 | ~2 min |
| 4 | screen-4-the-ask.html |
Time commitment / what to look for / survey preview / dual CTA | App or Survey | ~30 sec |
Screenshots
All 8 captured at commit time:
| Screen | Desktop (1280×800) | Mobile (390×844) |
|---|---|---|
| 1 Welcome | screenshots/screen-1-welcome-desktop.png |
screenshots/screen-1-welcome-mobile.png |
| 2 Product tour | screenshots/screen-2-product-tour-desktop.png |
screenshots/screen-2-product-tour-mobile.png |
| 3 Demo | screenshots/screen-3-demo-desktop.png |
screenshots/screen-3-demo-mobile.png |
| 4 The Ask | screenshots/screen-4-the-ask-desktop.png |
screenshots/screen-4-the-ask-mobile.png |
Proposed route structure
/beta/walk/[token]/screen/1 ← Screen 1 (replaces current dashboard stub welcome)
/beta/walk/[token]/screen/2 ← Screen 2
/beta/walk/[token]/screen/3 ← Screen 3
/beta/walk/[token]/screen/4 ← Screen 4
/beta/walk/[token]/survey ← Survey (existing rubric per #3403)
The [token] route segment already exists. Feature-developer adds screen/[n]
as a nested route — either a shared layout component that swaps content by n,
or four distinct page files (simpler for CE integration).
Redirect rule from current /dashboard: The existing dashboard route
should be retired or redirected to /screen/1 for new tokens, and directly to
/survey for tokens that already completed the walkthrough (store
walkthrough_completed_at on the beta_tester record).
Progress indicator
Each screen shows a 5-step pill progress bar (Welcome / What Raxx Does /
See It In Action / The Ask / Feedback). The active step is bronze
(#B08D57), completed steps are moss (#5B8C5A) with a checkmark, idle
steps are bordered cream.
Progress fill line between dots is drawn with width as a percentage of the
container:
| At screen | Fill width |
|---|---|
| Screen 1 | 0% |
| Screen 2 | 25% |
| Screen 3 | 50% |
| Screen 4 | 75% |
| Survey | 100% |
Skip / exit paths
Every screen has a visible escape hatch — guardrail from
feedback_signup_never_blocks. Nothing blocks a tester from reaching the app
or the survey at any time:
- Screen 1: "Skip tour, take me to the app" link (top) — goes to
/app - Screen 2: Back link on left of CTA row
- Screen 3: Back link + the tab navigator never locks forward/back
- Screen 4: Dual CTA — "Start using Raxx" (app) AND "Quick feedback first" (survey)
Feature-developer should ensure the skip link on Screen 1 is visible without scrolling on mobile. Current design has it in the CTA row which requires scrolling on 390px. Recommended adjustment: move skip link to the progress-strip row, right-aligned, on mobile.
Interaction: Screen 3 tab navigator
Screen 3 has a 3-step tabbed demo (Define → Trade → Review). The tab state is driven by inline JavaScript (no framework dependency). Feature-developer should:
- Lift this to React state (e.g.
useState<1|2|3>(1)) - Preserve tab position on back-navigation (store in URL hash or session state)
- The "Almost done" main CTA appears only when Step 3 is active — keep this behavior
Color tokens used
All from existing CE token set. No new tokens introduced.
| Token | Hex | Usage |
|---|---|---|
--ce-ink |
#0B0F14 |
Body text, header bg |
--ce-cream |
#F7F5F0 |
Page background |
--ce-sand |
#EDE9E2 |
Progress strip, secondary blocks |
--ce-moss |
#5B8C5A |
CTA buttons, progress done state, pass badges |
--ce-bronze |
#B08D57 |
Eyebrows, progress active state, feature numbers |
--ce-border |
#D9D4CC |
All card/rule/divider borders |
--ce-muted |
#6b7280 |
Secondary text, skip links |
Dark annotation panels (--ce-ink-2 = #1a1f2e) used for the in-app UI
mockups inside Screen 2 and Screen 3.
Copy guardrails applied
- No broker/vendor names anywhere (per
feedback_no_backend_branding) - No forward-looking framing — all retrospective ("what Raxx surfaces from your own history", "what happened", not "what will happen")
- Structure gap thesis in plain language on Screen 1
- "Raxx is the strategy layer" framing consistent throughout
- NDA acknowledgment surfaced on Screen 1 (non-blocking, informational)
Open questions for operator
-
App handoff URL on Screen 4 — "Start using Raxx" currently points to
/app. Is this the right destination for beta testers? Or a specific onboarding flow inside the app? -
Screen 3 interactive vs static — Screen 3 is designed as a tabbed annotated walkthrough (no live data). Is a fully interactive demo of the actual IC builder preferred instead? That would require the beta token to be usable in the live app sandbox, which may be out of scope for Phase 1.
-
"More follow-up" mention on Screen 4 — The copy says "we'll send follow-up questions as you use it over the next few weeks." Is the follow-up survey flow already scoped? If not, this copy can be softened.
-
NDA reference wording — Screen 1 says "verbatim quotes may be used in marketing with your permission (we'll ask first)." Confirm this matches the NDA language that was signed.