Sacha
43 lines
2.8 KiB
Markdown
43 lines
2.8 KiB
Markdown
# 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
|