Design

User flow

Screen-by-screen path, decisions, error cases, empty states.

When. Error cases and empty states are half of the dev work. The flow surfaces them before the sprint.

Duration
2 h
Participants
Design + tech
Output
Complete flow with edge cases
Stage
Idea · Pre-PMF · Post-PMF · Scale-up · Mature
EntryScreen ADecision?Error / em…Screen BSuccess
Open in FigJamFind the right sequence

In FigJam: File → Duplicate to your drafts, then keep this workshop's section. Get the file on Figma Community

Filled example

EntryLéa taps 'Close job'on the interventionformPhone shows nonetworkScreen ASummary of parts,time and 4 photosSignature areagreyed: 'Signatureavailable whenonline'Decision?Is the customerstill here?Yes: save now, askfor signature laterNo: save now, flag'signature missing'Screen BJob saved locally,clock icon on thelistToast: 'Will syncwhen networkreturns'SuccessBack at the van, 4Greturns, queue syncsMarc sees the job asdone at 14:12Sophie's invoicingexport includes itthe same dayError / empty stateSync fails 3 times:red badge, 'Retry'buttonPhoto too heavy:compressedautomatically, noerror shown to LéaJob deleted by Marcmeanwhile: kept as'orphan', supportalerted

Example data. Fieldnote is a fictional company used to fill all 61 boards, so the examples tell one consistent story.

Post-PMF, Ana and Tom trace Léa's path when she closes a job in a basement with no signal.

What the team took away

The flow revealed the orphan case nobody had thought of: Marc deleting a job Léa is logging offline. It became a story in release 2 instead of a support ticket.

How to run it

Preparation

Agenda

  1. 10 min
    Fix the ends
    Confirm the entry and the success state. Ask 'how does the user know they succeeded?' and write the answer in the success shape. If nobody can answer, stop and fix that first.
  2. 25 min
    Happy path
    Draw the shortest path from entry to success, screen by screen. One rectangle per screen, one verb on each arrow. No decisions yet: the happy path has no forks.
  3. 25 min
    Decisions
    Walk the happy path and at each screen ask 'what can the user choose or fail here?' Add a diamond for every real fork. Write the question inside the diamond, the answers on the arrows.
  4. 30 min
    Errors and empty states
    For every diamond, draw the No branch to its end: an error screen, a retry, or a dead end. For every list or dashboard, add the empty state. This is where the tech lead earns their seat.
  5. 20 min
    Data check
    Tech lead marks on each screen what data it needs and where it comes from. Any screen needing data the product does not have gets a red flag and an owner.
  6. 10 min
    Count and close
    Count the screens and the error branches. Read the count aloud: that is the real size of the story. Number the screens in flow order and export.

Pitfalls

Afterwards

The flow becomes the screen list for the wireframes and the acceptance criteria for the story. Every diamond turns into a test case. Pin the flow next to the story map slice it belongs to.

Related workshops

Back to the compassAll workshopsVersion française