Website redesign: the guide to read before you start

A guide on how to redesign a website with customers in mind. Since you’re here, you’re probably going through a website redesign or are at least considering one. Maybe your site is looking outdated and you feel it’s time for a change, or maybe there’s an issue of stagnant traffic and decreasing conversions you want to tackle by redesigning the experience. 

Best practices: marketers and product or website owners

Whatever the cause, in our experience a redesign can solve a lot of problems, but—if done wrong—can also ruin entire businesses (you’ll read a story about that below). This guide is here to help you carry out a successful redesign.

We believe that what is good for customers is good for business, and our central thesis in this guide is that the best, safest, and most effective way of doing a website redesign is by approaching it with customers in mind.

What is a website redesign?

A website redesign is a high-level overhaul that involves significantly changing elements like the code, content, structure, and visuals of your current website to better serve your visitors. A great website redesign tends to boost revenue, lower bounce rates, and improve user experience (UX).

Website redesign vs website refresh

First of all, a quick bit of semantics to make sure you’re in the right place. Whether what you’re doing counts as a redesign or refresh depends on how many changes you’re making during the process, and how far-reaching they are:

• A redesign usually implies that the code and visual appearance of a website change significantly. For example, a new visual identity and branding are rolled out, pages are restructured UX-wise to incorporate new modules and functionality, the information architecture gets updated, a new CMS (content management system) is introduced—and this all goes live around the same time.
• A refresh takes place when the core structure and functionality of the website remain largely untouched and minor changes are applied. For example, the look & feel of the site gets updated with a new color palette and typography, or small UX tweaks are added to individual page templates.

A redesign and a refresh may well be different when it comes to how resource-intensive they are, but they have one crucial thing in common: both of them will significantly impact your customers and their experience of your website. At the end of the day, whether you call what you’re doing a ‘redesign’ or a ‘refresh’ is far less important than HOW you go about it in the first place. And it all starts with asking a few questions:

6 questions to ask before a website redesign

Research is a crucial part of your website redesign process: it’s the best way to find what’s working and isn’t, and to dig deeper into what your target customers want and how to make your website more user-friendly. When you start thinking about a redesign (or refresh), there are some questions about your existing website and customers you MUST be able to answer:

1. What are your most valuable pages right now?
2. Who is coming to your website, and why?
3. What specific, measurable customer need isn’t being met by the current website?
4. What’s the rest of your team/business using the website for?
5. What pages and elements are working well?
6. How will you measure the success of the redesign?

Don’t panic if you don’t have the answers straight away. We’re going to use the rest of this chapter to sort through them and help you develop a website redesign strategy, so you can be sure you’re doing your redesign for the right reasons and approaching it in the most effective way. But as a bit of a cautionary tale, this is what not asking these questions can cause:

When a website redesign goes wrong

I was running a business before joining Hotjar. My team and I were working with a SaaS company to redesign their website. We promised that, with a newly redesigned website, we’d increase the number of demos they could book with potential customers.

We spent six months doing customer research and banked on a huge bonus because of how confident we were that we had nailed our target audience. We knew exactly who we were redesigning for, so we changed the CMS, we changed the copy, we changed the design—we changed every single thing—and we were happy with what we did because it was all based on research.

Except: we had missed a couple of key steps along the way. We hadn’t asked all the questions. And we hadn’t tested anything. So we made all these changes, and the number of demos booked through the redesigned site tanked. Like, -50% tanked. 

The client didn’t see our value because the number of demos dropped off a cliff post-redesign. We lost our bonus, I experienced burnout, which led to my three-person company being shut down. 

It all came down to how poorly we’d handled the process. We went full throttle ahead with a redesign; we changed things that weren’t working, sure. But we also changed everything that was working, and we didn’t pay enough attention to the difference between the two. 

The 6 things you need to know before and during a website redesign

Here are 6 things you need to know when approaching, and then going through, a website redesign: 

1. What your website’s most valuable pages are
2. Who is visiting your website, and why
3. What propels or stops your customers
4. How your team/business will be impacted by the redesign 
5. How to measure success with Key Performance Indicators (KPIs)
6. What to change—and how to test it 

1. Know what your website’s most valuable pages are

Think of the website redesign process as a house remodel. You wouldn’t start a remodel by swinging your hammer in random directions and knocking down walls without first double-checking if they’re load-bearing. Likewise, before launching into a redesign, you should have a clear map of your website ecosystem, scope out your wireframes, and know which pages need to be handled with care versus which ones can be torn down and rebuilt from scratch. 

One way to go about it is investigating the relationship between traffic and conversions; depending on how the two are connected, each of your website pages will fall into one of 4 likely categories:

• High conversion, high traffic pages → these are the most precious and valuable pages for your business: any mistake you make here could have disastrous consequences, which is why you need to approach them with caution and 10x more care compared to everything else you are going to redesign on your website.
• High conversion, low traffic pages → these pages are important because of the conversions they lead to, even if they don’t currently have a lot of traffic, which means you need to approach the redesign with care so as not to break anything that is already working.
• High traffic, low conversion pages → traffic is high on these pages, but something is not working conversion-wise. Redesign while keeping improvement in mind: you’re not risking conversions with the changes you make, so you can afford to be more experimental than in the previous two categories.
• Low traffic, low conversion pages → changes to these pages are probably not going to be noticed because of the low traffic, and you’re not risking conversions anyway. Redesign all you want: these are the most risk-free pages on your site.

