WanderQ-Web2.0/design-qa.md

# Design QA — 贵州体验三主题合并

## Comparison target

- source visual truth path: `/var/folders/zy/v2mtllmj38j5wnn5vqmsnwfr0000gn/T/codex-clipboard-88de526f-12fb-4cce-9b9e-477b59045f0c.png`
- implementation route: `http://127.0.0.1:5175/`
- implementation screenshot path: `/tmp/wanqu-home-three-experiences-reference-state.png`
- focused side-by-side comparison: `/tmp/wanqu-three-experience-comparison.png`
- supporting screenshots:
  - `/tmp/wanqu-home-desktop-top.png`
  - `/tmp/wanqu-experiences-page-desktop-final.png`
  - `/tmp/wanqu-home-mobile-top.png`
  - `/tmp/wanqu-home-mobile-cards.png`
- viewport: desktop `1512 × 900` CSS px; mobile `390 × 844` CSS px
- source pixels: `1512 × 900`
- implementation comparison pixels: `1512 × 900`
- density normalization: both comparison images were inspected at equal pixel dimensions and scaled equally in the side-by-side composite; no device frame was included
- state: default English locale, three-theme homepage section; desktop and mobile default states; mobile full-menu open state also tested

## Findings

No actionable P0, P1, or P2 issues remain.

- Fonts and typography: the implementation keeps WanderQ's established Assistant/Georgia hierarchy instead of copying the reference's generic Chinese sans face. Category hierarchy, optical weight, wrapping, and small-label tracking remain clear at desktop and mobile sizes.
- Spacing and layout rhythm: the reference's centered heading and equal three-column card rhythm are retained. Desktop cards use the same near-full-width composition and equal heights; mobile collapses to one card per row without horizontal overflow.
- Colors and visual tokens: the dark forest, medium green, and light moss card sequence follows the source while using the site's existing cream background and acid-green brand accent. Text contrast is readable across all three tones.
- Image quality and asset fidelity: all three cards use existing high-resolution project photography with matched subjects—cave, living craft, and waterfall landscape. Crops remain sharp and intentional; no placeholder or synthetic icon treatment is present.
- Copy and content: the three categories are explicit and non-overlapping. English copy is longer than the Chinese source, but the hierarchy and card proportions remain stable.
- Interaction and accessibility: card hover/focus treatment, anchor navigation, mobile menu, legacy route fallback, and bilingual navigation were tested. No broken images, horizontal overflow, browser errors, or warnings were observed.

## Full-view comparison evidence

The homepage desktop capture confirms the simplified five-section funnel: hero, three Guizhou experiences, WanderQ method, local team, and final inquiry CTA. The merged experience-page capture confirms exactly three top-level categories and no separate Routes catalogue in the public navigation.

## Focused region comparison evidence

`/tmp/wanqu-three-experience-comparison.png` places the supplied three-card source and the implementation in the same comparison image. The implementation matches the source's principal composition, category order, photography-led cards, three green tones, and direct action affordance. The retained WanderQ header and English copy are intentional product-context differences.

## Comparison history

1. Earlier finding — P1 mobile layout overflow: the V1 desktop-specific three-column rule overrode the mobile breakpoint and compressed all three cards into narrow columns.
   - fix: added V1-specific `820px` and `640px` responsive rules, one-column stacking, mobile image ratio, and compact content spacing.
   - post-fix evidence: `/tmp/wanqu-home-mobile-cards.png`; measured viewport and document width are both `390px`, and every card measures `350px`.
2. Earlier finding — P2 experience-navigation contrast: category headings inherited a dark global heading color over dark photography.
   - fix: explicitly set the category heading and arrow to white.
   - post-fix evidence: `/tmp/wanqu-experiences-page-desktop-final.png`.
3. Earlier finding — P2 desktop proportion drift: the shared container kept the cards too narrow and let intrinsic content expand their height.
   - fix: expanded the section to the intended wide frame and fixed the desktop card grid to a `660px` source-aligned height.
   - post-fix evidence: `/tmp/wanqu-home-three-experiences-reference-state.png` and the focused side-by-side comparison.

## Primary interactions tested

- header “Guizhou Experiences” navigation
- all three theme anchor links
- four culture cards and four landscape cards render in their merged sections
- old `/safaris/classic-guizhou/` URL resolves to the merged Guizhou Experiences page
- mobile full menu opens and contains Guizhou Experiences, Hotels, Food, and About Us without a Routes section
- all rendered images complete with non-zero natural width
- console errors and warnings checked: none

