Website redesigns are full of risk. They’re a great opportunity to waste some budget. Or, lose traffic and lead flow you’ve worked so hard to build over the years.

How can we ensure this doesn’t happen to you?

In this guide, I break down the exact process we use to redesign websites for hundreds of our clients. Perfected over the years by our in-house team.

The five areas we will go over today are:

• Plan
• Research
• Design
• Development
• Launch

By the end of the guide, you’ll know exactly how to overhaul your website. Giving it a fresh new design that gets results!

Let’s get cracking with step 1. Planning.

Step 1: Planning

Before you even kick-off the “fun part” of a website redesign – the pretty colours and images – you need to have a plan.

This will help you align teams internally. And, if you haven’t got it yet, secure sign-off on budget.

Let’s start by asking the most important question first…

Why are you redesigning your website?

You may know this already. Or, you’ve been told by someone else in your company why you need to redesign. Some reasons may include…

• You have a new brand identity
• CMS doesn’t work and is rigid
• Running costs are too high
• Your new CEO demands it
• You’re changing CMS

All of these are valid reasons. The key thing is you have a reason. As this will help guide your decisions and you can build from here.

A website redesign to reduce ongoing CMS costs will look different to one that needs to match a new brand identity.

From this “why” you can start to build out a brief, project plan, and strategy. Outline your goals and what you want to achieve with the redesign. More on this next…

Project management

Now is a good time to decide how you will manage the project. This is a whole guide in itself but it’s good to select a project lead. They will have the final say and make key decisions.

(This project lead is likely to be you, the reader. You got this, gurrrl!)

It also helps to have a close-knit team of decision-makers that will be involved in the project helping to discuss key decisions. This will vary depending on the size of your project.

But the key thing is, you want to avoid design by committee. A big group of unqualified people chucking in their 2 cents to try and influence the design for their own benefit.

And on the flip side, you don’t want to get so far down the design and build process without feedback from key stakeholders. They see the final design and they hate it. Starting all over again.

There’s no hard and fast rule for picking your team of decision-makers.

What CMS will you use?

The Content Management System (CMS) your website is built is a major decision. For most B2B companies it’s a choice between WordPress, HubSpot, or Webflow.

Some platforms have an ongoing cost, whilst others are open source (free). But you have to pay somewhere to host it.

Picking a CMS is a big decision and you will need to evaluate all of your options. Iit’s best to figure this out now during the planning stage.

Success metrics and Benchmarks

Your company is redesigning its website for reasons unique to you. Which means “success” looks different to everyone.

In this article, I explain How to Judge the Success of a Website Redesign. It outlines what areas you may want to pay attention to (conversion rate, traffic, site speed, traffic, user feedback metrics etc.)

You can then take benchmarks before any work begins. This will allow you to compare the new site’s performance vs. the old site. Showing the stakeholders how much of a success your redesign was.

You get a promotion, a pay rise, and go on to meet the person of your dreams with all this newfound success. You fall in love and live in your forever home happily ever after.

But for now, back to reality with some migrations…

Migration(s)

This is a big one for established websites that have (a) lots of content on the site (b) lots of traffic or leads being generated. There’s two key migrations to keep an eye on..

Content migration

A redesign is a great time to decide which content you want to bring over to the new site. If you’re short on time and resources, you can just migrate all the content.

If you have time, you can see which content is generating traffic and leads and bring these over. Either improving, merging, or removing any other bits of content.

SEO migration

Let’s say your website ranks well for lots of keywords. Google clearly likes something. So imagine redesigning your website and suddenly Google can’t find that goodness.

This is a common mistake with a redesign. If Google can’t find what they liked before, they will drop your ranking positions. This means your traffic will drop shortly after too.

If you get a lot of traffic from Google Search, this is an important step and requires a lot of planning.

You can follow our 80+ point website migration checklist to help avoid an SEO nightmare.

Other data

Your website may have other data stored in it such as user or analytics data. This will need to be transferred over to the new site.