⚠️ Why this is important: understanding which pages must be preserved and handled with care will help you get the most out of your website redesign while making sure you a) don’t break something that is working well and b) don’t tank conversions.

How to do it → Google Analytics (or any other traditional analytics tool you use on your site) is your best ally. The second chapter of this guide gives you a step-by-step process to identify your most valuable (highest-traffic and/or highest-converting) pages.

2: Know who is visiting your website, and why

In our experience, identifying your most valuable pages is one of the most overlooked parts of a website redesign. But finding out what the important pages are is only half of the story: you also need to know who is visiting them, and why.

A few years back, research from Google showed four main intent types that drive people to a website: ‘I want to know’, ‘I want to go’, ‘I want to do’, and ‘I want to buy’.

In this framework, website visitors may be coming to your site because they

• Are curious to know something about your brand or products
• Want to get in touch with you (e.g. finding a physical location they can go to)
• Need to learn how to do something with one of your products
• Are ready to buy something from you

These are very different reasons for visiting a page, and redesigning with your customers in mind means knowing the intent or ‘driver’ that leads them there. One way to do it is by creating customer personas: semi-fictional representations of your existing and ideal customers, based on real demographic and psychographic data. Personas help you determine with a good degree of clarity:

• Who your ideal customers are (less in a ‘female, 42, has two dogs, lives in the city’ and more in a ‘project manager who leads a remote team of 5’ way)
• What their main intent or ‘driver’ is when visiting specific pages on your website (for example, the project manager who leads a team of 5 might be ‘looking to buy a piece of software that helps her automate 30% of her tasks’)

⚠️ Why this is important: persona information helps you paint a clear picture of who you are redesigning for, and keep their needs and motivations in mind as you make redesign decisions. For example: if customers get on your top landing page and the only thing they’re interested in is a store locator, the best thing you can do is to give them that. They don’t want to convert. That’s not on their mind right now. So don’t try to force them to buy—simply give them the information they want.

How to do it → if you have never created personas before, you can get started by placing on-site surveys on your website pages and collecting useful data from your customers about what is driving them there:

For more instructions, check out this guide to creating a user persona in 4 steps.

3: know what propels or stops your customers

Knowing what your most valuable pages are and who’s reaching them (and why) is a solid starting point for a website redesign—but it’s not enough for a successful one. At this point, there are still two main gaps in your knowledge: what’s convincing/helping customers to complete the actions they came to take, and what’s stopping them along the way.

You can think of these as the ‘barriers’ and ‘hooks’ that your customers experience on the website:

Investigating barriers and hooks will help you form a clear idea of:

• Where people get stuck and experience issues
• What’s working and what isn’t on individual pages
• What people like or dislike about the overall experience
• Whether your current CTAs are working
• Whether experiences differ between mobile devices & desktop
• What’s almost stopping people from converting
• What’s creating doubt and frustration

⚠️ Why this is important: if you are not able to make the connection between the behavior of your customers and your website performance, and you can’t differentiate between elements that work and don’t, you won’t know what to keep and what to remove or re-think—and you might end up replicating a lot of the existing problems in the new design.

How to do it → when building this map of your website, it pays to combine insights from traditional analytics (think Google Analytics) and internal sources (such as your success/sales teams, chat logs, customer interviews transcripts, etc.) with those you get from specialized behavior analytics software. These can include tools such as:

• Website heatmaps and session recording which help you visualize your customers’ actual behavior and interactions with individual pages and elements

Feedback widgets and on-site surveys, which customers can use to leave in-the-moment feedback about what’s working, and isn’t, with a specific page—or even with the entire site

????  Pro tip: the second chapter of this guide covers a redesign research framework that helps you bring together personas, barriers, drivers, and hooks in a simple one-page template to share with your team:

Why existing insight is important to a redesign

Most of the businesses I worked on a redesign with were eager to get rid of what they had and restart from zero. They’d often been dealing with outdated designs and unoptimized pages for a while and were looking for a drastic change. They would have happily burned everything to the ground and started again. 

But throwing everything away is a huge waste of time, resources, and potential. A website is a goldmine of insights—what people are looking for, where the flow gets stuck, what makes a prospective customer hesitate and drop off. If you don’t leverage this information, you may as well start crossing your fingers right now—because I can guarantee that something is going to go wrong.

For example (true story from a former client of mine) you might spend weeks and $$$ redesigning the ultimate, pixel-perfect store locator experience, fighting to get stakeholder approval, bringing on extra developers to design and launch new functionality… only to find out that people were absolutely fine with the previous version, and all they needed from the page was an extra line with the store’s opening hours. Which could have been added on your own in about 5 minutes. 

4: know how your team will be impacted—and get them involved early on

