🪄 Studio Builder — Design Audit

Superseded — 2026-07-24

The terminal labels and edit entries below are superseded by Program Masterplan as of 2026-08-02: the labels are now Print and Play, the separate Edit sheet and Start over entries are gone, and when Fine-tune is available the first unified Print click prepares a draft and opens the editor, otherwise Print remains a direct PDF action. S4’s “1 Change” claim was retracted by the historical patch review. The original weights, geometry, empty-pool and review-column observations were not browser-remeasured and remain dated evidence. Preserved as observed.

TL;DR

Best progressive-disclosure story in the product (collapse → Change escape hatch → Advanced accordion). Undercut by inverted type weights, dual equal-Fitts CTAs, a dead 2-col review rail, and a step-1 summary that loses its information scent (“1 Change”). Grade: A- IA · C hierarchy · B- juice.

  • surface: public Studio [quizwizz_craft] · https://wrdp.loca.zone/?page_id=57
  • files: assets/css/qwizz-builder.css · assets/js/qwizz-builder.js · includes/Frontend/Shortcode.php
  • locale probed: de_DE

🧭 Rubric scores (1–5)

LensScoreOne-line
Visual hierarchy2Title 32/400, step h3 16/400, CTA 22/300 — weights inverted
IA / progressive disclosure56-step collapse + Change + Advanced accordion = textbook
Information scent3Step-1 collapses to bare “1 Change”; pool shows only Surprise
Chrome-less / content-first4Plugin chrome is light; theme header/footer still frame it
Hook paths & density modes4Linear wizard with sensible defaults; Advanced gated
Visual weight & Gestalt3Step rail proximity good; empty review col breaks grouping
AR / rhythm3Consistent step cadence; 2-col grid leaves a void at start
Art direction4Wand + violet + soft cards feel intentional
Design-token discipline2Local --qw-* near-duplicates player defaults (#201b31 vs #211d31)
Affordances & signifiers4Pressed chips, check marks, violet Continue are clear
Fitts / Hicks2Dual CTAs nearly identical size (288≈286); two equal decisions
Hover-intent vs instant3Chip press is instant; little hover preview
Escape hatches5Change × N + Neu beginnen + noscript path
Micro-interactions / continuity3Transitions exist; no anticipation into Play/PDF

🔬 Live-verified findings

#FindingSevEvidence
S1Type-weight inversion: primary CTA lighter than body chrome🔴Live computed: #qwizz-builder-title 32px/400; active h3 16px/400; .qwizz-step__continue “Weiter” 22px/300; category card text also 22px/300 — CTA does not win by weight
S2Dual equal-Fitts terminal CTAs compete🔴Final step: “PDF drucken” 288×48 secondary vs “Online spielen” 286×48 primary — same target size; Hicks cost of two peers. Color alone carries hierarchy
S3Dead review column at early steps🟠.qwizz-builder__layout{grid-template-columns:minmax(0,720px) minmax(270px,1fr)} (builder.css); live .qwizz-builder__review = null through steps 1→6 → persistent empty right rail
S4Collapsed step-1 loses scent🟠After advance, step content summary text = "1 Change" (no “Überrasch mich”); steps 2–5 correctly show values
S5Subject pool scent weak when empty🟡Only .qwizz-category[data-cat="any"] “Überrasch mich” 287×96 rendered; empty subject taxonomy → one giant choice
S6Advanced options disclosure is excellentAccordion “Erweiterte Optionen” with scent line Hell · answer review on · comfortable; dependent switches; “Blatt bearbeiten” entry

✨ What already works (do not break)

  • Step machine: inert on future steps, collapse-to-summary on past, Change restores
  • Noscript fallback with full craft controls
  • Selected chip affordance: violet border + check
  • Start-over link as non-destructive reset
  • FE-1 fix visible: “Online spielen” gradient-filled

🩹 Prioritized fixes

  1. 🔴 Bump CTA / step-title weights: .qwizz-btn and .qwizz-step__heading h3font-weight:700
  2. 🔴 Make Play the sole large primary; demote PDF to ghost/text under Play
  3. 🟠 Collapse layout to 1-col until review has content; or live recipe card from step 1
  4. 🟠 Collapsed summary must echo chosen value, not step index
  5. 🟡 Empty-pool state: illustrate “add subjects in admin”

🔗 Anchors


  • auditor: live browser DOM + computed style + screenshots 2026-07-24
  • method: walk all 6 steps; capture hierarchy + CTA geometry