## Follow-up polish

- P3: if the client later wants the English version to track the Chinese reference even more tightly, shorten the three English card titles by one line each.

## Implementation checklist

- [x] Merge navigation and content architecture
- [x] Reduce homepage to five primary sections
- [x] Match the selected three-card direction
- [x] Verify desktop and mobile layouts
- [x] Test navigation, anchors, legacy links, menu, images, and console

## Method-section refinement

- source state: `/tmp/wanqu-method-before.png`
- implementation state: `/tmp/wanqu-method-after.png`
- same-state comparison: `/tmp/wanqu-method-comparison.png`
- desktop viewport: `1512 × 1000` CSS px
- mobile evidence: `/tmp/wanqu-method-mobile-copy.png` at `390 × 844` CSS px
- refinement: replaced the abstract “See less. Feel more.” line with a Guizhou-specific promise, clarified the three planning steps, increased step readability, and reduced excess section spacing while preserving the approved editorial layout and real project photography.
- responsive result: document and viewport widths both measure `390px`; no horizontal overflow or broken imagery.
- interaction result: “How we plan” now resolves to the verified `/our-story/` page instead of falling back to the homepage.
- console errors and warnings: none.
- findings after refinement: no actionable P0/P1/P2 issues; the longer English step labels wrap intentionally on mobile.

final result: passed

## 2026-08-22 Atlas homepage redesign

### Comparison target

- source visual truth path: `/Users/a1/.codex/generated_images/019febea-95df-7f22-bd6f-c6895dab41b8/exec-53fa5a7a-5ed3-4865-8a82-23030f01a87b.png`
- implementation route: `http://127.0.0.1:5175/`
- implementation screenshot paths:
  - desktop hero: `/tmp/wanqu-atlas-qa-2026-08-22/final-top-1440-r3.png`
  - desktop experiences: `/tmp/wanqu-atlas-qa-2026-08-22/final-experiences-1440.png`
  - desktop planning: `/tmp/wanqu-atlas-qa-2026-08-22/final-plan-1440.png`
  - desktop team/final contact: `/tmp/wanqu-atlas-qa-2026-08-22/final-contact-1440.png`
  - mobile hero: `/tmp/wanqu-atlas-qa-2026-08-22/final-mobile-top-r5.png`
- full-view same-board comparison: `/tmp/wanqu-atlas-qa-2026-08-22/compare-overview.jpg`
- focused comparisons:
  - hero: `/tmp/wanqu-atlas-qa-2026-08-22/compare-hero-final.jpg`
  - experiences: `/tmp/wanqu-atlas-qa-2026-08-22/compare-experiences.jpg`
  - planning: `/tmp/wanqu-atlas-qa-2026-08-22/compare-planning.jpg`
  - team/final contact: `/tmp/wanqu-atlas-qa-2026-08-22/compare-team.jpg`
- viewport: desktop `1440 × 1000` CSS px; mobile `390 × 844` CSS px
- source pixels: `864 × 1821`
- implementation pixels: desktop viewport captures `1440 × 1000`; mobile capture `390 × 844`; assembled implementation overview `1440 × 3724`
- density normalization: device scale factor `1`. The generated source is a tall design board rather than a live browser viewport, so the full source and assembled implementation were proportionally contained in equal `780 × 1750` comparison slots. Focused source crops and implementation captures were normalized into equal `780 × 540` slots before judgment.
- state: homepage, default English locale, first hero slide selected and paused; desktop and mobile responsive states

### Findings

No actionable P0, P1, or P2 issues remain.

- Fonts and typography: the implementation reproduces the condensed editorial hierarchy with a system-safe Arial/Aptos Narrow stack, while Chinese uses PingFang SC/Microsoft YaHei to avoid missing glyphs. Display weight, wrapping, labels, coordinates, body line-height, and mobile scaling remain legible. The implementation intentionally uses slightly larger real-browser body text than the generated overview board.
- Spacing and layout rhythm: the source's slim header, split hero, atlas rail, overlapping three-image narrative, framed itinerary map, dark local-team proof, and compact contact plate are all present. Desktop section spacing is controlled and compact; the document width equals the viewport at both tested breakpoints with no horizontal overflow.
- Colors and visual tokens: warm mineral paper, ink black, deep forest, clay annotation, and restrained acid-lime actions match the selected direction. The accent is reserved for CTAs, route markers, small labels, and service facts.
- Image quality and asset fidelity: the dedicated hero photograph, route-map plate, existing cave/craft/waterfall photographs, and real WanderQ team image match the source art direction and render sharply. No placeholder images, handcrafted SVGs, CSS drawings, or visible watermarks remain.
- Copy and content: the approved three Guizhou experience categories, private-journey proposition, planning method, local-team proof, and contact destination are preserved in bilingual form. English is the default and the Chinese switch renders complete text without clipped glyphs.
- Interaction and accessibility: menu open/close, language switching in both directions, hero slide selection and pause/resume, primary CTA destinations, focus return, and responsive navigation were tested. Menu/search controls now expose explicit accessible labels. Browser console errors checked after interaction testing: none.

