Web Application User Flow Diagrams Development
User Flow is a diagram of user movement through interface to complete specific task. Not site map (what exists), not wireframe (how it looks), but exactly the route: where they came from, what they saw, what they did, where they ended up, what happened on error.
Without User Flow developers implement "happy path" and forget edge cases. Then in production it turns out user after payment, if email didn't arrive, doesn't know what to do — and leaves.
User Flow Diagram Anatomy
Standard elements we use:
- Rectangle — screen or page
- Diamond — decision point (logged in / not logged in, paid / free plan)
- Rounded rectangle — user action or system action
- Parallelogram — data input/output
- Arrows with labels — transitions with condition indication
In practice, strict notation rigor (BPMN, UML Activity) matters less than team readability. We usually work in FigJam or Miro with color coding: blue — screens, yellow — decisions, red — error paths.
Deep Dive: Different Flow Types
Task flow — one user, one task, without role branching. Fits simple scenarios: "add item to cart", "change password".
User flow — accounts for different entry points and branching. Same result (subscription payment) may be reached from home page, from email, from push notification — all three paths should be shown.
Wireflow — hybrid of wireframe and flow: transition diagram where nodes are screen sketches, not abstract rectangles. More time-consuming but much clearer for client and developer.
Real project example — SaaS for project management. Onboarding flow for new user after working through included 14 states instead of initial 5:
- Registration by email
- Registration via Google OAuth
- Invitation from colleague (different path — without tariff selection)
- Email verification — success
- Email verification — link expired
- Email verification — resend
- Tariff selection
- Payment data entry
- Payment error — invalid card
- Payment error — insufficient funds
- Successful payment
- Free trial (payment bypass)
- First project creation (onboarding checklist)
- Onboarding skip
Each of these states — separate task for backend and separate screen for frontend. Skip them at planning stage = discover midway through development.
Tools
| Tool | Strengths | When to Use |
|---|---|---|
| FigJam | Integration with Figma, convenient real-time | If design is done in Figma |
| Miro | Flexibility, templates, convenient for workshops | Large teams, collaborative sessions |
| Lucidchart | Strict notation, export to Visio | Corporate clients with documentation requirements |
| Whimsical | Fast, minimalist | Small projects, quick iterations |
Link to Development
User Flow diagrams directly affect app routing architecture. Each rectangle-screen — potential route. Each diamond-decision — potential guard or middleware. Each red error path — separate error state in component or separate error page.
In React apps this literally maps to React Router structure: PrivateRoute, GuestRoute, nested layouts — all this derives from flow, not invented by developer on the fly.
Timeline
User Flow for one key scenario (registration, payment, onboarding) — 1–2 working days. Complete set of flows for MVP SaaS product (5–8 scenarios) — 5–10 working days.