🎨 QuizWizz v1.10.0 — Frontend & UX Audit

Historical record — 2026-07-24

Preserved as observed. Current truth: Program Masterplan.

TL;DR

Two attractive halves that don’t believe in each other. A calm public “Studio” and a dense wp-admin sweatshop, joined only by a purple accent doing the work of an entire design system. Live in-browser probing found a real invisible-button a11y bug and a full-bleed off-center layout — not just contact-sheet vibes. Grade: B- looks / C consistency / D empty-states.

• subject: QuizWizz frontend — 21 desktop states + live public Studio
• method: (1) contact-sheet vision pass, (2) live in-browser DOM/CSS probe on the running bench
• bench: https://wrdp.loca.zone (WP 7.0, locale de_DE)
• companion: Backend & security roast

---

🗺️ The core defect: split personality

flowchart TB
  P["purple #6d28d9"] --> A["wp-admin world"]
  P --> S["Studio world"]
  A --> A1["dark nav · black bar · dense tables"]
  A --> A2["tiny faint type · WP-blue leaks"]
  S --> S1["stock block theme · generic footer"]
  S --> S2["full-bleed · off-center content"]
  A -. "no shared tokens" .- S

Two products wearing one accent color. The only thread stitching them is purple — and purple is overloaded, so it stitches nothing.

Axis	wp-admin side	Studio side
Layout	Dark nav, black bar, dense panels	Stock block theme, full-width, off-center
Density	Crammed	Sparse to empty
Type	Small, faint, WP-blue bleed	Big headings in whitespace
Chrome	WP conventions	Generic footer: Blog·Impressum·FAQs·Shop·Themes
Continuity	—	shared purple only; no shared type/spacing tokens

---

🔬 Live-verified defects (in-browser, cited)

#	Defect	Sev	Evidence (live DOM/CSS)
1	✅ RESOLVED 2026-07-24 — Primary button invisible: white text on transparent, no border	🔴 a11y	Root cause (deeper audit): qwizz-finetune.css loads after qwizz-builder.css (Shortcode.php:143) and re-declares a bare global .qwizz-btn--primary{background:var(--qe-violet)}; --qe-violet is scoped only to .qwizz-editor, so outside the editor the var() is invalid → transparent bg wins by source order → white-on-white. Fix: appended .qwizz-builder/.qwizz-player .qwizz-btn--primary{background:linear-gradient(135deg,var(--qw-v),var(--qw-v2))!important;…} to qwizz-finetune.css. Verified live: “Online spielen” now backgroundImage: linear-gradient(135deg, rgb(109,40,217), rgb(91,…)), w=286px
2	↩︎ RETRACTED — “full-bleed off-center layout”	—	On re-inspection the player/builder self-center (.qwizz-player{max-width:780px;margin:… auto}); observed lopsidedness is the block theme’s full-width wrapper + the 2-column builder with an empty review column at step 1 — a theme interaction, not a clean plugin CSS defect
3	Studio chrome is unstyled stock theme	🟠	Footer = default block-theme links + tagline “Qwizz the Quiz Wizzard”; no designed shell (design-level, deferred to release owner)
4	↩︎ RETRACTED — “accent overload”	—	Accent use is disciplined: selected states use soft --qw-soft bg; primary uses the violet gradient; the two violets are primary vs editor scope, not competing systems
5	Locale mismatch vs design mocks	🟡	Mocks English; live Studio renders de_DE (“Quiz erstellen”, “Weiter”, “Überrasch mich”) — i18n works, but review/QA must test target locale

Token reference

Primary #6d28d9 (violet-700) · secondary #6546d7 · disabled/ghost states default to white text — the root of defect #1.

---

👁️ Contact-sheet findings (21 states)

Visual hierarchy

• Dashboard: brand + metrics visually weak vs empty canvas; “Top subjects”/“Language pools” read as afterthoughts.
• Questions/Quizzes: tables give equal weight to title, metadata, status chip, date, actions — the item name doesn’t win.
• Question editor: “Question details” / “Answer choices” / right-rail “Publish”+“Subjects” all shout equally → editing sequence invisible.
• Public subjects: “Browse quiz subjects” is the only focal point; the two subject cards are tiny and weak.

Density is inconsistent (the worst kind)

• General, Builder, and PDF/Brand felt crammed.
• Player, AI, and Advanced felt sparse to empty.
• Same nav, no learnable rhythm.

Empty / loading states

• Quiz player: ✅ RESOLVED 2026-07-24 — the loading state was styled only as .qwizz-player__loading{padding:42px;text-align:center} (no spinner). Appended a reduced-motion-safe spinner (::before ring animating qwizz-player-spin) to qwizz-player.css and added the class to the server-rendered initial <p> (QuizEmbed.php:36). Verified live against the served CSS: ::before renders 34px, border-top-color: rgb(109,40,217), border-radius:50%, animation-name: qwizz-player-spin. Note: failure + “Try again” retry already existed (qwizz-player.js renderFailure() + Retry-After) — only the loading visual was missing.
• Public subjects / Builder: content marooned in desktop-width void.

---

📋 Remediation checklist

• 🔴 ✅ Fix .qwizz-btn--primary fill — corrective violet-gradient rule appended to qwizz-finetune.css; verified live. (Focus rings already exist plugin-wide — original “add focus ring” ask retracted.)
• ↩︎ RETRACTED — “centered max-width container”: components already self-center; off-center is theme/layout, not a plugin defect
• 🟠 Design the Studio shell (header/footer) — design-level, deferred to release owner
• ↩︎ RETRACTED — “one accent meaning”: accent use is already disciplined
• 🟠 Unify tokens across admin + Studio — design-level, deferred to release owner
• 🟠 Normalize Settings rhythm across tabs — design-level, deferred to release owner
• ↩︎ RETRACTED — “table hierarchy”: native WP title column already provides hierarchy
• 🟡 ✅ Real loading state — reduced-motion-safe spinner added to Quiz player; verified live. (Retry already existed.)
• 🟡 Fill or gate Settings → AI so it isn’t a blank screen — design-level, deferred to release owner
• 🟡 QA in target locale (de_DE), not just English mocks — process note for release owner

---

📊 Scorecard

Dimension	Grade	One-line
Public Studio aesthetic	B	Calm, confident — but full-bleed + stock chrome
Cross-surface consistency	C-	Admin ≠ Studio; purple carries all the continuity
Accessibility	C-	Invisible primary button; contrast/focus gaps
Admin density/hierarchy	C	Equal-weight tables, competing editor panels
Empty / loading states	D	Ransom-note loader, marooned public pages
Settings consistency	C-	Crammed and empty at random across tabs

---

🔗 References

• 🌐 Live builder (Studio) · 🧩 App
• 🔒 Companion: backend & security roast
• ♿ WCAG 2.2 — Contrast & Focus
• 🎨 WordPress Admin Design (Components)
• 📐 Refactoring UI — hierarchy & spacing

---

• reviewer: live in-browser bench probe + contact-sheet vision pass
• caveat: fine text unreadable at contact-sheet scale; live probe supersedes where cited