A redesign starts with something a brand-new website never has: evidence. Your current site already shows which pages people find, which paths lead to an enquiry, which words they search for and where they give up. A good website redesign process uses that evidence to decide what changes, and protects what already works.
This guide covers the design decisions, in order. If you haven’t yet decided whether you need a redesign, start with the signs your website needs a redesign. Protecting rankings and mapping old URLs has its own website migration SEO checklist, and the stages, roles and sign-offs belong in a website project plan.
The website redesign process at a glance
Seven website redesign steps, each feeding the next:
- Gather evidence from analytics, Search Console, session recordings and a quick usability test.
- Decide what to keep, change or remove in your content, labels and design patterns.
- Choose the scale: an evolutionary redesign in stages, or everything at once.
- Plan content before visuals, page by page.
- Wireframe the key templates and link them into a clickable prototype.
- Test the prototype with real users, using the same tasks as before.
- Design the visuals and capture them in a small design system.
Then launch, and measure against the baseline from step 1.
Step 1: Start from evidence, not opinions
Everyone involved has opinions about the current site, formed by seeing it far more often than any customer does. Before anyone sketches a layout, collect what visitors actually do.
Top pages and paths in GA4
In Google Analytics 4, the Pages and screens and Landing page reports (under Engagement) show which pages people view and where they arrive. Look at twelve months if you have them, so a seasonal peak doesn’t mislead you. Then build a path exploration to see the routes towards an enquiry. Explorations only reach back as far as your data-retention setting (two months by default).
If enquiries aren’t tracked as key events, set up enquiry tracking in GA4 first, or you will never know whether the redesign worked.
Search Console queries
In Google Search Console, filter the Performance report by page to see the searches that bring people to it. It shows which pages earn clicks, so the redesign mustn’t break them, and which words searchers use, often not the words on your menu.
Session recordings
A free tool such as Microsoft Clarity records how real visitors scroll, tap and hesitate. Watch a few dozen phone sessions on key pages and note the patterns: taps on things that aren’t links, forms abandoned halfway, the section everyone scrolls past. Clarity masks what people type into form fields, but check its settings and your consent rules before you switch it on.
A quick usability test of the current site
Ask around five people who match your customers to complete a few realistic tasks on a phone: find a service, check a price, send an enquiry. Watch without helping and note every pause and wrong turn. Nielsen Norman Group’s long-standing advice is that about five participants per round reveal most of the common problems. Keep the task list for step 6. Our website UX audit guide covers running sessions well.
The output: a one-page evidence summary
Step 2: Decide what to keep, change or remove
Review the site in three layers. Every item gets a verdict, and every verdict needs a reason from step 1, not a preference.
| Layer | Keep it when | Change it when | Remove it when |
|---|---|---|---|
| Content: pages and sections | It earns entrances, ranks or sits on the path to an enquiry | Visitors arrive and leave, or it is out of date | Nobody visits it, searches for it or needs it (redirect it) |
| Labels: menus, headings, buttons | Visitors and searchers use the same words | Testers hesitate, or searches use a different term | It is internal jargon or a department name |
| Patterns: layouts, components, flows | People use it without hesitation | Recordings show repeated struggle | It is decoration, like a slider no one clicks |
What to keep in a website redesign
- Pages that rank or bring enquiries, with the headings, copy and titles behind those results. Improve them rather than rewrite them.
- Web addresses, wherever the new structure allows, especially for pages people link to or bookmark.
- Labels customers already use, especially the ones that match their searches.
- Familiar positions for what returning visitors look for: the menu, the phone number, the login, the price list.
- Recognisable brand assets, unless the business has genuinely changed.
Labels are where evidence pays off fastest
If the menu says “Solutions” but searchers find you through “stainless steel fabrication”, the label is working against you. Renaming it costs almost nothing, yet it is easy to miss when a redesign starts with colours. There is more on labels in website navigation design.
Step 3: Choose an evolutionary or all-at-once redesign
An evolutionary redesign changes the site in stages: labels and navigation first, then the templates that matter most, then the rest. An all-at-once redesign replaces everything in one launch, which is the right call when the foundations themselves are the problem.
| At a glance | Evolutionary redesign | All-at-once redesign |
|---|---|---|
| Best when | The platform is editable and secure, and the structure roughly fits how customers choose | The platform can’t be safely updated, the site breaks on phones throughout, or the structure or brand is wrong |
| Risk at launch | Lower: small changes, one at a time | Higher: everything changes on one day |
| Measuring impact | Each change can be compared with the last | Harder to tell which change made the difference |
| URL changes | A few at a time | Mapped and redirected in one migration |
When the redesign is really a rebrand
If the brief includes a new name, logo, audience or tone of voice, settle those decisions before design starts, or the site will express a brand still being debated. Rebranding your website covers what to tell existing customers.
Step 4: Put content before visuals
Content-first design means designing around the real words, images and proof each page will carry. Layouts drawn around placeholder text break when the real content arrives: headlines run to three lines, sections built for three short points must hold seven long ones, and translations run longer or shorter.
Give every page a job
For each page, write a short brief: who arrives, what they need to know and in what order, and the one action you want next. A page that can’t be given a clear job probably belongs in the remove column.
Outline in real words, and gather proof early
Designers don’t need final copy, but they need more than a page title: the real headings in order, the key points, the proof and the call to action. Start collecting photos of your own work, testimonials you have permission to use, prices and specifications now; they take longest to gather and are often what visitors trust most. A website content plan sets out who writes what, and by when.
Steps 5 and 6: Wireframes, prototypes and tests with real users
Redesign wireframes and prototypes let you test the structure while changes are still cheap: moving a section in a wireframe takes minutes, but after the build it means rework.
Wireframe the templates, not every page
Most business sites run on a handful of templates: home, service, project or product, article and contact. Wireframe those at phone width first, in plain greys with real headings, so feedback is about order and priority rather than colour. Then check each one:
- Does the order match the questions visitors ask, in the order they ask them?
- Is the next step visible wherever someone might be ready to act?
- Has anything from the keep list gone missing?
Prototype, then test with the same tasks
Link the wireframes into a clickable prototype in a tool such as Figma, including the menu, enquiry form and confirmation message, so people can complete a whole task. Then run the step 1 tasks with around five new participants, on a phone.
Because the tasks are the same, you see directly what the new structure fixed, what it didn’t and what it broke. Fix the worst issues and test again: two or three short rounds usually teach more than one big one. If your customers use more than one language, test in each of them.
Step 7: Design the visuals, then build a small design system
Only now does the visual layer take centre stage: typography, colour, imagery, spacing and motion. It works best when it strengthens a tested structure rather than decorating an untested one.
Build accessibility in here rather than auditing it at the end. At level AA, WCAG 2.2 asks for text contrast of at least 4.5:1 (3:1 for large text), 3:1 for the boundaries and states that identify buttons, fields and other controls, and click or tap targets of at least 24 by 24 CSS pixels, with some exceptions. WCAG 2.2 explained covers the rest of level AA.
Keep the design system small
A redesign fixes the site on launch day; a design system stops it drifting apart as different people add pages. Most business websites need only four parts:
- Foundations: colours, type sizes and spacing, defined once.
- Components: buttons, forms, cards, navigation and call-to-action sections, with their hover, focus and error states.
- Templates: the page types from step 5, with a note on when to use each.
- Content rules: tone of voice, button wording and image style.
It should live in the website, not only in a design file. On WordPress, that means global styles, reusable sections and page templates that editors build with. Our guide to design systems for websites explains the options.
A worked example: the property developer redesign
The property developer case study shows where the big redesign decisions sit. The old site took nine seconds to load and broke on phones; enquiries came by phone only, untracked; and marketing needed a paid developer to change a photo.
| Decision area | What the redesign did |
|---|---|
| Structure | Organised around buyers’ questions in order (which project, which unit, how much), with a page per project showing floor plans and transparent pricing |
| Enquiry path | A short form and a LINE button on every project page, each enquiry tracked in GA4 |
| Editing | Rebuilt in WordPress with Breakdance, so marketing edits text, photos and project pages itself |
| Languages | Fully bilingual, each language optimised for search separately |
| Speed | A lean rebuild that cut load time from nine seconds to two |
In the three months after launch, buyer enquiries rose by 40%.
None of those decisions is about colour or fonts, a reminder that a redesign has to reach well beyond the visual layer, as what makes a good website explains.
After launch: measure against the old site
A few weeks after launch, repeat the step 1 checks against your baseline: enquiries and key events by page, Search Console clicks and queries, Core Web Vitals and the same usability tasks. Some ranking movement in the first weeks is normal; the migration checklist explains how to tell it from a real problem. A continuous-improvement plan then stops the site drifting towards its next redesign.
What to do next
Every step here comes back to one habit: decide with evidence, keep what visitors rely on, and judge the result against the old site rather than opinions.
If you’d rather not run this alone, our website redesign service starts in the same place: we crawl your current site and read its Search Console data, carry across the pages that rank or bring enquiries, redirect every old address and build on a private preview while your current site stays live.
Want an outside view before step 1? A free website audit shows where your current site loses visitors, from speed on phones to how easily people can get in touch.