Purpose
To create a standardized structure for visualizing user flows:
- Shows tasks, decisions, branches, loops, and outcomes.
- Bridges task scenarios (EPIC 2.1) and wireframe mapping (EPIC 3).
- Acts as the blueprint for wireflows and UI planning.
Table – Flow Mapping Fields
| Flow Step ID | User Action / Task | System Response | Decision Point | Next Step(s) | Notes / Variants |
| F1 | Click “Book Demo” | Load booking form | Y/N: Page load successful? | F2 (success) / Error path | Show loading state |
| F2 | Fill form fields | Validate input | Y/N: Email valid? | F3 (valid) / Error path | Inline error handling |
| F3 | Submit form | Trigger backend API | Y/N: Slot available? | F4 (confirm) / F5 (error) | Auto-check calendar availability |
| F4 | Confirmation screen | Send email + calendar link | — | End | Confirmation email triggered |
| F5 | Error shown | Suggest alternatives | Y/N: Retry? | F2 (retry) / End | Show alternate time slots |
Symbols / Notation Guidelines
- Circles → Start/End points.
- Rectangles → User actions/tasks.
- Diamonds → Decision points (Yes/No, Success/Fail).
- Arrows → Direction of flow.
- Dashed lines → Optional/alternate paths.
Usage Notes
- Every decision point must have at least 2 branches (Yes/No, Success/Fail).
- Always include edge cases (error, empty state, timeout).
- Keep IDs (F1, F2, F3…) consistent → useful for linking to wireframes later.
- Use flow notes column to document exceptions or dev clarifications.
Example (Simplified Visual Flow)
(Start) → [Book Demo Clicked] → (Form Loads?)
↓ Yes ↓ No
[Fill Form] [Error: Retry?]
↓ Valid Input ↳ Retry → [Fill Form][Submit Form]
↓ Slot Available?
[Confirm Screen] → (End)
↓ No
[Error: Suggest Slots] → (Retry Path)
Outcome: UX flows become standardized, repeatable, and dev-friendly, with both happy paths and edge cases accounted for before wireframing.