Skip to content

design-qa.md

Latest commit

 

History

History
92 lines (71 loc) · 7.53 KB

design-qa.md

File metadata and controls

92 lines (71 loc) · 7.53 KB
Raw

Design QA — DQS Landing Page / Product Story Pass

  • source visual truth: C:\Users\Soham Bhoir\.codex\generated_images\019f52ff-85b8-7f12-91a5-74e4f8465720\exec-376197d7-f9f3-420d-a1c4-041e0f1c0ebc.png
  • full-view comparison evidence: C:\Users\Soham Bhoir\.codex\visualizations\2026\07\11\019f52ff-85b8-7f12-91a5-74e4f8465720\dqs-product-story-full-contact-sheet.png
  • browser-rendered hero: C:\Users\Soham Bhoir\.codex\visualizations\2026\07\11\019f52ff-85b8-7f12-91a5-74e4f8465720\dqs-product-story-hero.png
  • focused application spectrum: C:\Users\Soham Bhoir\.codex\visualizations\2026\07\11\019f52ff-85b8-7f12-91a5-74e4f8465720\dqs-application-spectrum-clean.png
  • focused application cards: C:\Users\Soham Bhoir\.codex\visualizations\2026\07\11\019f52ff-85b8-7f12-91a5-74e4f8465720\dqs-application-cards.png
  • prior mobile-system evidence: C:\Users\Soham Bhoir\.codex\visualizations\2026\07\11\019f52ff-85b8-7f12-91a5-74e4f8465720\dqs-unique-sections-mobile-contact-sheet.png
  • desktop viewport: 1280 × 720, DPR 1
  • mobile system viewport: 390 × 844, DPR 1
  • evaluated state: public unauthenticated landing page, hero settled, native SVG packet/scanner animations running
  • additive user requirements: make Get started the conversion CTA, route it through sign-in, add the documented application domains, retain an honest maturity model, and keep every major section visually distinct

Findings

  • No actionable P0, P1, or P2 findings remain.
  • [P3] The source visual truth predates the requested conversion change and therefore shows Explore the architecture. The implementation intentionally replaces that CTA with Get started, preserves View on GitHub as secondary, and adds Applications to the primary navigation.
  • [P3] The in-app browser is fixed at the desktop viewport in this session, so the newly added application section could not receive a fresh mobile browser capture. Its 1020px two-column and 760px single-column/mobile-SVG rules were reviewed directly, while the previously captured 390 × 844 evidence continues to cover the shared landing shell, typography, navigation, and mobile visual system.

Required Fidelity Surfaces

  • Fonts and typography: the implementation preserves the reference’s editorial display hierarchy and mono technical labels. Browser measurement found no visible text below 13px at 1280 × 720; domain-card body copy is 16px with a 1.65 line height.
  • Spacing and layout rhythm: the asymmetric hero remains aligned to the reference, while the application intro, spectrum, and six-card grid use the established 82rem content frame. Desktop measured scrollWidth 1276px against a 1280px viewport with no horizontal overflow.
  • Colors and visual tokens: midnight navy, cyan, blue, violet, emerald, and amber remain consistent with the reference. Available and experimental states use distinct semantic colors without overpowering the content.
  • Image and visual fidelity: the full contact sheet compares the source and browser implementation together. The hero keeps the selected exploded atlas; the new application section uses a separate animated workload-spectrum grammar rather than repeating the hero composition.
  • Copy and content: all six domains were checked against current routes and implementation symbols. Local/simulated finance, risk, options, and molecular workflows are not described as mesh execution; molecular and agent surfaces are explicitly marked experimental; the circuit vault is described as content-addressed rather than proof of computation.
  • Icons and controls: Lucide line icons stay consistent with the existing design system. The header, hero, closing CTA, and six domain cards use semantic links with visible hover/focus treatments.
  • Responsiveness: the application grid changes from three to two to one column; the desktop spectrum swaps to a dedicated vertical mobile SVG; card padding and heading rhythm reduce at the mobile breakpoint. The rest of the landing’s prior 390 × 844 evidence remains unchanged.
  • Accessibility and motion: the desktop spectrum has an explicit image label, decorative mobile artwork is hidden from assistive technology, reduced-motion behavior is retained, and the primary conversion path is keyboard-addressable.

Distinct Section Visual Grammars

  1. Hero: exploded isometric orchestration atlas.
  2. Orchestration trace: horizontal packet rail.
  3. Applications: six-band animated workload spectrum plus maturity cards.
  4. Systems problem: branching fragmentation DAG that recombines into a result.
  5. Scroll story: orbital five-state execution machine.
  6. Capability fabric: interactive adaptive network with route switching.
  7. Architecture: vertical live data bus with alternating implementation modules.
  8. Research: waveform-style executable research path.
  9. Roadmap: rising delivery trajectory.
  10. Closing: converging evidence paths that resolve into one outcome.

Interaction and Browser Checks

  • Public root loaded at http://127.0.0.1:3000/: passed.
  • Header and hero Get started links resolve to /signin: passed.
  • Six domain cards resolve to /signin?next=<workflow>: passed.
  • Header CTA click reached /signin: passed.
  • Finance-card click reached /signin?next=/finance: passed.
  • No architecture CTA or architecture outlink remains: passed.
  • Primary navigation exposes Product, Applications, Workflow, Research, and Roadmap: passed.
  • Desktop page overflow: none.
  • Browser runtime errors: none.
  • Visible desktop text below 13px: none.
  • Focused ESLint: passed with zero warnings.
  • TypeScript --noEmit --incremental false: passed.
  • Authentication proxy regression suite: 3 passed, 0 failed.
  • Next.js production build: passed, including all 78 generated pages.

Comparison History

Pass 1 — selected hero fidelity

  • Built and aligned the selected large-type hero, five-layer atlas, and orchestration trace.

Pass 2 — motion density

  • Increased the native SVG packet field and verified the scroll-linked and interactive states.

Pass 3 — section uniqueness

  • [P1] The hero’s exploded-layer motif had been reused in later sections.
  • Fixes: introduced the fragmentation DAG, orbital state machine, architecture bus, research waveform, roadmap trajectory, and closing convergence.
  • Post-fix evidence: the desktop and mobile contact sheets show distinct compositions with no page overflow.

Pass 4 — conversion and product story

  • [P1] The primary CTA exposed architecture instead of beginning the product journey, and the landing page did not explain the repository’s finance, risk, options, molecular, agent, and vault surfaces.
  • Fixes: replaced every primary conversion CTA with Get started → /signin; added six maturity-labelled application cards; added a unique animated application spectrum; linked each card through sign-in to its intended workflow; rewrote hero, research, roadmap, and closing copy against current implementation evidence.
  • Post-fix evidence: the current full contact sheet, focused spectrum/card captures, successful interaction checks, clean console, and production build.

Implementation Checklist

  • Replace architecture-led conversion with Get started and sign-in routing.
  • Add repository-grounded financial, risk, options, molecular, circuit, agent, and vault context.
  • Distinguish available research tools from in-development surfaces.
  • Give the application section its own animated SVG grammar.
  • Preserve the established DQS design system and readable typography.
  • Verify links, overflow, runtime health, TypeScript, ESLint, proxy behavior, and production build.

final result: passed