This can be quite a complex job if you have emails and passwords stored. Again, this is a whole guide in itself. But it’s something to be aware of and plan for now.

Website brief making (free template)

To round out the planning stage, it helps to have a website brief in place. This can be shared internally to outline the “what” and the “why” of your project.

Put this into one centralised brief to work from. Showing you why you are redesigning your website, what your goals are, what you want to carry over to the new site, and what features the new website will have.

The website brief is a very important step and we have a free template you can use.

After you’ve created that, step 1 (the planning) is complete. You’re clear on the approach now it’s time to crack on with step 2 (the research).

Step 2: Research

One of the most important steps of a website redesign is the research stage. This can take many forms: competitor, customer, brand, SEO and more.

The aim is to uncover as many insights as possible. This feeds into your website strategy. Which feeds into your design.

The end result?

You’ve built a research-backed website. Voila! But remember…

Please don’t be tempted to design your website without doing research.

Yes, it’s quicker, easier, and cheaper in the short-term. But in the long-run it’ll cost you more money. Don’t forget the additional headaches.

A research-backed website is a high-growth website. So let’s dive into the most important one first, your dream customer research…

Dream customer research

There are two parts to this and we recommend doing both. First up…

1. Customer personas

Please, please, please have customer personas in place before you start designing your website. You need to know who you’re building your site for.

I won’t go into depth on how to create these but you want the usual: Demographics, Company Profile, Psychographics, Beliefs, Challenges, Pain Points, and so on.

As well as this, it helps to have a negative customer persona. Outlining your not-so-ideal customer. This could be an old type of customer you used to work with, but no longer want to.

If you have personas in place, we recommend doing customer interviews (see next point) and then a review. You may uncover new insights which feed into your personas.

2. Customer interviews

Your personas tell you exactly who you want your new website to attract. Now it’s time to speak to them!

Customer interviews are a great way to understand how they interact with your website. As well as get their input on what they feel is missing.

We find the best setup is to have a video call that you can record for later analysis. Get the user to share their screen and dictate what is going through their head.

The most important step is to set an objective for the interviews. What are you trying to achieve?

Some great objectives to explore include:

Uncover pain points: Understand the challenges users face when navigating your current website or using specific features. This can highlight areas that need immediate attention.

Discover desired features: Identify what features or content users wish the website had, which can guide feature prioritisation in the redesign.

Assess user journeys: Understand the steps users take to achieve specific goals on your website, identifying any friction points or unmet needs along the way.

Competitor comparison: Understand how users compare your site to competitors, identifying areas where your site excels or falls short.

If you truly believe your current website is trash, the competitor comparison is a great objective to focus on. Watch users react to and talk about your competitor’s site.

In summary…

Create customer personas and run interviews with them. This is an essential step to learning as much as you can about your dream customer which you can feed into your new website design.

Brand direction, experience, position, and identity

In an ideal world, your company has a brand strategy in place already. An in-depth document outlining how you plan to establish your brand in the mind of the customer.

However, this often isn’t the case. As a bare minimum, we need to have an idea of the following four areas:

Brand direction

Your north star. Think of it as your brand’s mission or purpose, your reason for being. It’s what inspires passion and dedication in your team and loyalty among your customers. When you have a clear brand direction, every decision, from design to communications, aligns with this vision.

For example, is your brand direction sustainability? Every action you take, from sourcing materials to marketing campaigns, should reflect this.

Brand position

In today’s crowded marketplace, differentiation is key. Brand positioning shows where your brand stands relative to your competitors. It’s the unique value you offer, and the niche you occupy in the minds of your customers.

For example, while two companies might both sell time tracking software.One might position itself for freelancers that need to send invoices quickly and easily. The other may focus on larger companies that need to track CPD/training time.

Brand identity

This is the tangible part of your brand. It’s what people see first. Your logo, colour scheme, fonts, and design elements. They create an immediate impression of what your company represents.

For example, tech companies often choose sleek, minimalist logos and designs to convey innovation and simplicity. While a child-centric company might have a colourful, playful logo.

Brand voice

