Review & Edit — Substitution Structure

Transcripts

9 participants · 3 per variant · raw usertesting transcripts

9 transcript files

Tab · Accordion · Filter

Ready

Tab: mira, deon, priya · Accordion: juno, bram, tess · Filter: otis, wynn, sage

↗ View transcripts

Testing Plan

Research questions · 3 hypotheses · 9-task scenario · success metrics

testing_plan.md

Has content

Tests which structure (Tab / Accordion / Filter) best helps customers manage substitution preferences — count comprehension, locate-an-item, ineligible items, confidence & clarity.

📄 testing_plan.md

Design Variants (tested)

The 3 structures under test

design_variants.md

Has content

Tab — counts on tabs, low layout shift · Accordion — one scroll, but layout shifts · Filter — familiar, but counts easy to miss

📄 design_variants.md

PRD

Product requirements & constraints

prd.md

Has content

📄 prd.md

Prior Research

Project 1 (Accept/Reject) findings carried forward

prior_research.md

Has content

📄 prior_research.md

Notes SKILL 1 done

9 participants · grouped by variant · ⚠ 4 flags raised · one interactive viewer per variant

Tab

3 participants

Done

mira

9 tasks1 flag

deon

9 tasks1 flag

priya

9 tasks1 flag

↗ Open Tab notes 📄 .md

Accordion

3 participants

Done

juno

9 tasks2 flags

bram

9 tasks2 flags

tess

9 tasks1 flag

↗ Open Accordion notes 📄 .md

Filter

3 participants

Done

otis

9 tasks1 flag

wynn

9 tasks1 flag

sage

9 tasks1 flag

↗ Open Filter notes 📄 .md

Synthesis SKILL 2 done

Multi-variant · 9 participants · 3 hypotheses validated (1 Pass · 1 Partial · 1 Fail)

Substitution Structure — Synthesis

Tab vs Accordion vs Filter

Done

Winner: Tab — best count comprehension (3/3), highest confidence (4.3) and clarity (4.7).
Filter failed on comprehension (0/3 stated the count — no persistent total). Accordion hurt by layout shift on expand/collapse.
⚠ Cross-variant finding: the "Ineligible" / eligibility framing confused users regardless of structure → reframe to the customer's question: "Replace" / "Don't replace."

↗ Open synthesis report 📄 .md

Design Brief SKILL 3 done

Design-ready reference · distilled from synthesis + context · project CLAUDE.md updated

Review & Edit: Substitution Structure

constraints & decisions

Done

Decision: Tab structure, reorganized around the customer's decision.
✅ Must keep: tabs + few categories · always-visible count · inline per-item edit
🔴 Must fix: re-label to "Replace" / "Don't replace" · plain-language "Can't be swapped"
🟡 Should fix: keep the count persistent in every view

↗ Open design brief 📄 .md 📄 updated CLAUDE.md

Design Variants SKILL 4 done

3 interactive variants · 375px phone-frame previews · each applies the brief differently · tap the tabs/chips

3 variants

structure settled (Tab) → exploring how to surface count & can't-swap

Done

Variant 1

Flat list + sticky summary

no nav↻ regenerated

Variant 2

Two tabs + inline can't-swap

2 tabs

Variant 3

Summary-first

summary + chips

↗ Compare all 3 Variant 1 Variant 2 Variant 3

Refined Design SKILL 5 done

Final design + engineer spec · synthesized from Variant 2 + Variant 1 · gate feedback applied

Substitutions — final

two-tab decision model + live summary bar

Done

Decision: two tabs (Replace / Don't replace), summary merged into the tab bar.
Gate feedback applied: can't-swap moved out of the Replace tab (read-only segment) · added a Find an item search for long orders · Moved · Undo toast so toggling never loses an item.
Includes an inline engineer spec (components · states · accessibility · dynamic content) for handoff.

↗ Open final design + spec 📄 updated CLAUDE.md

Prototype SKILL 6 done

Functional prototype generated from the refined design + engineer spec · tech-stack-configurable

Substitutions — React prototype

React + Vite · components read tokens only

Done

Working React build of the final design — live counts, tab/search filtering, Replace/Keep toggle, Moved·Undo, locked items.
Tech stack is configurable: this targets React, but SKILL 6 renders to whatever stack a team uses — set the target in design_system.md and re-run; the research, design & spec upstream don't change, only the renderer.
Connects to your design system: components read tokens from src/theme.css only — never hardcoded — so it points at any design system by swapping the tokens.
Run: npm install then npm run dev

📄 prototype README 📂 src/