Wireframe — Onboarding flow
Wireframe — Onboarding flow
Reading: POST /auth/callback (mock mode). Phase 8b scope per ADR-0006.
Scope note: This is the test-phase onboarding. No avatar picker, no class selection, no faction choice — those land in phase 11. The Walker starts in Plenny, joins the Unfinished Guild, gets the wooden ring. Fast, purposeful, Pratchett-warm.
Screen 1 — Splash
Duration: 2 seconds maximum. No interaction required; auto-advances to auth screen. Skip affordance: tap anywhere advances immediately.
┌─────────────────────────────────────────────┐│ ││ ││ ││ ╔═══════════╗ ││ ║ [CECH ║ ││ ║ SEAL ║ ││ ║ ICON] ║ ││ ╚═══════════╝ ││ ││ W A L K R P G ││ ││ ┌─────────────────────────────────┐ ││ │ [TAGLINE — placeholder] │ ││ └─────────────────────────────────┘ ││ ││ ││ ││ ││ ░░░░░░░░░░░░░░░░░░ (progress bar) ││ │└─────────────────────────────────────────────┘Copy table — Screen 1
| Slot | pl | en |
|---|---|---|
| App name | WalkRPG | WalkRPG |
| Tagline | [TODO narrative-designer: short punchy tagline, max 40 chars PL, Cech motto flavour] | [TODO narrative-designer: EN equivalent] |
| Progress hint | (no text — visual only) | (no text — visual only) |
Interaction notes
- Progress bar animates over 2 seconds. Tapping anywhere skips to auth.
icon.cech-sealdisplayed at ~80dp diameter, center of screen.- App name uses
--type-display, color--color-region-plennyon--color-bg. - Tagline uses
--type-body-lg, color--color-on-surface-muted.
Accessibility — Screen 1
- One-handed: no action required.
- Glance: single focal point (seal + name). PASS.
- Tap target: entire screen is tap target. PASS.
- Screen reader: announce “WalkRPG — [tagline]” then auto-advance.
- No color-only information.
- Haptic: none (passive screen).
Screen 2 — Mock auth
Phase 8b only. AUTH_MODE=mock. No Firebase SDK, no OAuth redirect — just email + display name entry. Production auth (Google Sign-In + Apple Sign-In) replaces this entirely at production migration.
┌─────────────────────────────────────────────┐│ ← (no back — this is entry point) ││ ││ ┌───────────────────────────────────────┐ ││ │ [CECH SEAL — small, 48dp] │ ││ │ WalkRPG │ ││ │ │ ││ │ [SCREEN TITLE] │ ││ └───────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ [EMAIL LABEL] │ ││ │ ┌───────────────────────────────┐ │ ││ │ │ [email protected] │ │ ││ │ └───────────────────────────────┘ │ ││ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ [DISPLAY NAME LABEL] │ ││ │ ┌───────────────────────────────┐ │ ││ │ │ Wanderer-9f3a2c (generated) │ │ ││ │ └───────────────────────────────┘ │ ││ │ [HINT — editable, max 40 chars] │ ││ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ [TEST PHASE NOTICE — subtle] │ ││ └─────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────┐ ││ │ [PRIMARY CTA] │ ││ └─────────────────────────────────────┘ ││ │└─────────────────────────────────────────────┘Copy table — Screen 2
| Slot | pl | en |
|---|---|---|
| Screen title | Zaloguj się | Sign in |
| Email label | Adres e-mail | Email address |
| Display name label | Nazwa Walkera | Walker name |
| Name hint | Twoja nazwa widoczna dla innych (do 40 znaków) | Your name visible to others (up to 40 chars) |
| Test phase notice | Tryb testowy — uproszczone logowanie | Test mode — simplified sign-in |
| Primary CTA | Zacznij Wyprawę | Start the Journey |
Interaction notes
- Email field:
type=email, autocomplete,inputmode=email. - Display name field: prepopulated with server-generated
Wanderer-<6hex>. Editable inline. Character counter shows when 10 chars remain (e.g. “38/40”). - Primary CTA: disabled until email is valid (format check client-side). Enabled state:
--color-region-plennybackground,--color-bgtext. Disabled state:--color-disabledbackground. - On submit: spinner in CTA, no second tap. On success: advance to Screen 3.
AUTH_MODE=mockbanner is for designer/developer reference in this doc; it is NOT displayed to testers. The test phase notice (“Test mode — simplified sign-in”) IS shown to testers so they understand why there is no OAuth button.- Production swap: replace Screen 2 entirely with Google Sign-In and Apple Sign-In buttons. Screen 3 (walker creation) remains, called on
isFirstLogin: truefrom the auth response.
Accessibility — Screen 2
- One-handed: all inputs reachable in bottom 75% of screen.
- Glance: screen title is single focal point. Form is visible below.
- Tap targets: input fields minimum 48dp height. CTA 56dp height.
- Screen reader: announce label before input. Error state announces inline.
- Font scale 200%: email and name labels wrap; CTA grows to two lines if needed (“Zacznij / Wyprawę” — acceptable).
- No haptic on this screen (form entry).
Screen 3 — Walker creation (minimal)
Shown only on isFirstLogin: true. Confirm display name, confirm starting region (Plenny — locked in test phase), acknowledge Unfinished Guild membership.
┌─────────────────────────────────────────────┐│ ← [BACK to auth — escape if typo] ││ ││ ┌───────────────────────────────────────┐ ││ │ [SCREEN TITLE] │ ││ │ [SUBTITLE] │ ││ └───────────────────────────────────────┘ ││ ││ ┌────────────────────────────────────────┐ ││ │ [WALKER NAME DISPLAY] │ ││ │ Wanderer-9f3a2c [EDIT ✏] │ ││ └────────────────────────────────────────┘ ││ ││ ┌────────────────────────────────────────┐ ││ │ [REGION LABEL] │ ││ │ ╔══════════════════════════════════╗ │ ││ │ ║ ████ Plenny ║ │ ││ │ ║ [REGION DESCRIPTION] ║ │ ││ │ ╚══════════════════════════════════╝ │ ││ │ [LOCK NOTE — region fixed phase 9] │ ││ └────────────────────────────────────────┘ ││ ││ ┌────────────────────────────────────────┐ ││ │ [GUILD LABEL] │ ││ │ ╔══════════════════════════════════╗ │ ││ │ ║ [CECH SEAL] [GUILD NAME] ║ │ ││ │ ║ [GUILD HINT] ║ │ ││ │ ╚══════════════════════════════════╝ │ ││ └────────────────────────────────────────┘ ││ ││ ┌────────────────────────────────────────┐ ││ │ [PRIMARY CTA] │ ││ └────────────────────────────────────────┘ ││ │└─────────────────────────────────────────────┘Copy table — Screen 3
| Slot | pl | en |
|---|---|---|
| Screen title | Twój Walker | Your Walker |
| Subtitle | [TODO narrative-designer: 1 sentence warm intro — Cech wooden ring moment, max 60 chars PL] | [TODO narrative-designer: EN equivalent] |
| Walker name display label | Nazwa | Name |
| Edit button label | (icon only — accessible label: Zmień nazwę / Edit name) | (icon only) |
| Region label | Region startowy | Starting region |
| Region name | Plenny | Plenny |
| Region description | [TODO narrative-designer: 2-line flavour, max 80 chars PL — parchment/bureaucratic tone] | [TODO narrative-designer: EN equivalent] |
| Region lock note | Zmiana regionu dostępna po zamknięciu bety | Region selection available after closed beta |
| Guild label | Twoja gildia | Your guild |
| Guild name | Cech Niedokończonych Wypraw | Unfinished Guild |
| Guild hint | [TODO narrative-designer: 1-line Guild motto or flavour, max 50 chars PL] | [TODO narrative-designer: EN equivalent] |
| Primary CTA | Zarejestruj Walkera | Register Walker |
Interaction notes
- Region card uses
--color-region-plennyas left border (4px) and region color chip (16x16dp swatch inside card). - Guild card uses
icon.cech-sealat 32dp,--color-faction-unfinished-guildleft border. - Edit name inline: tapping the name row opens the display name field in-place (inline edit, not a new screen).
- CTA submits no additional API call — it advances using the auth response already received. Walker row was created by
/auth/callback. This screen is purely UI confirmation. - Back is safe: tapping back returns to auth screen. Auth state is not lost (JWT is already held in memory).
Accessibility — Screen 3
- One-handed: all elements in bottom 70% of screen. CTA is bottom-anchored.
- Glance: Walker name is dominant read. Region and guild are secondary confirmation.
- Tap target: Edit button is icon-only — must have invisible 48dp hit target wrapping the icon.
- Screen reader: Region card and Guild card are focusable groups. Announce group label then contents.
- Font scale 200%: region description and guild hint wrap; CTA grows. Cards expand vertically — do not clip.
Screen 4 — Home screen with tutorial overlay
Shown on first session arrival at the home screen after walker creation. A 3-hotspot tutorial sequence introduces the three main panels. Hotspot order: streak ribbon (1) → active quest pill (2) → tree tab (3). Dismissable after hotspot 3 or via “Skip” at any time.
┌─────────────────────────────────────────────┐│ ╔══════════════════════════════════════╗ ││ ║ ░░░░ REGION CARD — Plenny ░░░░░░ ║ ││ ╚══════════════════════════════════════╝ ││ ││ ┌──────────────────────────────────────┐ ││ │ ★ STREAK: Day 1 [BADGE] │ ◄ hotspot 1│ └──────────────────────────────────────┘ ││ ╔══════════════════╗ ││ ║ [1] Streak ║ tooltip ││ ║ [TOOLTIP COPY] ║ ││ ╚══════════════════╝ ││ ││ ┌──────────────────────────────────────┐ ││ │ ◉ Q001 — First Road [Beat 1/5] │ ││ └──────────────────────────────────────┘ ││ ││ ┌──────────────────────────────────────┐ ││ │ [FACTION STRIP — 5 cells] │ ││ └──────────────────────────────────────┘ ││ ││ ░░░░░░░░░░░░░░ OVERLAY SCRIM ░░░░░░░░░░░░ ││ ││ ┌──────────────────────────────────────┐ ││ │ Skip tutorial (1 of 3) │ ││ └──────────────────────────────────────┘ ││ ││ ┌────┬────┬────┬────┐ ││ │Home│Tree│ Q │Gld │ ← bottom tab bar ││ └────┴────┴────┴────┘ │└─────────────────────────────────────────────┘
Hotspot 2 (quest pill highlighted, tooltip below): tooltip: "Active quest — track your current mission"
Hotspot 3 (Tree tab in bottom bar highlighted): tooltip: "Tree — spend points to build your Walker"Copy table — Screen 4
| Slot | pl | en |
|---|---|---|
| Hotspot 1 tooltip title | Seria kroków | Step Streak |
| Hotspot 1 tooltip body | [TODO narrative-designer: 1 line — what streak means, Pratchett tone, max 50 chars PL] | [TODO narrative-designer: EN] |
| Hotspot 2 tooltip title | Aktywne zadanie | Active quest |
| Hotspot 2 tooltip body | [TODO narrative-designer: 1 line, max 50 chars PL] | [TODO narrative-designer: EN] |
| Hotspot 3 tooltip title | Drzewo umiejętności | Skill tree |
| Hotspot 3 tooltip body | [TODO narrative-designer: 1 line, max 50 chars PL] | [TODO narrative-designer: EN] |
| Skip button | Pomiń samouczek | Skip tutorial |
| Progress indicator | (1 z 3) | (1 of 3) |
Interaction notes
- Overlay scrim:
rgba(0,0,0,0.7)over entire screen except the highlighted hotspot element (which is punched out via clip path). - Hotspot highlight: 4dp
--color-region-plennyborder ring around the target element. - Advancing: tap the highlighted element OR the tooltip area OR a “Next” button in the tooltip (to be added if user testing shows tap-confusion).
- Skip: dismisses overlay immediately, persists to local storage
tutorial_complete: true. - After hotspot 3: overlay dismissed, normal home screen.
Accessibility — Screen 4
- One-handed: Skip button is bottom-anchored, within thumb reach.
- Glance: tooltip is in the center of the scrim, high contrast, large text.
- Screen reader: when overlay is active, focus is trapped to the overlay. Reads: “[hotspot name]: [tooltip body]. Tap to continue.”
- Hotspot tap target: inherits the underlying element’s 48dp minimum. Tooltip tap area is additionally 48dp height.
- Haptic: light tick on each hotspot advance.
- Users who skip see no functional penalty — all information is available via normal UI.
Screen 5 — First walk prompt (optional)
Shown after tutorial overlay is dismissed (or on day 1 if streak is still 0). Motivates the first step attestation.
┌─────────────────────────────────────────────┐│ ││ ┌───────────────────────────────────────┐ ││ │ [icon.footprint × 3, animated] │ ││ └───────────────────────────────────────┘ ││ ││ ┌───────────────────────────────────────┐ ││ │ [PROMPT TITLE] │ ││ │ │ ││ │ [PROMPT BODY] │ ││ └───────────────────────────────────────┘ ││ ││ ┌───────────────────────────────────────┐ ││ │ Step counter: 0 / 10 │ ││ │ ██░░░░░░░░░░░░░░░░░░░░░░ (progress) │ ││ └───────────────────────────────────────┘ ││ ││ ┌───────────────────────────────────────┐ ││ │ [SKIP CTA] │ ││ └───────────────────────────────────────┘ ││ │└─────────────────────────────────────────────┘Copy table — Screen 5
| Slot | pl | en |
|---|---|---|
| Prompt title | Zrób pierwszy krok | Take your first step |
| Prompt body | [TODO narrative-designer: 2 sentences, Cech ring received, every step counts, max 100 chars PL] | [TODO narrative-designer: EN] |
| Step counter label | 0 / 10 kroków | 0 / 10 steps |
| Skip CTA | Zrób to później | Do this later |
Interaction notes
- Step count: reads from the device health pedometer in real time (not via
/step/ingest— that happens at end-of-session sync). This is a local preview. - Progress bar animates as steps increment.
- At 10 steps: brief celebration animation, then auto-advance to home screen with streak ribbon updated to Day 1.
- Skip: advances to home screen. No streak update (user hasn’t walked). Prompt reappears next cold start until first attestation lands.
Accessibility — Screen 5
- One-handed: all elements centered, Skip CTA at bottom.
- Glance: step counter fraction is the dominant readable element.
- Screen reader: step counter announced on increment: “3 of 10 steps”.
- Haptic: light tick on each 1-step increment (can be high-frequency — may be toggled to “every 5 steps” in settings to avoid vibration fatigue).
Accessibility — full onboarding flow
Walking-specific baseline answers:
| Check | Result |
|---|---|
| One-handed while walking | PASS — all primary actions in bottom 60%, single thumb reach. Screen 5 is the only screen likely used while actually walking; step counter is passive. |
| Glance ≤ 2 seconds | PASS — each screen has a single dominant read target. |
| Tap target ≥ 48dp | PASS — all interactive elements meet the minimum. |
| Color contrast ≥ 4.5:1 body | PASS — see design-system.mdx contrast table. |
| Font scale 200% | PASS — all containers grow vertically; CTA labels wrap rather than clip. |
| Audio/haptic alternatives | PASS — hotspot advances, step increments, and quest completion have haptic events. |