Most redesign horror stories follow the same script: a beautiful new site goes live, traffic drops 40% in three weeks, and nobody can explain why. The design was not the problem. The process was. A redesign is not just a visual refresh, it is a migration, and migrations break things when the sequence is wrong.

This guide walks through the website redesign process step by step, in the exact order we run it for client projects at GFX-Art: baseline measurement, content audit, URL mapping, wireframes, visual direction, staging reviews, and a launch checklist. The angle throughout is simple: modernize the look while protecting what already earns rankings and conversions. You will also find, at each phase, a short note on what to keep instead of rebuilding from zero.

Before You Start: Redesign Is a Migration, Not a Makeover

The moment you change templates, URLs, internal links, page copy or page speed, you are changing the signals Google uses to rank you. That is fine, as long as the changes are intentional and mapped. The danger is the invisible loss: a high-converting FAQ block deleted because it looked “dated”, a product page URL shortened for aesthetics, a 3,000 word guide trimmed to 600 words to fit a new template.

Three rules frame everything below:

• Measure first, cut later. You cannot protect what you have not benchmarked.
• Keep the equity, change the shell. URLs, headings, copy depth and internal links carry most of the SEO value. Colors, fonts and layout carry almost none.
• Nothing goes live untested. Staging exists so that bugs cost you an hour, not a quarter.

Phase 1: Benchmark the Current Site (The Data You Will Regret Not Having)

Do this before a single wireframe exists. Export and archive everything, with a dated snapshot stored outside the site itself.

What to capture	Source	Why it matters later
Top 200 pages by organic sessions and conversions (last 12 months)	GA4	Defines your protected list
Queries, clicks, impressions, average position by page	Google Search Console (16 month export)	Tells you which words must survive the rewrite
Full URL crawl with status codes, titles, H1s, canonicals	Screaming Frog, Sitebulb or similar	Becomes the base of your URL map
Backlinks by target URL	Ahrefs, Semrush, Search Console links report	Shows which URLs can never be deleted without a redirect
Core Web Vitals (LCP, INP, CLS) field data	Search Console / PageSpeed Insights	Sets the performance bar the new build must beat
Conversion rate per template and per key form	GA4 + CRM	Proves the redesign helped (or warns you fast)

Also archive a visual record. Take full-page screenshots of your 20 most important templates and pages. When someone asks in month four “did the old pricing page have testimonials above the fold?”, you will have an answer.

What to keep from Phase 1

Keep your analytics configuration itself. Rebuilding GA4 events, conversions and consent mode from scratch on a new CMS is a classic source of “traffic dropped” panic that is really just broken tracking. Document every tag, trigger and variable now.

Phase 2: Content Audit and Inventory

The content audit is where a redesign is won or lost. Build a single spreadsheet with one row per URL and these columns: URL, page type, organic sessions, conversions, backlinks, last updated date, word count, owner, and a decision column.

Then assign every page one of four decisions, often called the ROT method (Redundant, Outdated, Trivial) plus keep:

Decision	When to use it	Action on launch
Keep as is	Ranks, converts, still accurate	Same URL, same copy, new template only
Improve	Ranks page 2, thin sections, old data	Same URL, expanded content, keep H1 intent
Consolidate	Several pages competing for one topic	Merge into the strongest URL, 301 the rest
Retire	No traffic, no links, no business value	410 or 301 to the closest relevant parent

The “do not touch” list

Flag in red every page that is in the top 10% for organic traffic, conversions or referring domains. These pages get a new skin and nothing else during the redesign. Optimize them in a separate project, two or three months after launch, so you can isolate cause and effect.

What to keep instead of rebuilding

• Title tags and H1s that already rank. If a page sits in position 3, its title is working. Restyle it, do not rewrite it.
• Long-form copy. New templates often push teams to shorten text. If a 2,500 word guide ranks, design a template that accommodates it, not the other way round.
• Schema markup. FAQ, Product, Article, LocalBusiness and Breadcrumb markup must be ported, not reinvented.
• Internal links inside body copy. They are a big part of how authority flows. Preserve them in the migration.

Phase 3: Goals, Scope and Success Metrics

