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.
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 obviously 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. This chapter covers the 6 core questions and 6 must-haves of a customer-centric redesign; chapter 2 takes you through a step-by-step research framework to help you collect the customer-centric insight you need; chapter 3 wraps up with a few dos, don’ts, and tips about website redesign we learned from our experience and that of other UX, design, and optimization pros.
Editor's note: chapter 3 will be published on December 30th.
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 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:
Research is a crucial part of your 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. 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:
Don’t panic if you don’t have the answers straight away. We’re going to use the rest of this chapter to help sort through them, 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:
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 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.
Senior Marketing Strategist, Hotjar
Here are 6 things you need to know when approaching, and then going through, a website redesign:
Think of a website redesign 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 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:
⚠️ 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.
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, visitors may be coming to your site because they
These are obviously 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:
⚠️ 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.
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:
⚠️ 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:
🔥 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:
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 really 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.
Senior Editor, Hotjar
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:
⚠️ 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 actually 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.
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:
You can also use qualitative metrics to determine the impact of your redesign. For example:
⚠️ 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.
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 to statistically significant results. You simply take one of your new elements and test the impact on your site’s goal in comparison to the old version. For example, you could:
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 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 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 really 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 together, and then tested the full user flow at once.
[The result was] a really nice 16% jump (confirmed with insane amounts of data) increased on their web conversions.
Research Director, CXL
⚠️ 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.
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.