SOP: Converting UX Flow into Wireframe Drafts

1. Purpose

To provide a repeatable process for translating validated UX flows into structured wireframe drafts that are layout-ready, responsive-aware, and developer-aligned.

2. Scope

• Applies to all new screens, features, and redesigns.
• Used by designers and design leads before moving to high-fidelity UI.

3. Definitions

• Wireframe Draft → A low/medium fidelity layout focusing on structure, not visuals.
• Wireflow → Wireframe + UX flow combined to show interactions.
• State Variants → Empty, Loading, Success, Error versions of a wireframe.

4. Step-by-Step Process

Stage A – Preparation

1. Review Inputs
   • Approved UX Flow Diagram (EPIC 2.4).
   • Interaction-State Coverage Model (EPIC 2.6).
   • Navigation Depth Model (EPIC 2.7).
2. Define Screen Scope
   • Which screens, states, and variants need wireframes.
   • Assign IDs consistent with flows (e.g., WF1, WF2).

Stage B – Drafting Wireframes

1. Layout Structure
   • Apply Wireframe Structuring Model (Doc 3.2).
   • Break into modular zones: Hero, CTA, Info Blocks, Actions.
   • Define spacing using Grid & Spacing Rulesheet (Doc 3.5).
2. Content Mapping
   • Place placeholder text/images (no lorem ipsum).
   • Ensure alignment with Design Goals & Success Criteria (EPIC 1.7).
3. State Variants
   • Create at least: Empty, Loading, Success, Error.
   • For data-driven screens, add Permission/Edge cases.
4. Annotations
   • Add notes for interactions, data sources, and transitions.
   • Use consistent annotation style (side notes, sticky labels).

Stage C – Validation & Review

1. Internal Review
   • Run through Wireframe Review Checklist (Doc 3.6).
   • Cross-check with UX goals and flows.
2. Peer Feedback
   • Use Peer Wireframe Feedback Sheet (Doc 3.9).
   • Incorporate suggestions, fix gaps.
3. Lead Sign-Off
   • Final review by Design Lead.
   • Store approved drafts in Figma folder: Project > Wireframes > Approved.

Stage D – Transition to UI

1. Handoff Prep
   • Organize frames by ID/order.
   • Merge into Wireflow Mapping Sheet (Doc 3.4) for flow + layout view.
2. Approval & Lock
   • Apply Wireframe Approval SOP (Doc 3.10).
   • Mark files as “Locked for UI.”

5. Roles & Responsibilities

• Designer Assigned → Creates wireframe drafts, annotations, states.
• Peer Designer → Reviews logical/structural quality.
• Design Lead → Approves final drafts, ensures business/user alignment.
• PM (Optional) → Validates against business goals.

6. Governance

• Wireframes cannot move to UI stage without approval.
• Missing state variants or incomplete annotations = automatic revision.
• Consistency in spacing and layout rules is mandatory.