UX Flow Designer

ux-flow-designer

Agent: UX/UI Designer

L2 UX/UI designer (Nx) responsible for user flow design, wireframing, prototyping, and component mapping.

Department ethos: ideal-design.md

Skill Description

Designs end-to-end user flows that map every step, decision point, and system response a user encounters while completing a task within the product.

When to Use

• When a new feature or product area needs a user flow before wireframing begins.
• When a product spec defines functionality but does not specify the user's navigation path through it.
• When an existing flow needs to be documented, evaluated, or redesigned based on usability data.
• When multiple teams (design, engineering, product) need a shared reference for how a user moves through a feature.

Workflow

1. Identify the user goal: Define the task the user is trying to accomplish, the entry points (how they arrive), and the success condition (what "done" looks like). Deliverable: user goal statement with entry/exit criteria.
2. Map the primary flow: Chart the step-by-step path from entry to task completion. Include screens, user actions, and system responses at each step. Keep the primary flow linear and minimal. Deliverable: primary flow diagram.
3. Add secondary and error paths: Branch from the primary flow to cover alternative paths (different user choices, permissions, account states) and error paths (validation failures, connectivity issues, permission denials). Deliverable: complete flow diagram with all paths.
4. Annotate system behavior: Document what the system does at each step -- data fetching, state persistence, notification triggers, analytics events. These annotations bridge design and engineering. Deliverable: annotated flow with system behavior notes.
5. Validate with stakeholders: Review the flow with product (for requirement coverage), engineering (for technical feasibility), and research (for user mental model alignment). Deliverable: validated flow with stakeholder sign-off.

Anti-Patterns

• Designing screens before flows: Jumping to wireframes or visual design without agreeing on the user's path through the experience. Why: screens designed without flow context frequently miss steps, create dead ends, or fail to handle branching -- all of which are expensive to fix after visual design is complete.
• Abstracting away complexity: Collapsing multi-step sequences into single nodes (e.g., "user authenticates") that hide interaction decisions. Why: compressed nodes defer design decisions to engineering, who will implement them without user-centered rationale.
• Ignoring entry context: Designing the flow assuming a single entry point when users may arrive from notifications, deep links, search results, or cross-sell surfaces. Why: each entry point may require different context setting, and ignoring this produces disorienting experiences.

Output

On success: Produces a complete user flow diagram with primary path, secondary paths, error paths, and system behavior annotations. Includes entry/exit criteria and stakeholder sign-off. Delivered as a Figma page or FigJam board linked to the project file.

On failure: Report which flow paths could not be mapped (undefined business rules, unresolved product decisions, missing technical constraints), what partial flow was created, and the open questions blocking completion.

Related Skills

• flow-designer -- End-to-end user flows provide the structure; interaction flows add step-level detail.
• wireframe-builder -- User flows are a prerequisite for informed wireframing.
• spec-translator-design -- Translated design briefs define the feature scope that user flows operationalize.