### Full-view comparison evidence

`/tmp/wanqu-atlas-qa-2026-08-22/compare-overview.jpg` places the complete selected design and the assembled browser implementation on the same board. The implementation retains the same story order, split-image proportions, atlas typography, overlapping experience plates, illustrated journey map, dark team proof, and final inquiry colophon. The implementation is taller because it uses production-readable body sizes and real responsive spacing rather than the compressed type in the ImageGen presentation board; this is an intentional browser-quality constraint rather than design drift.

### Focused region comparison evidence

- Hero comparison confirms the selected image mood, split composition, navigation density, headline scale, coordinate metadata, vertical Guizhou stamp, acid CTA, and forest atlas rail.
- Experience comparison confirms the asymmetric overlap, numbered photographic plates, black caption fields, theme order, and visible action affordances without returning to an equal rounded-card grid.
- Planning comparison confirms the framed two-column composition and purpose-built paper route-map asset with cave, culture, landscape, and Guiyang nodes.
- Team/contact comparison confirms the dark image-and-proof split, restrained statistics, compact inquiry plate, and book-colophon footer.

### Comparison history

1. Earlier finding — P1 experience cards stacked into three implicit grid rows, creating a `2131px` experience section and large empty areas.
   - fix: assigned all three desktop cards to the same grid row, then restored automatic rows at tablet/mobile breakpoints.
   - post-fix evidence: `/tmp/wanqu-atlas-qa-2026-08-22/final-experiences-1440.png`; the section is `895px` high and all three plates are visible together.
2. Earlier finding — P2 third experience caption was partially hidden by excessive overlap.
   - fix: narrowed the middle plate from grid columns `5 / 10` to `5 / 9`, preserving the layered composition while exposing the third title and action.
   - post-fix evidence: `/tmp/wanqu-atlas-qa-2026-08-22/final-experiences-1440.png`.
3. Earlier finding — P2 existing wide waterfall photo felt like a conventional attraction image and did not match the selected quiet, narrow-gorge hero.
   - fix: generated and optimized `/public/client-assets/atlas-hero-waterfall.webp` for the exact hero slot, then verified the desktop and mobile crops.
   - post-fix evidence: `/tmp/wanqu-atlas-qa-2026-08-22/compare-hero-final.jpg` and `/tmp/wanqu-atlas-qa-2026-08-22/final-mobile-top-r5.png`.
4. Earlier finding — P2 the icon-only Atlas menu control lost its accessible name when its visible label was hidden.
   - fix: added localized `aria-label` values to menu and search buttons and retested open/close focus state.
   - post-fix evidence: menu dialog opens, close returns focus, and `aria-expanded` returns to `false`.

### Primary interactions tested

- full menu opens and closes; dialog count `1` while open and `aria-expanded="false"` after close
- English → Chinese → English switch; both hero headings render correctly
- hero slide 1/2 selection and pause/resume controls
- both primary Atlas CTAs resolve to `/contact/`
- desktop layout width `1440px` equals document width `1440px`
- mobile layout width `390px` equals document width `390px`
- mobile hero, experience stack, and sticky header render without horizontal overflow
- browser console error log: empty
- production build: passed

### Follow-up polish

- P3: after the client reviews the complete homepage, inner-page headers and editorial modules can inherit the Atlas tokens in a separate controlled pass without changing their business content.

### Implementation checklist

- [x] Rebuild the homepage around the selected Atlas visual direction
- [x] Generate and optimize the missing hero and itinerary-map assets
- [x] Preserve bilingual copy, carousel, navigation, and CTA behavior
- [x] Verify desktop and mobile layouts in the in-app browser
- [x] Compare source and implementation together at full-view and focused-region levels
- [x] Fix all P0/P1/P2 design issues
- [x] Check production build and browser console

final result: passed

## Final inquiry-section refinement