This isn’t just about what you say, but how you say it. Whether you’re cheeky, formal, laid-back, or authoritative. Your brand voice should consistently reflect your company’s values and appeal to your target audience.

For example, a financial institution might adopt a tone of trustworthiness and professionalism, while a startup selling quirky products might use a light-hearted and humorous tone.

In summary…

This brand section is an essential step! When redesigning your website, keep these brand elements in mind. It’ll ensure that the new design is not just visually appealing, but also captures the essence of your brand. Resulting in a cohesive user experience.

Messaging and copy

One of the most important elements of a B2B website. The copy!

An attractive design can capture attention, but it’s the content that keeps visitors engaged and drives action. Great copy and a beautiful design go hand in hand. They ensure your website is both functional and visually appealing.

Prioritise copy during the design process and it guarantees that the core message is not lost or diluted. You shouldn’t be trying to squeeze your copy into a rigid page template. Your copy and content should dictate the flow and design of a page template.

It’s about creating a narrative and then designing an environment where that narrative can shine.

Competitor research

One key step of the research phase is taking a peek at your competitor’s sites. What are they doing well and not so well? There are two steps to this.

Step 1: Individual analysis

Firstly, we score the competition on a scale of 1 to 5 looking at six key areas:

1. Value Proposition: The promise you deliver to customers. Why should they choose you over your competition?
2. Navigation: How easy it is to get around the website.
3. Clarity: How clearly is the information presented?
4. Positioning and Size of Elements: How well the website works structurally (responsiveness, spaces between elements)
5. Content Curation: How much and how well information is displayed across multiple content types.
6. Aesthetic Appeal: How a website looks visually (Is it dated? How does the branding look? Fonts? Colours? Etc.)

This will help you see which competitors are the best in class. Giving you a benchmark to work against. We plot this on a chart, which we will be releasing a template for soon.

Step 2: Common features and functionality

Next, we want to see if there are any common features across the sites. Or pieces of functionality that we like and want to replicate on our site.

It can help to pretend to be a customer here. Carrying out specific tasks on each website. For example, I want to view the pricing of service X or I want to find content related to Z.

You might like how Competitor B lays out their pricing. Or do you like the content hub Competitor A has? Include any elements you don’t like as well.

Now is a great time to look further afield as well. At websites outside your close circle of competitors. Those larger players in your industry that may be larger than you.

The aim is to find out what is working and what isn’t for your competition. This is all subjective and you will want to verify this with your customers throughout the design process.

(SEO) Keyword research

A website redesign is a great time to kick-start your SEO efforts. Baking SEO into the core of your website from the beginning.

The first essential step is keyword research. Your aim here is to find all of the keywords related to what you sell as a company. You can then see how all of this fits together and built out your site structure.

Keyword research also allows you to track your current ranking positions so you can see how they change from before launch to after the launch.

We have a whole guide on how to weave SEO into your new website.

Website analysis

Our final research piece is to review your current website to see what you can learn.

There’s a treasure trove of data associated with your current website. No matter how bad you think it is, there are insights to be learnt.

I’d break this down into two sections.

1. (Google) Analytics

First, dive into your analytics tool of choice. For most companies, this is Google Analytics. I would look for:

• Overall trends or changes in traffic. Breakdowns for each channel.
  • Do you get a lot of organic traffic? An SEO migration will be essential.
  • Get lots of paid traffic? Make sure you make the performance marketing team aware a new site (which means new URLs) will be going live.
• Behaviour flow or conversion funnel
  • How do users flow through your site?
• What are your high-converting pages / high-traffic pages?
  • You will check these closely when the new site goes live.
• Internal, site search terms
  • Are people trying to find content on your site that you don’t have?

Once you have all of this, it’s time to analyse individual user sessions. Luckily for you, there’s no need to spy through a peephole like this guy…

2. Session recording

Next, I would use a session recording tool, such as HotJar, Mouseflow, or Microsoft Clarity.

This will record the screen of every user that visits your website (all in a GDPR-friendly way). So you can then review the sessions and see how they use your site.

