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

• Merge navigation and content architecture
• Reduce homepage to five primary sections
• Match the selected three-card direction
• Verify desktop and mobile layouts
• 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

• Rebuild the homepage around the selected Atlas visual direction
• Generate and optimize the missing hero and itinerary-map assets
• Preserve bilingual copy, carousel, navigation, and CTA behavior
• Verify desktop and mobile layouts in the in-app browser
• Compare source and implementation together at full-view and focused-region levels
• Fix all P0/P1/P2 design issues
• 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