Now you set objectives, and they must be numbers, not adjectives. “Modern and clean” is not a goal. These are:

• Increase demo request conversion rate from 1.8% to 2.6% within 90 days of launch
• Keep organic sessions within 95% of the pre-launch baseline in month one, and above 100% by month three
• Reach LCP under 2.5s and INP under 200ms on 75% of mobile visits
• Cut the number of templates from 24 to 9 to reduce maintenance cost

Write a one-page scope document that states explicitly what is out of scope. The most expensive redesigns are the ones where a new blog taxonomy, a CRM integration and a multilingual rollout quietly get added in week six.

Decide: evolution or rebuild?

Signal	Recommended path
Site converts well, looks dated, CMS is healthy	Theme refresh plus design system, keep URLs and CMS
Navigation is confusing, content is strong	Information architecture rework, minimal URL changes
Slow, unmaintainable, plugin sprawl, security debt	Full rebuild with a strict 1:1 URL migration plan
Rebrand, merger, new product line	Full redesign plus staged content migration

Phase 4: Technical and UX Audit

Run these in parallel, because they feed the wireframes.

Technical checks

• Crawl errors, orphan pages, redirect chains, duplicate titles
• Indexation: how many URLs are indexed versus submitted
• Mobile rendering issues and layout shift sources
• Hosting, TTFB, image formats, caching layer, CDN
• Accessibility baseline against WCAG 2.2 AA (contrast, focus states, labels, keyboard navigation)

UX and behaviour checks

• Heatmaps and session recordings on the top 10 entry pages
• Funnel drop-off: where exactly do people abandon the quote form?
• Site search queries, which reveal missing pages and wrong labels
• Five to eight user interviews or a quick unmoderated test on the current site

Note what already works. If recordings show that 60% of conversions come from a sticky sidebar CTA, that pattern survives the redesign. Designers should be briefed on these “winners” before they open Figma.

Phase 5: Information Architecture and URL Mapping

This is the single most important phase for protecting rankings, and the one most often rushed.

Build the new IA

1. Group audited pages into topic clusters based on real search queries, not internal org charts
2. Run a card sort with 10 to 15 users or customers if the menu is contested
3. Draft the new navigation with a maximum depth of three clicks to any money page
4. Define breadcrumb logic and hub pages for each cluster

Create the URL map

One spreadsheet, two mandatory columns, zero exceptions. Every single old URL must have a destination, including paginated archives, tag pages, PDFs and image files that attract links.

Old URL	New URL	Status	Notes
/services/branding-agency/	/services/branding-agency/	Unchanged	Top converter, keep slug and H1
/blog/2019/old-logo-trends/	/blog/logo-design-trends/	301	Consolidated with two similar posts
/tag/misc/	n/a	410	No traffic, no links

Golden rule: if there is no strong business reason to change a URL, keep it. “The new slug is prettier” is not a business reason. Every redirect loses a little time, a little crawl budget and a little patience from your users who bookmarked the page.

Other mapping rules worth enforcing:

• Redirect to the closest equivalent page, never mass redirect to the homepage
• No redirect chains: old URL goes directly to the final destination
• Handle trailing slashes, uppercase variants, HTTP and www versions consistently
• Update canonical tags, hreflang pairs and XML sitemaps to match the new map

Phase 6: Wireframes and Prototypes

Wireframes exist to settle arguments about hierarchy before anyone argues about color. Work low fidelity first, grey boxes and real headlines, no stock photos.

For each key template, define:

• The single job of the page and its primary CTA
• Above-the-fold content: value proposition, proof, action
• Content blocks in priority order, including the SEO body copy area
• Mobile layout first, then the desktop expansion

Templates to wireframe in a typical B2B or agency project:

1. Homepage
2. Service or product category
3. Service or product detail
4. Case study / portfolio item
5. Blog index and blog article
6. About and team
7. Contact and form confirmation
8. Search results and 404

Content-first wireframing saves weeks. Paste the actual copy of your top-ranking page into the article template. If the template cannot hold 2,500 words, 12 subheadings, a table and an FAQ block without looking broken, the template is wrong.