I would use this to back up the data you’ve seen above. For example, Google Analytics may have shown you users go from the Homepage > Pricing > Demo page.

But what do they actually do during that flow? You could analyse the users who sign up for a demo vs. the ones who don’t. Do you think your site is missing something e.g. social proof?

Website redesign strategy

The website brief is a top-level plan. A starting point for the project.

The website redesign strategy, on the other hand, goes deep. It outlines the “how”. Giving a clear plan on how you will deliver your project.

Key things you should highlight in the strategy are the exact steps needed *cough* this guide! *cough*. As well as the budget, resources, and timeline needed to deliver this to a high level.

It should include but not be limited to:

• Project goals and objectives
• Analysis of ideal customers
• Assessment of current site
• Timeline and milestones
• Detailed scope of work
• Clear strategies for:
  • Research, SEO, Design,
  • Content, and Development.
• Testing and feedback process
• Success metrics and reporting
• Post-launch strategy for updates

You now have everything in place to start the design stage of your project.

Step 3: Design

You’re all planned out. Adequate research has been done and you’ve put together a solid website redesign strategy. Now it’s time to design!!

I’d split this step (Design) up into two sections:

1. Sitemap and page structure.
2. Design creation (wireframes and UI).

First, let’s look at what needs to be done to build out the sitemap.

Sitemap creation

The structure of your website plays an important role – both for users and search engines. They both need to easily navigate around the site and find the content they want.

We use a tool called Octopus.do to build out our sitemaps. It’s great for site mapping as well as building out the structure of each page. You could also use a spreadsheet.

In short, you want to arrange your page templates into a logical structure. How will they all fit together?

You should already know what pages you need on your website. This will have been outlined in the brief as well as your redesign strategy.

Start listing them out and arranging them into a logical hierarchy.

Page structure

Now you have a sitemap, it’s time to figure out what content will go on each page. The structure of your page templates.

In most cases, you can use one template multiple times. For example, let’s say you work across 10 industries and you want a page for each.

You design and develop 1 industry web page template. And then you use this over and over to populate content for the 10 different industries.

How do we know what should be on each page? Enter the content brief…

SEO content briefs

We’ve created a guide which outlines how we create high-ranking pages on Google. The same process is relevant when creating pages for a website redesign.

You can find a link to that here.

Best of all, anyone can do this research. Just follow the steps and then pass it to a copywriter, or write it yourself.

It’s broken down into 6 stages:

1. Understand search intent and page type
2. Understand your target audience
3. Find the best keywords
4. On-page optimisations
5. Competitor research
6. Content structure

Where do we keep track of all of this?

Building this out

We use the same tool we use at the site mapping stage, Octopus.do. You can build out the sections needed on the page here.

And you will end up with something like this:

I mentioned splitting up this Design step into two sections. We’ve just looked at part one, now it’s onto the second…

Wireframes

With the sitemap in place and an idea of the page structure, you can start to build out the wireframes.

The best analogy for wireframes is that of a blueprint for a house. It shows you a clear layout of where everything will go.

This is an essential step in the web design process. Do not skip this step!!

Why?

Adjusting a wireframe is cheap and easy. Changing a fully developed website? That’s expensive.

The process…

You already have a good idea of the structure of your pages, outlined in the sitemap task in the step before. This should have been shared with the team for feedback.

The next step?

It’s time to build on this low-fidelity wireframe. Diving into the details of each page and how certain sections will look.

Will there be 4 related posts or 3 related posts? How many features will be included on the page? What content will be on the pricing page? And so on and so on.

Once the wireframes have been reviewed and signed-off, then (and only then) can you bring it to life with the branding. Colours, fonts, images – all the visual goodness.

User Interface (UI) design

The most exciting part!! The one you’ve all been waiting for – UI design.

User Interface (UI) design is all about the look and feel. Essentially, bringing to life the black and white wireframes.

It’s where we add the fonts, colours, the buttons – all the visual elements that make your website stand out.

One important thing to note here…

