Homepage Three-Screen Prototype — Design QA

Source visual truth: docs/homepage-prototype-qa/source-direction.jpg plus the two supplied Douyin design references (bold business matrix and three-screen narrative funnel).
Implementation: http://127.0.0.1:5173/
Browser-rendered evidence:
- docs/homepage-prototype-qa/implementation-hero.png
- docs/homepage-prototype-qa/implementation-themes.png
- docs/homepage-prototype-qa/implementation-story.png
- docs/homepage-prototype-qa/implementation-mobile.png
Desktop viewport: 1440 × 1000 CSS px; screenshot 1440 × 872 px after app browser chrome, density 1×.
Mobile viewport: 390 × 844 CSS px; screenshot 390 × 838 px after app browser chrome, density 1×.
Source pixels: 2358 × 891. The source is directional rather than a 1:1 frame; comparison normalized by composition, hierarchy, density, palette, imagery, and narrative rhythm rather than pixel position.
State: default English homepage; hero slide 1; desktop and mobile initial view; second and third screens after scroll.

Full-view comparison evidence

Hero now uses a full-bleed, low-saturation travel image, oversized sans-serif statement, acid-green accent, concise explanation, and an explicit planning action. It is structurally distinct from the former split image/copy travel template.
The second screen uses an eight-item edge-to-edge business/experience matrix with consistent numbered cells and responsive 4/2/1-column behavior.
The third screen creates a clear narrative funnel: point of view → method → three-step explanation → trust statement.

Focused-region comparison evidence

Hero typography/crop checked independently at desktop and mobile widths.
Theme-card image crop, label contrast, and 2-row alignment checked at 1440 px.
Third-screen portrait crop, headline wrapping, supporting copy, and step borders checked at 1440 px.

Required fidelity surfaces

Fonts and typography: bold sans-serif display type deliberately replaces the previous classic serif-first homepage hierarchy; line breaks, weight, and mobile wrapping remain readable. Card and step headings use the same sans family to preserve the new direction.
Spacing and layout rhythm: three distinct near-viewport chapters; desktop margins align to a 1500 px max canvas; responsive layouts collapse cleanly without horizontal overflow.
Colors and tokens: deep forest, warm paper, off-white and acid green form a controlled four-color palette with adequate foreground contrast on the checked states.
Image quality: all visible assets are supplied high-resolution client imagery; crops are intentional, no placeholders, broken images, fake illustration, or stretched assets were observed.
Copy and content: English is the default. New headline and explanatory copy are specific to WanderQ, while the existing customer-approved content and downstream routes remain in place.

Primary interactions tested

Hero slideshow controls render and remain operable.
Primary “Design your journey” CTA resolves to /contact/.
Eight theme cards resolve to existing experience/contact routes.
Scroll-triggered entrances and hero parallax run without console warnings or errors.
Broken-image check returned zero failures.

Comparison history

P1: global heading CSS overrode the intended bold display face, leaving hero and matrix headings in serif. Fixed with scoped, higher-specificity homepage type rules. Post-fix evidence: all four implementation screenshots.
P2: theme-card and story-step headings still inherited the classic serif family. Fixed by explicitly applying the homepage sans family. Post-fix evidence: implementation-themes.png and implementation-story.png.
P2: mobile hero needed separate type and spacing constraints. Added 820 px and 540 px responsive rules; verified at 390 × 844 with no clipping of the main statement or CTA.

Findings

No actionable P0/P1/P2 issues remain in the three-screen prototype. The existing full-site header is intentionally retained so the concept can be judged inside the real product rather than as an isolated mock.

Follow-up polish

P3: if this direction is approved, tune the remaining homepage sections to continue the same display typography, dark/light cadence, and tighter content density.

final result: passed

4.3 KiB Raw Blame History Unescape Escape