haptika/onboarding-design-qa.md

Design QA — onboarding Haptika

Source visual truth

• Figma file: bzR4w4mYdTfM7DojW8n9g7
• Frames: 109:320, 109:349, 109:423, 109:526, 109:583, 109:650, 109:741
• Natural Figma viewport: 402 × 874
• The seven frames and the 337 × 369 silhouette asset were captured through the local Figma Desktop MCP before its access expired.

Rendered implementation

• Device: iPhone 17 Pro Max simulator, iOS 26.5
• Captured viewport: 368 × 800 optimized from the simulator render
• State: fresh install, full seven-step journey, completion, then relaunch with persisted completion
• Evidence:
  • qa/onboarding/step-1-welcome.jpg
  • qa/onboarding/step-3-assessment.jpg
  • qa/onboarding/step-6-experience.jpg
  • qa/onboarding/step-7-complete.jpg

Fidelity review

• Fonts and typography: system SF typography, light display headings, compact labels and cyan emphasis match the reference hierarchy. No clipping was observed.
• Spacing and layout rhythm: 20-point side margins, 56-point actions, 14-point radii and the seven-step rhythm match the measured frames. The layout expands proportionally on the 440-point Pro Max canvas.
• Colors and tokens: near-black navy canvas, blue-black cards, thin blue borders, muted gray copy and cyan active states match the Figma palette.
• Image quality: the welcome silhouettes are the original Figma node export, not a recreation. Standard UI symbols use the Phosphor React Native icon library.
• Copy and content: the seven Figma sections are present. “Précision clinique” was intentionally replaced by a non-medical claim.
• Interaction: continue actions, assessments, Apple Health choice, profile text input, year modal, experience choice, completion and persistence were exercised in the simulator.

Comparison history

1. Initial Pro Max render used the fixed 402-point frame width, producing excessive side margins. Fixed by allowing the layout to expand to 440 points while retaining the Figma 20-point gutters.
2. Simulator automation exposed duplicate fast taps skipping steps. Fixed with a 450 ms transition lock and retested from a clean install.
3. All seven screens fit without horizontal overflow or hidden primary actions. No visible P0/P1/P2 issue remains in the captured implementation states.

Blocking evidence gap

The Figma Desktop MCP stopped granting access after the implementation captures were taken and now asks for a paid Dev Mode seat/file permission check. A fresh source PNG could therefore not be saved beside the implementation screenshots, so the required combined side-by-side comparison input cannot be produced in this run.

Focused comparison was not completed for the same reason. The individual source frames and implementation captures were inspected, but the formal combined-input gate remains unavailable.

final result: blocked