Involve the website developers early on, during the planning and throughout the design stage.

Ideas are generated, designs get created and signed off, and passed to the developers who then say this is very complicated. This will cost a lot to do.

It’s a great way to go over budget and waste time. So before signing off on any design, get the developers involved! They can provide input on what’s complicated and what’s not.

Warning over. Back to the fun, design bit. Here are some key areas for consideration…

Mood boards

Get your creative juices flowing. Look at other sites and gather design inspiration. Start to think about the animations, hover effects, and transitions you want on your website.

A great place to look for inspiration: Awwwards, Dribbble, Siteinspire, and Behance. You can also look at the awards within your industry e.g. “best website”, “best marketing campaign”.

Colour palette and typography

This will be dictated by your brand guidelines. You should have a colour palette and chosen fonts in place already. The designer shouldn’t be picking and choosing them as they go.

Designing sections and elements

This is where you start to bring your design to life. Sections, buttons, icons, sliders – this is where you design the blocks that will make up your pages.

Review & refine

Design isn’t a one-shot game. Put it all together, see how it looks, gather feedback, and tweak until it’s spot on.

As we said before, it’s cheaper to make changes to a design in Figma, compared to the changes at the development stage

Prototyping

Before going live, create a clickable prototype. Figma is a great tool to achieve this. It’s like a dress rehearsal for your website, making sure everything is set out as you would expect.

We strongly recommend creating mobile, tablet, and desktop versions of your design. To ensure it works seamlessly across all devices.

Now we have the design signed off and in place, it’s time to develop…

Step 4: Development

Your fresh, new design is locked in. Now, it’s time to bring it to life on your CMS of choice. Which should have been decided long ago during the planning and strategy stage.

Here are some other key considerations during development…

Responsive design

This is a no-brainer and must-have in 2023. Responsive design ensures your website works perfectly across all devices. Regardless of the screen size.

It affects user experience and has an impact on your SEO ranking positions. Google moved to mobile-first indexing many years ago. Meaning they judge your mobile website when ranking it on Google.

You should have created a design for both mobile, tablet, and desktop. Created in Step 3, the design stage.

Now it’s time for the development team to work their magic and ensure there is an optimal viewing experience across all devices.

Plugins and functionality

Plugins are a great way to expand the functionality on your website. It can be cheaper and easier to use a plugin vs. custom-developing a solution. Not to mention the end result is often better.

Great examples include contact forms, you can use a plugin like Contact Form 7 or Gravity Forms. Or, SEO tools like Yoast.

Another word of warning (I’m full of these), don’t mindlessly add plugins to your website. They can slow down and impact performance if not done carefully. So ensure all plugins are essential and you regularly review them.

Content and SEO migrations

We spoke about this in the planning section. You should have everything in place to migrate all of the goodness from your current site over to the new.

We mentioned our 80+ point website migration checklist to help avoid an SEO nightmare. And you should have thought about content and other data such as user info and analytics.

At this point, it’s all about testing your migration work on the staging site. Make sure everything is in place before you launch the website.

Test, test, test and test again on the staging site. You can avoid a lot of headaches by picking up on issues here before you push the site live.

Speed and performance

Online, every second counts. Users expect websites to load quickly. Even a minor delay can put off users and increase bounce rates.

Google also factors site speed into their rankings. Optimising images, leveraging browser caching, and minimising code are just a few methods to boost site speed.

A high-performing website ensures users stick around and search engines take notice.

Security

Website security is more than just safeguarding information. It’s about building trust with your users. A security breach isn’t just a tech problem—it can damage a brand’s reputation. It’s paramount to prioritise and invest in strong website security measures.

Implementing SSL certificates, using strong passwords, keeping software up-to-date, and regular backups are key.

Using WordPress? We recommend installing either WP Cerber or Wordfence. Two amazing security plugins, both with free options.

If you install Cerber, we have a checklist you can use to harden and secure your WordPress website.

Testing

Website testing is the final checkpoint before the development finish line. Ensuring everything works as intended and matches your design.

