Last updated Sep 03 2020

Website redesigns: 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. 

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, web design, and optimization pros.

What is a website redesign?

A website redesign is a significant change of 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. 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 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:

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. 

Louis Grenier-1
Louis Grenier - Senior Marketing Strategist, Hotjar

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 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:

website-redesign-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 obviously 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’.

google-research.png

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 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:

  • 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:

product-landing-hotjar-poll-example-crop.width-750.jpg

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:

Visualization of a CRO plan

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
  • 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:

what is a heatmap

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

hotjar incoming feedback neutral

🔥 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:

16-hotjar-website-redesign-process-plan

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 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. 

fio-hotjar.png
Fio Dossetto - Senior Editor, Hotjar

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.

Joel-Klettke.jpg

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.

Joel Klettke

Joel Klettke

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) → has the score improved? Are customers expressing more satisfaction with specific parts of your service (especially support)? 
  • Net Promoter Score (NPS) → has your score gone up, and has the distribution of your business’ detractors and promoters changed with the new website version? 
  • Customer Effort Score (CES) → a usual goal of a redesign is making the new website easier to use overall. Do people find that it takes less effort to use your website now, compared to before?

⚠️ 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 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 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 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. 

ben-labay
Ben Labay - 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.  

pxl-framework

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. 

FAQs about website redesigns

Depending on how you approach your website redesign—and whether you do it yourself or hire a professional—the cost to redesign your site can range from about $1,000 to upwards of $10,000.

Some factors to consider:

1) Data: a good website redesign relies on quantitative data (i.e. data from tools like Google Analytics) and qualitative data (i.e. user personas and data from behavior analytics and feedback tools) to guide decisions and changes.


2) Talent: you can use internal talent—the team you already know and trust—to help keep your website redesign within budget. For example, if you have an in-house copywriter, they can write the content for your new site.

Hiring external talent gives you access to expertise you don’t have on your team, however, they won’t have a deep understanding of your business in the same way your current team does.


3) Size of your site: redesigning smaller websites may cost less, depending on the complexity required to redesign each page. Performing redesign research will help you identify how many pages you need to redesign, and how.

Because customer preferences, browser technologies, and accessibility standards are always evolving, there is no specific timeframe for how often you should redesign your website.

Continual analysis of your current website and your business goals will help you identify new opportunities to optimize conversion rates (CRO) and user experience (UX) through website redesign.

A poor website redesign can have negative consequences on your SEO, while a well-thought-out redesign can have minimal effects on your SEO.

Here are some examples of the damage a redesign can have on your SEO:

  1. Changing your URL structures can create broken links and collapse your site architecture
  2. Removing pages often means losing valuable backlinks
  3. Too many 301 redirects will hurt your website’s page speed
  4. A poor redesign will result in poor user experience, increasing your bounce rate

For a successful redesign strategy, it’s good practice to focus on small changes, one at a time. By implementing smaller changes, you can measure their effects (with A/B tests, for example) and swiftly roll back any unwanted changes.

Depending on the scope of your project, a website redesign can take months to complete. For every redesign, you will need to:

  1. Define your business goals
  2. Gather quantitative and qualitative data to help support your goals (with website analytics and user behavior data)
  3. Audit your current website to understand what helps or prevents visitors from taking action
  4. Implement and A/B test your changes
  5. Define your Key Performance Indicators (KPIs) to evaluate your changes
  6. Revisit your business goals, re-test, and re-evaluate to stay up-to-date with changing customer behavior, design practices, accessibility standards, and browser technologies

After your redesign is complete, you should continue to test and implement changes.

Your must-have during a website redesign

Sign up for a free Hotjar account, set it up, and find out what to keep and what to change on your website as you approach a full redesign.

Free forever. Get started!
Hotjar-8-tools-behavior-analytics