Skip to content

SOP-052 — Wireframe / prototype spec

Guide

<!-- last-reviewed: 2026-06-01 · owner: Design Research (UX Designer) -->

SOP-052 — Wireframe / prototype spec

SOP · owner: Design Research (UX Designer). Layer: SOP/Runbook (docs/canon.md). The artifact structures (IA / flow / wireframe / prototype / post-build review) are defined in the JD (.claude/agents/ux-designer.md) — not restated here. Activation note (2026-06-01): this role activates at platform Build start, which has not begun (product data layer deferred, ADR-0006). The procedure is defined and stub-first; it is doubly gated — it cannot run without research evidence (none exists in the repo today) and the role itself activates only at Build. docs/product/ and the specs/* tree are not created empty.

Interface Contract

  • Inputs: research brief + findings ← from <Design Research Director> · trigger: research brief issued
  • Inputs: design tokens / visual system ← from <Visual Designer> · trigger: document changed
  • Outputs: spec (IA / flow / wireframe / prototype) → to Design Research Director · trigger: review requested
  • Outputs: approved spec → to Engineering Director · trigger: requirements issued
  • Outputs: structural wireframe spec → to Visual Designer · trigger: document changed
  • Outputs: finalized IA doc → to Documentarian · trigger: document changed
  • Outputs: spec / review → to Archivist · trigger: artifact approved
  • Handoff trigger (in): the Director issues a brief with research evidence for a surface or journey to design
  • Handoff trigger (out): the spec is signed off by the Director and handed to Engineering with interaction intent
  • Definition of Done before handoff:
    • [ ] Learner-context statement written (who / job-to-be-done / failure modes / IA constraints)
    • [ ] Every structural decision traces to a reports/research-*.md finding or an explicit product goal — or is flagged an assumption
    • [ ] All significant branches documented, incl. error and empty states
    • [ ] No visual decisions (no hex, type scale, spacing tokens, color)
    • [ ] Accessibility specified structurally (focus order, keyboard, ARIA, skip-nav, reading order)
    • [ ] Coherent with the existing IA and prior specs
    • [ ] Director sign-off obtained (member ships nothing unsigned)
    • [ ] Learnings captured to docs/knowledge/ if any
    • [ ] Spec handed to the Archivist (0 drift)

Triggers reused (research brief issued — now registered in the Wave-2 block; review requested, requirements issued, document changed, artifact approved — already in docs/handoff-triggers.md). No new trigger is proposed (requirements issued fits the spec-to-Engineering handoff; reuse-beats-add). The approved spec → Engineering Director · requirements issued output is absorbed by the Engineering Director’s requirements issued fan-in sink (SOP-054, §3.1 R1 — matched); the Design-Research-Director and Visual-Designer edges reconcile as pending (not Interface-Contract identities here, §3.1.1 R3).

Purpose

Translate research evidence into the structural and behavioral layer — IA, learner flows, wireframe specs, prototype specs — so the learner experience is shaped by evidence, not implementation defaults, and Engineering builds without guessing behavioral or structural decisions.

When to use

At platform Build start, when the Director issues a brief (grounded in research evidence) for a surface or journey, or for a post-build review of implemented UI against an approved spec. Not used before Build, and not without research evidence.

Flow

flowchart LR
  A["Receive brief<br/>+ evidence"] --> B["Write learner-context<br/>statement"]
  B --> C["Produce artifact<br/>(IA / flow / wireframe / prototype)"]
  C --> D["Self-check<br/>(evidence · branches · no visuals · a11y)"]
  D --> E["DRD sign-off"]
  E --> F["Hand to Engineering<br/>(interaction intent)"]
  classDef s fill:#1d4ed8,color:#fff,stroke:#1e3a8a
  class A,B,C,D,E,F s

Text fallback: receive the brief and research evidence from the Director → write the learner-context statement (who, job-to-be-done, failure modes, IA constraints) → produce the artifact (IA doc, learner flow, wireframe spec, or prototype spec) → run the self-check (every decision evidence-grounded or flagged; all branches incl. error/empty; no visual decisions; accessibility specified) → obtain Director sign-off → hand to Engineering with a note on interaction intent.

Steps

  1. Receive the brief. Confirm the surface/journey, the grounding research, the constraints (platform; existing IA; Engineering capacity flags), and the definition of done. If the brief references research not yet in reports/, stop and request it — do not design without evidence.
  2. Read existing artifacts. docs/methodology.md (current phase), docs/product/ia-learning-platform.md (existing IA), reports/research-*.md, prior specs/flow-*/wireframe-*, the Visual Designer’s design tokens/identity, and docs/concept.md.
  3. Write the learner-context statement. Two paragraphs: who the learner is at this moment, their job-to-be-done (cite the research source), known failure modes/drop-offs, and IA constraints. If you cannot write it (no evidence), stop and request it from the Director.
  4. Produce the artifact. Per the JD structure for the artifact type — IA doc (docs/product/ia-learning-platform.md), learner flow (specs/flow-<slug>.md), wireframe spec (specs/wireframe-<slug>.md), or prototype spec (specs/prototype-<slug>.md). Document all branches incl. error/empty states; specify accessibility structurally; keep it visual-free.
  5. Self-check. Run the DoD checklist above; fix any failure before handoff.
  6. Sign off and hand off. Obtain Director sign-off (member ships nothing unsigned). Hand the approved spec to Engineering with interaction intent; share structural specs with the Visual Designer; hand finalized IA to the Documentarian and every artifact to the Archivist; capture learnings.
  7. Post-build review (when applicable). Walk the implemented UI against the approved spec; file reviews/ux-review-<YYYY-MM-DD>-<slug>.md citing the spec and the research for each divergence; route to Engineering Director (resolution) + DRD (awareness).

Roles / approvers

Run by the UX Designer. The Design Research Director is the brief source and the sign-off gate (no spec ships to Engineering without it). The Engineering Director is the build recipient; the Visual Designer owns the visual layer the structural spec is dressed in.

Guardrails

  • No structural decision without evidence — cite a research finding or an explicit product goal, or flag the assumption; ungrounded structure is the failure this role prevents.
  • Structural only — no hex, type scale, spacing tokens, or color (Visual Designer’s lane).
  • Accessibility is structural — specified in the spec, not delegated to Engineering.
  • No code, no research — produce specs; do not implement or conduct studies.
  • Do not self-approve — every artifact goes to the Director first.
  • Personal data is PA-only.
  • Do not restate the JD’s artifact structures — link to it.

See also: docs/units/design-research/charter.md · SOP-048 (research plan) · SOP-049 (gate evidence) · docs/handoff-triggers.md.