Ask most businesses when their website project started and they will tell you the date the first mockup appeared. That is the mistake. By the time anyone is choosing a typeface, three pieces of work should already be finished, and if they are not, the design is a guess dressed up as a decision.
Design is not the first step. It is the fourth. Discovery, synthesis and planning come before it, and each one produces something the design cannot work without.
TL;DR
- Designing first overvalues the surface and skips the research that tells you what the surface is for.
- The order is discovery, synthesis, planning, then design. Each step hands the next one something concrete.
- Design that arrives fourth is faster, not slower, because it is executing a brief instead of inventing one.
- Design is fourth, not last: after it come iteration and measurement, which is where the site actually gets good.
Why designing first goes wrong
Conventional wisdom puts design at the front because it is the visible part. Stakeholders can react to a mockup; they cannot react to an interview transcript. So the mockup gets made, reactions are gathered, and the site is built around whichever reaction was loudest. Nobody has asked the audience anything. The result is a site that reflects the preferences of the people in the room.
Your brand’s image is not the starting point. It is the endgame, where every design choice reflects what you learned first.
The four steps, in order
- Discovery and problem definition
Stakeholder interviews, surveys and focus groups, competitive analysis, customer journey mapping and behavioural segmentation. The output is a clear statement of where the current experience falls short and for whom.
- Strategic synthesis
Performance data, social listening and industry benchmarking are combined with the qualitative findings into one creative brief that says what the design has to achieve and why.
- Planning and storyboarding
Measurable milestones, a visual script that turns the brief into cues and touchpoints, and a mapped user flow that documents every interaction before anything is drawn.
- Design
High-fidelity mockups that execute the brief, governed by defined aesthetic standards and kept consistent across every channel and device.
What discovery actually produces
Discovery is not a formality before the real work. It is where the hidden barriers surface: the objection nobody on the team knew customers had, the competitor page that is quietly winning the comparison, the point in the journey where people give up. Stakeholder interviews expose the internal view. Surveys and focus groups check it against the audience. Journey mapping shows where experience and expectation diverge. Behavioural segmentation shows which users hit which friction.
Done properly, discovery ends with a problem definition that is specific enough to design against: not “the site needs to feel more premium” but “prospects cannot tell what we do differently within the first screen”.
Synthesis turns findings into a brief
Raw research is not a design input. A stack of interview notes and an analytics export will produce a different site depending on who reads them. Synthesis is the discipline of turning them into one creative directive: what the design must communicate, to whom, in what order, and how success will be measured. Performance analysis identifies the drivers of behaviour. Social listening picks up shifts in how the market talks. Benchmarking shows where there is room to differentiate. The brief that comes out is what the designer will be asked to execute.
Planning makes the brief buildable
Between the brief and the mockup sits the step most often skipped. Planning sets milestones so each phase ends at a checkpoint rather than a feeling. Storyboarding translates the brief into a visual narrative: which message lands where, what the visitor should feel at each point. Mapping the user flow documents every interaction so that friction is found on a diagram rather than in production. When the designer opens their tools, they are not facing a blank canvas; they are facing a plan.
If your last project started with a mockup, we can show you what discovery and synthesis would have changed. It is usually the brief, not the design.
Then, and only then, design
Design that arrives fourth is a different activity from design that arrives first. Every choice of typeface, colour and layout is anchored in something: a finding, a brief line, a mapped flow. High-fidelity mockups execute rather than explore. Aesthetic standards (logo use, colour, type) are set so the identity stays consistent from mobile to desktop and from the website to everything else. And because the brief already says what the design is for, the review conversation is about whether it meets the brief rather than whether people like it.
This is also why the fourth-step design is usually faster. The exploration that normally happens in endless mockup rounds has already happened, in cheaper materials, earlier.
Fourth, not last
Design is not the end of the process either. Once the site is live, the same discipline continues as a cycle:
- Insight capture: heatmaps and session recordings record where people click, scroll and stop.
- Evaluation: A/B tests and usability sessions turn bounce rates and session durations into specific directives.
- Iteration: short design sprints apply what the data showed.
- Reintegration: each change is validated against live behaviour and fed back into the system.
The trust signals that make a site convert (consistent visuals, credibility cues, clear microcopy, well-placed calls to action) are refined here, against evidence. A site that keeps evolving with its data stops being a launch and becomes an asset.
One more thing the order fixes: it forces research, design and development into the same room. Discovery findings have to reach the designer; the mapped flow has to reach the developer. When the steps are run in sequence with shared checkpoints, the hand-offs stop losing information, and the brand that ships is the one the research described.
Good to know
FAQs
Because discovery, synthesis and planning each produce something design needs: a defined problem, a creative brief and a mapped user flow. Designing before those exist means guessing, then defending the guess.
Stakeholder interviews, surveys and focus groups, competitive analysis, customer journey mapping and behavioural segmentation, ending in a problem statement specific enough to design against.
One creative brief: what the design must communicate, to whom, in what order, and how success will be measured. It combines performance data and benchmarking with the qualitative findings from discovery.
Usually the opposite. The exploration that normally happens in repeated mockup rounds has already happened earlier and more cheaply, so the design phase executes a brief rather than searching for one.
Next step
Start with the three steps before design
We run discovery, synthesis and planning before a single mockup, so the design that follows is executing a brief rather than guessing at one.