Turn the wireframes into a clickable prototype and test it with five users before design begins. Fixing a navigation label in a prototype costs minutes. Fixing it after development costs days.

Phase 7: Visual Direction and Design System

Now the pixels. Start with two or three visual directions applied to the same wireframe, so stakeholders compare styles rather than layouts. The subject deserves a deeper dive than we can give it here.

Deliverables that matter:

• Design tokens: color palette with AA contrast ratios, type scale, spacing scale, radius, shadows
• Component library: buttons, forms, cards, tables, tabs, accordions, alerts, with all states (hover, focus, disabled, error)
• Page compositions: every template at mobile, tablet and desktop widths
• Motion rules: what animates, how fast, and what respects reduced-motion preferences
• Image and video specs: formats, max weight, aspect ratios, art direction rules

Keep what already performs

Resist the urge to redesign a converting form into something clever. Keep the field order and the button label if they are proven, and change only the styling. The same applies to recognizable brand assets: your logo, signature color and photography style are part of the trust your visitors already have.

Phase 8: Build on Staging and Migrate Content

Development happens on a staging environment that mirrors production: same PHP version, same server config, same plugin set, same database structure.

Non-negotiables during build:

• Block the staging site from indexing: HTTP authentication is safer than a robots.txt disallow alone
• Implement the URL map in the redirect layer as you build, not the night before launch
• Migrate content with structure intact: headings, lists, tables, alt text, internal links, schema
• Port metadata: titles, meta descriptions, canonicals, Open Graph, hreflang
• Rebuild tracking: GA4, server-side tagging if used, consent management, conversion events, call tracking
• Keep images optimized: modern formats, explicit width and height to avoid layout shift, lazy loading below the fold

Set up a content freeze window on the live site, usually five to ten days before launch, so the two environments do not drift. Any urgent change during the freeze gets logged and applied to both.

Phase 9: Staging Reviews and Pre-Launch QA

Run three distinct review rounds. Mixing them produces chaos. There is a practical rundown of it online.

Round 1: Content and editorial review

• Proofread every page, check names, prices, phone numbers, legal pages
• Verify that protected pages kept their H1, title and body copy
• Check alt text on all meaningful images

Round 2: Functional and technical QA

• Test every form end to end, including spam protection, autoresponders and CRM delivery
• Test checkout, booking, login and search if applicable
• Cross-browser and cross-device testing: Chrome, Safari, Firefox, Edge, iOS, Android
• Keyboard navigation, focus visibility, screen reader pass on key templates
• Crawl the staging site and compare against the production crawl: missing pages, broken links, orphan URLs
• Run Lighthouse on the five most important templates and fix regressions before launch

Round 3: SEO sign-off

Check	Pass criteria
URL map coverage	100% of old URLs have a destination, tested in a redirect checker
Titles and meta descriptions	Match the approved sheet, no duplicates, no missing values
Headings	One H1 per page, logical H2/H3 order
Canonicals and robots	Self-referencing canonicals, no stray noindex on money pages
Structured data	Validates with no errors in the Rich Results Test
XML sitemap and robots.txt	Only indexable URLs, correct absolute paths
Internal links	Point to new URLs directly, no chains, no 404s
Analytics	Pageviews and conversion events fire in real time on staging

Phase 10: Launch Day and the First 90 Days

Choose the right launch window

Go live on a Tuesday or Wednesday morning, with the full team available for 48 hours. Avoid Fridays, avoid the eve of a public holiday, and avoid your peak commercial season. For retail, that means launching well before the November and December rush rather than during it.

Launch sequence

1. Full backup of the production site and database
2. Lower DNS TTL in advance if the host changes
3. Deploy, then immediately remove staging password protection and any noindex directive
4. Verify robots.txt allows crawling and the sitemap is reachable
5. Submit the new sitemap in Search Console, request indexing on the top 20 pages
6. Spot-check 30 redirects from the map, including the highest-traffic and most-linked URLs
7. Submit a live form, place a test order, make a test call
8. Confirm GA4 real-time data and conversion events
9. Check SSL, HTTPS redirect and mixed content warnings
10. Clear CDN and page caches, then re-test as an anonymous user

