Drawing the flow
Unit 2 of 8 · Lesson 2 of 4Index
Dev asks where else signup leaks. Nobody at Sona has ever drawn the whole flow. You sign up with a fresh email and screenshot every screen.
A flow is states, not screens
- 01One box per screen, one arrow per tap
One box per screen, one arrow per tap
Start with the happy path exactly as a new user meets it. Sona's signup is “four simple steps”. Your screenshots say otherwise.
- 02Every check is a fork
Every check is a fork
Wherever the app checks something, the flow splits. A valid code goes on. An expired one goes somewhere else, and that somewhere is rarely designed.
- 03Hunt for dead ends
Hunt for dead ends
A screen with no way forward is where people leave. They do not complain. They simply stop showing up in the numbers.
- 04Every screen is four screens
Every screen is four screens
Empty, loading, error and full. If the flow only shows the full one, it is missing three quarters of what users actually see.
A delayed response changes the flow
Interactive teaching example · All numbers and tickets are fictional.
The server confirms completion before the product shows a saved result. A button click alone is not confirmation.
How Amazon handled it
- The situation
Checkout in the late nineties took five to seven steps, and every step lost customers.
- What they did
Amazon removed them with one click. They already had the address and the card, so the extra steps only existed because the flow followed the company's data model, not the customer's intent.
- Why it matters to you
Most flows are long because of how the company is organised. Drawing the flow is how you find those steps.
Doing it with AI, and where it breaks
Describe the flow in prose, have a model turn it into Mermaid code, render it, then hunt for the states it dropped.
Models draw clean happy paths. They leave out “closes the app and comes back tomorrow”, “code expired” and “email already registered”, which is where the drop off lives.
Convert this flow into a Mermaid stateDiagram-v2. Then list every state you did NOT include that could happen in reality: expired sessions, partial completion, duplicate accounts, network failure, permission denial.
Build it
A rendered flow of Sona's signup, or your product's, with every edge state and the event name on every arrow.
Mermaid Live EditorFigma or Excalidraw
The flow I thought I understood
Publish a 500–800 word project teardown. Show your original flow and a revised version with one recovery path. Explain a mistaken assumption, the evidence behind your revision, and what you would test next.
Include: A readable before-and-after flow with captions explaining the changed state.
- Write in your own voice for someone facing the same product problem.
- Use AI to critique the structure and find unsupported claims. Verify every source, number, and quotation yourself. Add a short note describing how you used AI.
- Remove private customer, company, and participant information. Label practice scenarios and synthetic data clearly.
- Publish on Medium, Substack, or a relevant Reddit community that permits project write-ups and links. Follow its posting rules; share a useful account of the work.
Include this plain attribution with a clickable link:
I developed this project while learning product management at pmcademy.com.
The worked solution
Stuck, or want to compare?
There is a worked solution. Try the build first. Reading it before you have attempted anything is the fastest way to learn nothing.
Checkpoint
If you did the build, these take two minutes. If you cannot answer one of them, that is the part to go back to.
Moving on marks this lesson complete. Finish the build first, it is the part that counts.