Tags:Design
Draw the flow before the screen
Most redesigns start with how a page should look. The good ones start with what a person is trying to get done. Here’s the order we work in, and why it saves rebuilds.
Most website projects start with a moodboard.
Some colours, a few references, a homepage design that everyone likes. Then the inner pages. Then the build. Then, a month after launch, someone notices that nobody can find the pricing, and the redesign starts again.
The problem isn’t the design. It’s the order.
Start with the job
Every visitor arrives with a job. Book a table. Compare two plans. Find out if you work with companies their size. Get a phone number.
Write that job down in one sentence, before anyone opens Figma. If you can’t, the page doesn’t have a purpose yet, and no layout will give it one.
Then the steps
Once you know the job, list the steps it takes to get it done, in order. Arrive. Work out what this is. Compare the options. Decide. Get confirmation that it worked.
That list is the flow. It’s usually five or six steps, it fits on a sticky note, and it’s the most useful design artefact in the whole project.
Now walk it as a stranger and mark where you hesitate. Can you tell what the company does after one screen? Is the price, or at least how pricing works, findable? Is there one obvious next step, or four competing buttons?
Every hesitation is a design brief. That is where the screens need to work hardest.
Screens come last
Only now do you design screens: one per step, each with a single job, each removing the doubt you found at that step. Proof goes where the doubt is, not in a testimonials section at the bottom. The call to action asks for the next small step, not the whole commitment.
Visual design still matters enormously. But it’s the last layer, not the first. A beautiful screen that answers the wrong question is still the wrong screen.
Why it’s faster
Drawing the flow takes half a day. It feels slow, because there’s nothing pretty to show. But it’s the cheapest moment in the project to change your mind: moving a sticky note costs nothing, while moving a built page costs a sprint.
It also ends most design arguments before they start. “Do we like this layout?” is a matter of taste. “Does this screen help someone compare the options?” has an answer.
Design is answering a question with a screen. Write the question down first.