Monitoring plan

Timeframe	Focus
Day 1 to 3	404 logs, server errors, form submissions, real-time analytics, crawl of the live site
Week 1 to 2	Indexation coverage, crawl stats, Core Web Vitals field data, early ranking movement
Week 3 to 6	Page-level traffic versus baseline, fix any page losing more than 20% of clicks
Day 60 to 90	Conversion rate comparison, heatmaps on new templates, first CRO test round

Expect a small wobble. A dip of 5% to 15% in organic traffic for two to four weeks after a large migration is common while Google recrawls and reprocesses. A dip of 40% is not normal, and almost always traces back to redirects, noindex tags, removed content or broken tracking. Check in that order.

Timeline and Budget Expectations

Project size	Pages	Typical duration	Heaviest phase
Small business site	Up to 25	5 to 8 weeks	Content writing
Mid-size B2B or agency	25 to 150	3 to 5 months	Content audit and IA
Large content site or ecommerce	500+	6 to 12 months	URL mapping and QA

Budget roughly 20% of the project for audit and planning, 25% for design, 35% for build, and 20% for QA, launch and post-launch fixes. Teams that skip the last 20% are the ones still firefighting three months later.

The Condensed Checklist

1. Benchmark traffic, rankings, conversions, links and speed
2. Audit all content and tag every URL keep, improve, consolidate or retire
3. Set numeric goals and lock the scope
4. Run technical, accessibility and UX audits
5. Design the new IA and complete a 100% URL map
6. Wireframe every template with real content, then prototype and test
7. Define the visual direction and build a reusable design system
8. Build on protected staging, migrate content and metadata, rebuild tracking
9. Run editorial, functional and SEO reviews on staging until sign-off
10. Launch mid-week, verify redirects and tracking, then monitor for 90 days

FAQ: Website Redesign Process

What are the 7 steps in web design?

The classic seven steps are: goal definition, research and discovery, information architecture and sitemap, wireframing, visual design, development, and testing plus launch. A redesign adds two critical layers on top of that: a content audit of the existing site and a URL migration plan.

What are the 7 C’s of website design?

They are commonly listed as context, content, community, customization, communication, connection and commerce. In practice, treat them as a review grid: does each template deliver clear content, an obvious next action, and a consistent experience across devices?

What is the 3 second rule in website design?

It means a visitor should understand what you offer, who it is for and what to do next within about three seconds of landing. Test it by showing your homepage to someone for three seconds, then asking what the company does. If they cannot answer, your hero section needs work before anything else.

How do I redesign an existing website without losing SEO?

Keep the URLs you do not need to change, 301 redirect the ones you do with a complete one to one map, preserve titles, H1s, body copy and schema on ranking pages, maintain internal links, and verify everything on staging before launch. Then monitor Search Console daily for the first two weeks.

How long does a website redesign take?

Between five weeks for a small brochure site and twelve months for a large ecommerce platform. For most mid-size businesses, plan on three to five months from kickoff to launch, with content production usually the longest pole in the tent.

Should I change my CMS during a redesign?

Only if the current CMS is genuinely blocking you through performance, security, cost or editorial limits. Changing platform and design at the same time doubles the risk surface. If you must do both, lock the URL structure first and treat the migration as the primary project, with the redesign riding on top.

What should I never change during a redesign?

Avoid touching, in the same release: URLs of top-performing pages, the copy of pages ranking in the top five, your domain, your analytics setup and your highest-converting form. Change one variable at a time so you can attribute results.

How do I know my redesign worked?

Compare against the baseline you captured in Phase 1, not against your feelings. Organic sessions and clicks recovered or exceeded by day 90, conversion rate up on key templates, Core Web Vitals in the green, and lower bounce on entry pages. If those four move the right way, the redesign succeeded.

Need a Second Pair of Eyes Before You Launch?

If you are mid-project and want someone to pressure test your URL map, staging build or pre-launch checklist, the GFX-Art team runs redesign audits that catch the issues that cost traffic. Get in touch and send us your staging link. A comparable breakdown sits on elementor.com.