This includes checking links, ensuring forms are submitted correctly, and reviewing site behaviour on different devices and browsers. Moreover, accessibility testing ensures that your site is usable for everyone.

We suggest using a tool called BrowserStack:

It can be tempting to skip this step or to not take it seriously. But it’s easier and less stressful to fix bugs on a staging site. Rather than rushing to push the site live and issues stop customers from converting.

Step 4 is now done. The site has been developed and tested thoroughly. It’s time to launch!!

Step 5: Launch

This is quite a complicated step and you’re not out of the woods just yet. The launch step of your website is essential.

Get this wrong and you will have a redesign nightmare on your hands. You need to firm up your plan for the website to go live.

Let’s create a launch plan…

Launch plan and checklist

Ideally, you would have written this out during the website strategy stage. Who’s responsible for what? When will it be done? Do you need to buy new hosting?

But, if you haven’t got a launch plan, then now is a great time.

There is no set process or plan because it varies depending on your current situation.

For example, redesigning your WordPress website (staying on WordPress) is more straightforward than migrating from say Wix to WordPress, or from Kentico to WordPress.

If you need to change domain or hosting, you need to ensure you have access to the relevant accounts. This is so you can change DNS settings and get your site live.

When is the best time to launch?

Again, this is unique to you and your web build team. If you get lots of traffic and revenue being generated through the website, you want to review analytics. Find out when traffic is at its lowest and launch then. This will reduce down time during critical periods.

One word of warning…

Don’t launch the site at the end of a day, or just before the weekend. Because if there are bugs or issues, the team won’t be around to fix them. Or, you’ll have an angry team working through the weekend.

Launch day

The big day has arrived, here’s a couple of key pointers…

Back-up and roll-back plan

Back up everything before you launch your website, this is an essential step and provides a safety net if anything goes wrong.

This backup can be your roll back plan. Let’s say the new website has lots of issues when live, you can roll back to the old site. Take time, fix the issues, and go again.

Test everything (again)

Let’s say the site is now live, it’s time to test, test, and test! The same testing you did in the previous step, run that again here.

This includes checking links, ensuring forms submit correctly, and reviewing site behaviour on different devices and browsers. And if you’re doing an SEO migration, check those redirects now they are live.

Ongoing optimisations

Now the site is live and has a bit of time to settle in, you can review the data. Notice a high bounce rate? Or traffic has dropped to one of your high-priority pages? Investigate why this is happening.

Just because your site is launched doesn’t mean your job is done.

All the choices you made during the design stage are just hypotheses. You now need to validate them.

Dive into the data – review engagement metrics, traffic, conversions, revenue, sales quality and so on. All of the success metrics you outlined at the beginning of the project.

Once you see any patterns or areas for improvement, you can make further optimisations. There’s always room for improvement with a website.

Support and maintenance

Support and maintenance aren’t just about fixing what’s broken. You need to be proactive, not reactive. Ensuring your website remains in peak condition, offering users the best possible experience.

Just like any software, your website’s CMS and plugins need regular updates. These updates often contain crucial security patches, new features, and bug fixes. Skip these and your site will not be secure and have bugs.

Regular attention and care not only keep your site functional but also enhance its longevity and relevance in the ever-evolving digital landscape.

As a bare minimum, you want to keep all of your plugins and WordPress running on the latest version.

Summary

Website redesigns are full of risk. But they don’t have to be.

Now you’ve read this guide you should have a better understanding of how to do it smoothly. Minimising risk as much as possible.

I broke down the exact process we use to redesign websites for hundreds of our clients. Perfected over the years by our in-house team.

The five steps we covered today were:

• Plan
• Research
• Design
• Development
• Launch

Now you know exactly how to redesign your website. Run! Be free! Go deliver an amazing project and get that promotion.

Have a question about this article?

DM me on LinkedIn, or send me an email stephen@spaced.digital. I’m more than happy to answer any questions or queries.

Want help with your website redesign project?

Click the link below and book in time to speak to me.

Thanks for reading this far! 🖤