User flow

A user flow is a way to catch every branch before anyone opens Figma. The diagram below is the checkout flow for a fictional bookshop called Ruled Lines. Twelve nodes, three decision points, one dead end. Each rectangle is a screen or a system action. Each diamond is a decision the user makes. Arrows follow the path a completed purchase takes.

What a good flow diagram is for

A flow diagram is a stress test. The point is to catch every branch before the design work starts. If a diamond ends up with no outgoing arrow, or two diamonds ask the same question at different depths, the interaction is not yet resolved. Drawing this before opening Figma has saved me weeks of rebuild work on projects that would otherwise have surfaced the same problem in usability testing.

The shapes and what they mean

Rectangles are screens or system actions. Diamonds are decisions the user makes. The gold rectangle in the top right is a soft exit (the user chose not to buy yet). The dashed line is an abandonment path where email is already captured, so a follow-up sequence can bring them back. The red-tinted "Fix errors" node is a loop, and the green "Order confirmed" node is the terminal success state.

Reading the happy path

The gold-highlighted arrow from bag drawer to bag page traces the actual sequence a completed purchase takes. Every other branch is a variation. When I share this with engineering, the first conversation is usually about the "signed in" decision, because there is a shortcut where a signed-in user skips the shipping form. Making that shortcut visible on the diagram gets both sides aligned before code.

What is deliberately missing

Error states beyond "Fix errors" are not in this diagram. Neither is the account creation flow. Both live on their own diagrams so this one stays legible. A flow diagram that tries to be complete usually stops being useful. Twelve to fifteen nodes is a workable limit.

Design decisions

• One node, one action. A screen with three important actions gets three nodes. Compressing them into one hides branches.
• Colour codes states, not aesthetics. Gold for happy path, red-pink for errors, green for success, grey for exits. Neutral for everything else.
• Left to right, top to bottom. The reader's eye already knows how to follow that direction, which frees the diagram to use position for meaning.
• Dashed lines for indirect paths. Abandonment and edge cases sit visually behind the primary flow.

The stack

Tool

Figma with FigJam for the diagram, exported to the design file for reference.

Sharing

Static PDF for engineering review, live link for iteration.

Adjacent artifacts

Journey map for emotion, wireframes for layout, prototype for interaction.