Your app has screens, and each one works. But someone landed on it to get one thing done, and the path from opening it to done winds through more steps and dead ends than it should. That path is the product, more than any single screen is. This chapter gets you the shortest clear route to the goal, with every screen ready for the ways real use goes sideways.
8.1.1Design the shortest path to done
A user came for one job: send the invoice, book the room, save the note. The user flow is the path they take across screens to reach it: an entry point, a few steps, the goal reached. Designing the experience means designing that path, the journey between screens, not the styling of any one of them. Styling each screen is its own job; here you design how they connect. The goal at the end is the one from the spec you wrote when you planned, the reason the whole app exists.
8.1.2Map the main flow before you judge it
You cannot shorten a path you have not drawn. Write the main flow as a single line, entry to goal, one box per screen the user actually touches: Open app -> Pick a template -> Fill three fields -> Saved. Laid out like that, the extra step jumps out at you, the confirmation nobody needs, the settings screen between the user and their goal. Read the line and ask of every box: does the user have to be here to reach the goal?
8.1.3Cut the steps the agent piles on
Left alone, an agent adds. It offers a settings page nobody asked for, a confirmation step, a field that could default itself. Each one is friction: a place the user has to stop and think, and every stop loses some of them. Your job is subtraction. Fewer steps, sensible defaults so the common choice is already made, and a next action that is always obvious. When you truly cannot cut a step, make it the only thing on that screen.
8.1.4Every screen has four states, not one
Here is the flow lesson the agent skips hardest. It builds each screen for the one moment when everything is present and correct, and ships only that. A real screen has four states, and unless you name all four you get just the last: empty (no data yet), loading (working), error (it failed), and success (it worked). The empty and error states are where flow is won or lost, so an empty screen shows the first step instead of a blank box, and an error says what broke and how to fix it.
Every screen, four states:
[ ] Empty no data yet: show a first step, not a blank
[ ] Loading working: show it is busy, not a frozen page
[ ] Error it failed: say what went wrong and how to fix it
[ ] Success it worked: the result, and the obvious next action
Being reachable by everyone, by keyboard or screen reader, is part of the flow too; that comes later, when you make the app fast and accessible.
This prompt maps your flow, marks the friction, and designs all four states:
Act as a senior product designer. Do not restyle
anything yet; work on the flow.
First, map the main flow for my app as a line of
screens from entry to the one goal the user came
for. Keep it to the fewest screens that reach it.
Then flag friction: every extra step, field, or
choice on that path I could cut, default, or
merge. Recommend the shortest version.
Then, for each screen in the flow, design all
four states: empty (no data yet), loading,
error (what failed and how to fix it), and
success (the result plus the next action).
Give me the flow and the cuts first, for my
approval, before you design the states.
My app and the one job users come to do:
Do this now: paste the prompt, describe your app and the one job users come for, and have your agent map the flow, mark the steps to cut, and design all four states for each screen before you polish how any of it looks.
