User Flow

The flow lives in a chat thread. Engineering builds the happy path, and the first question in QA is what happens when she is not signed in.

What is on the board

• Start and end. Two black pills that close the flow at both ends, so there is never an argument about where it begins or what counts as finished.
• Screen cards. A bold screen title and a note line under it saying what is actually on that screen. A component, so renaming one does not mean redrawing it.
• Decision diamonds. A question with a yes path and a no path off it. The no branch drops below the main line, does its work, and returns, so no two arrows cross.
• Labelled paths. Every path carries its own label, green for yes and red for no. Hide the label on paths that do not need one.
• The legend. A row naming the four pieces: start or end, screen, decision, path when yes, path when no. Every colour is a variable, so dark mode is one switch.

Before and after

• Before: A flow described in a chat thread.
  After: A board with a start and an end.
• Before: The happy path only.
  After: A no branch off every decision.
• Before: Boxes redrawn by hand each time.
  After: Screens and decisions as components.
• Before: Colours hard coded into the shapes.
  After: Every colour a variable, dark in one switch.
• Before: Arrows crossing each other.
  After: The no branch drops below and returns.
• Before: An Arabic flow mirrored from the English one.
  After: A flow that starts on the right and ends on the left.

What lands in the download

• FIG The template. One Figma file, four pages: English light, English dark, Arabic light, Arabic dark, all on one variable collection. Auto layout throughout, so every cell grows as you type.
• PDF The guide. 8 pages: the four boards, a five step how to use, and a glossary of every field with its Arabic label beside it.
• PDF, MD Pro. Five Claude prompts: fill it from my notes, critique it, Arabic edition, turn it into insights, push it to Figma.
• PDF Pro. The facilitation guide. A thirty minute session: what to ask, in what order, and how to close it.
• FIG Pro. A second worked example in a second market, as its own Figma file, so you can read the method instead of guessing at it.
• FOLDER Pro. The Claude Code skill. Point it at your notes folder and it fills the board, then writes it into your own Figma file by layer name.

Who it is for, and when to run it

For the handover between design and engineering, and for the moment before it when you still have to decide what happens on the unhappy path. Draw it before the screens, not after them.

Two editions. Free: the Figma file and the PDF. Pro, 10 dollars: adds the five prompts, the facilitation guide, the second worked example and the Claude Code skill.