- source visual truth: `/tmp/wanqu-final-cta-before.png`
- implementation screenshot: `/tmp/wanqu-final-cta-after.png`
- same-state comparison: `/tmp/wanqu-final-cta-comparison.png`
- desktop viewport and pixels: `1512 × 1000` CSS px and `1512 × 1000` image pixels
- mobile evidence: `/tmp/wanqu-final-cta-mobile-top.png` and `/tmp/wanqu-final-cta-mobile-bottom.png` at `390 × 844` CSS px
- Chinese mobile evidence: `/tmp/wanqu-final-cta-mobile-zh.png` at `390 × 844` CSS px
- density normalization: source and implementation desktop captures use the same CSS viewport and equal pixel dimensions; the side-by-side composite scales both equally to `756 × 500`.
- state: homepage final inquiry section, default English; Chinese locale and mobile continuation state also verified.

### Findings

No actionable P0, P1, or P2 issues remain.

- Fonts and typography: the Georgia display face and Assistant supporting face preserve the established editorial hierarchy. The shorter two-line promise has stronger optical balance, and the acid-green emphasis remains readable in both languages.
- Spacing and layout rhythm: the dark two-column section creates a clear final destination in the page funnel. Desktop copy, CTA, reassurance note, and three prompts align to a shared baseline; mobile collapses to one column with an `18px` content inset and no horizontal overflow.
- Colors and visual tokens: forest, warm white, and acid green now reuse the approved WanderQ palette with stronger contrast than the previous acid-green full background. Prompt body copy remains secondary without dropping below useful visual hierarchy.
- Image quality and asset fidelity: this section intentionally uses no raster imagery; removing the previous decorative pseudo-element keeps the ending quieter and consistent with the minimal direction.
- Copy and content: the generic request was replaced with a clearer promise, a lower-friction CTA, a no-fixed-itinerary reassurance, and three concrete starting details. English and Chinese versions communicate the same scope.
- Interaction and accessibility: the primary CTA resolves to `/contact/`; the contact heading appears in the active language. Focusable control boundaries remain visible, all images on the page load, and the browser console contains no errors or warnings.

### Comparison history

1. Earlier finding — P2 contrast and conversion hierarchy: the acid-green full section made the supporting prompts too pale and visually competed with the CTA.
   - fix: moved the section to the dark forest token, reserved acid green for the key phrase, prompt label, and primary action, and rewrote the supporting copy around three simple inputs.
   - post-fix evidence: `/tmp/wanqu-final-cta-after.png` and `/tmp/wanqu-final-cta-comparison.png`.
2. Earlier finding — P1 animated CTA overlap: the generic stagger animation left the button translated `64px` downward, visually colliding with the reassurance note.
   - fix: removed the primary CTA from the stagger target and neutralized inherited transforms for that button.
   - post-fix evidence: button and note bounds no longer intersect; desktop comparison and both mobile captures show the corrected spacing.

### Primary interactions tested

- final CTA navigation to `/contact/`
- English and Chinese language states
- desktop and mobile layouts
- mobile CTA boundaries (`x=18px`, `right=372px`) and document width (`390px`)
- broken images and console errors/warnings: none

### Follow-up polish

- P3: after client review, the reassurance note can be shortened further if the Chinese line is preferred on one row at very narrow widths.

final result: passed

## Team-section refinement

- previous state: `/tmp/wanqu-team-before.png`
- implementation state: `/tmp/wanqu-team-after.png`
- same-viewport side-by-side comparison: `/tmp/wanqu-team-comparison.png`
- desktop viewport: `1512 × 1000` CSS px
- mobile evidence: `/tmp/wanqu-team-mobile-top.png` and `/tmp/wanqu-team-mobile-services.png` at `390 × 844` CSS px
- refinement: promoted the real Guizhou field-day image to the primary visual, reduced the oversized editorial headline to a two-line local-support promise, and condensed the content into three concrete capabilities: route judgment, bilingual cultural context, and on-trip coordination.
- visual result: the section now uses the approved sage/forest palette, a balanced image-and-copy split, and a clearer trust hierarchy while preserving the established WanderQ typography and square-corner system.
- responsive result: viewport and document widths both measure `390px`; the full-width mobile CTA now resolves inside the content frame at `x=20px`, `right=370px`, with no horizontal overflow.
- interaction result: “Talk with our local team” resolves to the verified `/contact/` page.
- image and runtime result: no broken images and no browser console errors or warnings.
- findings after refinement: no actionable P0, P1, or P2 issues remain. The mobile CTA entrance transform was found extending past the content frame during verification and was neutralized at the mobile breakpoint.

final result: passed