Design Mockup to Production Path¶
Workflow — instantiates Progressive Fidelity Increase
Moves a design from conceptual, visual, interactive, technical, integrated, and production-ready states through explicit gates.
A design does not slide smoothly from idea to shipped product; it passes through a fixed sequence of named representational states, and each transition is a gate. Design Mockup to Production Path is the workflow that carries one design through those states — conceptual sketch, visual comp, interactive prototype, technically-specified screen, integrated build, production-ready release — and refuses to let it advance a state until that state has been reviewed and the value being carried forward is intact. Its defining move is that fidelity here is a pipeline of representations of a single design, each state answering a different kind of question (does the idea make sense? does it look right? does the interaction feel right? can it be built? does it hold together in the real system?), ending in a clean handoff to the people who will ship it. What travels the whole pipeline is the design's core intent; what changes is only how faithfully each artifact renders it.
Example¶
A retail bank is redesigning its mobile account-opening flow. The designer starts at the conceptual state: a one-page narrative and a rough flow diagram capturing the core reference — "collect identity, verify, fund, done, in under four minutes, without a branch visit." That intent is written down and pinned, because every later state will be checked against it. The visual state produces static comps of each screen; a review confirms the layout serves the four-minute promise before anyone wires anything. The interactive state turns the comps into a clickable prototype and puts it in front of a handful of real customers; the checkpoint here is behavioral — do people actually complete the flow, or do they stall at identity verification?
Only once the interaction survives that gate does the design move to the technical state: real field validation rules, error states, accessibility annotations. Then the integrated state, where it is wired against the actual verification vendor and the funding rails and tested end-to-end. Finally the production-ready state produces the handoff artifact: a specced, annotated, engineering-consumable design with every state's decisions traceable back to that original four-minute reference. The product owner's sign-off at each gate is the readiness signal that the design is allowed to consume more expensive effort.
How it works¶
- Fix the core reference first. The design's intent — the value and constraints it must preserve — is stated at the conceptual state and becomes the yardstick every later state is checked against.
- Advance one representational state at a time. Conceptual → visual → interactive → technical → integrated → production. Skipping a state is the failure the workflow exists to prevent (building before the interaction is validated).
- Gate each transition on a checkpoint. The question a gate asks is specific to the state it guards — comprehension at concept, aesthetics at visual, behavior at interactive, buildability at technical, coherence at integrated.
- End in a handoff, not a hand-wave. The production-ready state is not "the pretty version" but a self-describing artifact engineering can build from without re-deriving intent.
Tuning parameters¶
- Number of states — how many named fidelity levels the pipeline has. More states catch problems earlier but add gate overhead and slow simple designs; collapse states for low-risk work.
- Gate strictness — how hard each checkpoint is to pass, and whether it is advisory or blocking. Strict blocking gates prevent premature build but can bottleneck; soft gates move fast but leak unvalidated work downstream.
- Sign-off breadth — how many stakeholders the readiness signal requires at each gate. Broader sign-off buys alignment but risks design-by-committee and slow consensus.
- Handoff completeness — how much specification the production-ready artifact must carry (tokens, states, edge cases, accessibility). More completeness reduces engineering rework but front-loads designer effort.
- Backtrack policy — whether a failed gate sends the design back one state or to concept. Short backtracks are cheap; deep ones are honest when the core reference itself was wrong.
When it helps, and when it misleads¶
Its strength is sequencing: it stops teams from polishing pixels before the idea is validated and from building production systems before the interaction is proven, and it delivers a handoff that engineering can trust. The explicit states echo the divergence-then-convergence rhythm of the Double Diamond[n1] design-process model — but applied to raising fidelity rather than exploring the problem.
It misleads when the gates ossify into theater: sign-offs collected for their own sake, a fully-specced production artifact demanded for a feature that a quick experiment would have killed. Because each state looks like progress, a design can march all the way to production-ready while never having been checked against a real user — polished, integrated, and wrong. The classic misuse is treating visual fidelity as the measure of maturity: a beautiful comp reads as "nearly done" and pulls the schedule forward past the interactive checkpoint that would have exposed the flow's real defect. The guarding discipline is to bind every gate to the core reference and to make the interactive checkpoint (real behavior) mandatory before any technical or integrated work is funded.
How it implements the components¶
Design Mockup to Production Path fills the pipeline-and-handoff components of the archetype:
core_reference— the conceptual state pins the design's intent and constraints as the invariant every later state must preserve.validation_checkpoint— each state transition is gated on a question specific to that fidelity level (comprehension, aesthetics, behavior, buildability, coherence).handoff_artifact— the production-ready state yields a self-describing, engineering-consumable design specification, not merely a prettier mockup.stakeholder_readiness_signal— stakeholder sign-off at each gate authorizes the design to consume the next, more expensive state's effort.
It does not choose which fidelity_dimension_map axis to raise or hold a comparability_baseline across levels — those belong to Simulation Refinement Ladder and Digital Twin Maturation — and it carries no stop_or_defer_rule for halting the ramp on cost, which Engineering Review Gate owns.
Related¶
- Instantiates: Progressive Fidelity Increase — raises the fidelity of a design artifact through a fixed pipeline of representational states.
- Sibling mechanisms: Low-to-High Fidelity Prototyping · Engineering Review Gate · Coarse-to-Detailed Planning · Staged Research Model
Editorial Notes¶
Form Classification¶
Form family: Protocol, Workflow & Routine
Rationale: Design Mockup to Production Path operates as a repeatable ordered procedure or handoff sequence that coordinates action because it moves a design from conceptual, visual, interactive, technical, integrated, and production-ready states through explicit gates.
Independent corroboration: The frozen evidence defines Design Mockup to Production Path as 'Moves a design from conceptual, visual, interactive, technical, integrated, and production-ready states through explicit gates', so its operative form is Protocol, Workflow & Routine.
Review outcome: Independent reviewer agreement; high confidence.
Origin Attribution¶
Primary origin: Human-Computer Interaction
Origin pattern: Cross-disciplinary synthesis
Present-day reach: Multi-domain
Rationale: Digital product design cohered gated progression from sketch and visual comp through interactive prototype, specification, integration, and production handoff.
Related originating lineages:
- Computer Science & Software Engineering — Software delivery supplied implementation, integration, and release gates.
- Engineering & Design — Prototype-fidelity workflows supplied staged representation and verification.
Review resolution: Digital product design cohered gated progression from sketch and visual comp through interactive prototype, specification, integration, and production handoff. The retained alternate lineages materially shaped the mechanism's form.
Review outcome: Reconciled after independent review; high confidence.
Notes¶
The states are a representation pipeline, not a build pipeline: the interactive state can be throwaway, and often should be. The whole point is to spend real production effort only on a design whose intent has already survived cheaper renderings of itself.
[n1] The Double Diamond — a design-process model (popularized by the British Design Council) whose four phases alternate divergent exploration with convergent decision. This mechanism borrows its gated, phase-by-phase discipline but applies it to raising an artifact's fidelity rather than to problem discovery. ↩