A hybrid design deliverable that combines wireframe screen layouts with flowchart-style connectors to show both screen structure and navigation logic in one document. Wireflows are particularly effective for communicating complex, branching interaction patterns — where a flat wireframe would leave transition logic unexplained.
Common contexts
- Documenting a multi-step onboarding flow with conditional branching in a single handoff artifact for engineering
- Presenting an end-to-end account recovery flow to stakeholders who need to see both screens and logic simultaneously
- Replacing a disconnected wireframe deck and a separate flow diagram with one consolidated wireflow for a complex checkout redesign
Use when
Use a wireflow when the interaction has branching paths, conditional states, or multiple entry points that a flat wireframe sequence can't represent — the additional connector layer prevents engineering from having to infer navigation logic that should be explicitly designed.
Avoid when
Don't use wireflows for simple, linear sequences with no branching — the added connector layer on a five-screen checkout with no conditional states creates visual clutter without adding communicative value. A clean wireframe sequence is faster to produce and easier to review.
The best wireflows are the ones that make engineering ask zero clarifying questions about navigation — if your handoff is generating 'what happens when the user does X?' tickets, a wireflow is almost always the fastest fix.
Real-world examples
- Spotify's product design team uses wireflows during sprint planning to communicate the full interaction logic of a new feature to engineering leads, combining wireframe-level detail with flow diagram arrows that show state transitions.
- Figma's 'prototype' mode is essentially a wireflow tool: designers connect frames with arrows and define triggers, producing an interactive wireflow that communicates both layout and behaviour in one artefact.
- GOV.UK design teams use wireflows to document the conditional logic of form flows — showing which questions appear based on previous answers — a level of interaction detail that wireframes alone cannot communicate to developers.