Rather than doing the usual company-wide grand unveiling of the redesigned website once it’s all done, consider getting people involved earlier on in the process. Your website has an impact on all aspects of your business, and everyone who works with it (and with customers) should be aware of what’s going to change. For example:

• UX and design teams will need to make sure the user experience isn’t compromised and will have crucial insight into which website design elements need adding, changing, or re-doing

• Content and copywriting teams will be in charge of new copy and editorial decisions, and will need to know where their new content is displayed and how much space they’ve got to work with
• SEO (search engine optimization) and dev teams will want to oversee the technical aspects of the redesign, including a potential URL migration, to make sure nothing breaks on a page and existing search engine rankings don’t tank post-launch
• Sales reps may currently use the website to capture target leads and will need to know the ins and outs of its updated structure
• Support and success teams will need to understand where to direct customers who are looking for information or issue resolution

⚠️ Why this is important: bringing cross-functional teams onboard for a redesign helps you get buy-in and support throughout a process that will inevitably impact them in the long run. Folks from outside your team will also have valuable insight that you missed: for example, your sales and success reps speak to your customers day-in, day out, and are one of the best sources of data when building user personas or working with the drivers/barriers/hooks framework.

“I will talk to someone internally on the sales team [and] on the marketing team. I’ll do a short interview with them, where I’m just trying to get the context behind who these [customers] might be. What do they come looking for? What pain points or objections do they have? I’m trying to get a little bit of qualitative background from different internal teams that I can bring with me to the quantitative side when I start to [plan] the redesign.”

5: Know how to measure success with Key Performance Indicators (KPIs)

If you are a business selling online, metrics related to your bottom line are the most accurate way to see whether your changes were successful. They get straight to the point: did your redesign pay off for the business?

Revenue-related metrics tie back to the point of your redesign: to create a site that your target customers love—and therefore, purchase from. They include: 

• Number of conversions
• Conversion rate
• Revenue
• Average Order Value (AOV)
• Customer Lifetime Value (CLV)

You can also use qualitative metrics to determine the impact of your redesign. For example:

• Volume of support questions/tickets → has it decreased since the redesign?
• Customer Satisfaction Score (CSAT)
• Net Promoter Score (NPS)
• Customer Effort Score (CES)

⚠️ Why this is important: without clear KPIs, you won’t be able to determine a) if your website redesign was successful and b) by how much. 

6: Know what to change—and how to test it

You’ve done your research, you’ve lined up your KPIs, and you’re ready to start the redesign. The temptation to completely overhaul your site at once is probably lurking in the background—but a safer, more efficient way to go about it is focusing on the small things that can make a big difference first, making changes, and testing the results.

A/B testing is often a good solution, especially if you have enough traffic to get statistically significant results. You simply take one of your new elements and test the impact on your site’s goal in comparison to the current site. For example, you could:

1. Test whether the video on your homepage (which existing customers have already told you they enjoyed) could be moved above the fold. If that works… 
2. Test whether social proof makes a difference to conversions on your checkout page. If it does…
3. Continue with another change 

But if you don’t have enough traffic or an A/B testing tool set up, there are other ways to test the effectiveness of a few website designs; for example, you can consider running moderated usability testing sessions, both in-person and remotely, where you show your new page(s) to real people, get them to interact with it, and ask questions about their experience and any obstacles they’re encountering.

When a website redesign goes right

When we redesigned Adora Beauty’s mobile website, we started by running a dedicated research round looking specifically at the qualitative, four-pillar ‘I want to know, I want to go, I want to do, I want to buy’ framework. 

We collected a lot of data on the questions people had, how they were going through the site, where their anxieties were, what were their motivations. This resulted in a lot of insight: for example, [we learned that] on the product page the benefits need to pop out and speak to mitigating customer anxieties.  

But we didn’t just do the redesign and then launch it. We had hypotheses for every section of the flow and we A/B tested each hypothesis separately, came up with the set of winners, combined all the sections, and then tested the full user flow at once.

[The result was] a nice 16% jump (confirmed with insane amounts of data) increased on their web conversions. 

⚠️ Why this is important: a handful of landing pages likely form the bulk of your traffic and conversions. You do not want to break any of them. So take the most impactful idea that came out of your research, test it, implement if needed, and move on to the next one.

How to do it → ConversionXL created a PXL Prioritization Framework to solve the problem of ‘okay, but which one is the most impactful idea that came out of my research?’ Add your test hypotheses and changes in the first column, score them throughout the sheet, and pick the ideas with the highest ‘result’ score. Those are the ones to get started from.  

Final thought: a website redesign is never really done

If you thought your job would be done after the redesign is complete, think again. 

Customer preferences are always changing, and so are browser technologies, design practices, and accessibility standards. Plus, things that worked at the time of the redesign might no longer work 12 months down the line. You’ll need to keep track of what your customers want and need—after all, they’re the people you’re designing the website for.

How to do it → use the same behavior analytics and feedback tools you used throughout the drivers/barriers/hooks research phase. For example, compare heat maps of your older website pages vs. new ones to see whether new design elements are attracting a user’s attention differently, or add a permanent on-page poll to your site and determine whether a user’s reason for visiting your site changes over time. 

Articles from Hotjar.