Learn / Guides / Website redesign guide
Back to guides
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.
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:
What are your most valuable pages right now?
Who is coming to your website, and why?
What specific, measurable customer need isn’t being met by the current website?
What’s the rest of your team/business using the website for?
What pages and elements are working well?
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.
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:
What your website’s most valuable pages are
Who is visiting your website, and why
What propels or stops your customers
How your team/business will be impacted by the redesign
How to measure success with Key Performance Indicators (KPIs)
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.
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.
"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
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:
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…
Test whether social proof makes a difference to conversions on your checkout page. If it does…
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.
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.
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
How much does a website redesign cost.
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 the 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.
How often should you redesign your website?
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 a website redesign.
Does redesigning your website affect SEO?
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:
Changing your URL structures can create broken links and collapse your site architecture
Removing pages often means losing valuable backlinks
Too many 301 redirects will hurt your website’s page speed
A poor redesign will result in a 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.
How long does a website redesign project take?
Depending on the scope of your project, a website redesign can take months to complete. For every redesign, you will need to:
Define your business goals
Gather quantitative and qualitative data to help support your goals (with website analytics and user behavior data )
Audit your current website to understand what helps or prevents visitors from taking action
Implement and A/B test your changes
Define your Key Performance Indicators (KPIs) to evaluate your changes
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.
Redesign research process.
Website Redesign Guide: How to Transform Your Website
- Sergei Davidov
- on Web Design
Website redesign is an overlooked process that can provide benefits to your website. It is similar to redesigning an apartment where you can add new furniture, do a new paint job, add or remove unnecessary features to make more space, and make it aesthetically more pleasing and functional.
Just like that, you can add new features and functions to your website or remove them entirely; you could change the colors, the layout, or the typography of your website and make it look better, more modern, and in line with current web design trends .
There are quite a few reasons for doing it. You may have a website with outdated design practices that provide a bad user experience. There could be persistent technical issues that need to be fixed, new features added or irrelevant ones removed. Or, you may simply want to redesign it for the holidays or another special occasion. Whatever your reasons are, redesigning your website can have great benefits.
This guide will help you understand website redesign, know when to use it, and provide you with the methods of doing it correctly.
Table of Contents
What is a website redesign, how to prepare for a website redesign.
- 1. Understand the Reason for the Redesign
- 2. Get Your Users To Weigh In
- 3. Perform a Website Audit
- 4. Create Your Redesign Roadmap
- 5. Determine Your KPIs and Set Measurable Goals
How To Perform a Website Redesign
Step 1: create the website redesign proposal, step 2: schedule it out.
- Step 3: Research, Plan, and Organize
- Step 4: Back up the Website
Step 5: Update the Style Guide
Step 6: wireframe any pages that will be redesigned.
- Step 7: Create Your Mockups and/or Prototypes
- Step 8: QA the Redesign and Get Client Sign-Off
- Step 9: Push the New Design Live
- Step 10: Carefully Monitor the Site for the Next Month
Website Redesign FAQs
A website redesign is the process of modernizing, fixing, or repositioning a website in order to increase traffic, engagement, revenue, and more.
Redesigns aren’t always centered around superficial changes to the frontend design. In some cases, the technical backend is updated or repaired in order to improve the site’s performance .
Designers can redesign any facet of a website, including:
- Navigation ; design or structure
- Page layouts
- CTA buttons
- Contact elements
- User journeys
- Checkout processes
Don’t mistake a website redesign for a website refresh. A website redesign refers to a major overhaul of the design and/or features of a website, while a website refresh is about preserving the bulk of the design while implementing minor changes site-wide.
Why Do We Need To Redesign Websites?
Web design trends change. Businesses evolve. Consumers grow pickier. These are just some of the ways in which external sources dictate that a redesign is in order.
In some cases, it’s the website itself that prompts the change. Or, rather, it’s the data that lets us know there’s something not quite right and suggests that a redesign may help fix it.
Regardless of why the website needs to be redesigned , the goal of your project is the same: provide a better on-site user experience and, consequently, make the website a more successful source of leads, revenue, users, readers, and so on for the business.
A website redesign can’t just be something you throw together. It should be a data-driven, user-first approach that fixes the inadequacies of the site, no matter how big or small they may be.
So, you need to approach this with the same amount of care and planning that you put into building websites from scratch.
Here’s what you should do to prepare for the redesign:
1. Understand the Reason for the Redesign
Usually, something triggers the discussion around a redesign. If you can pinpoint its origin, it’ll help you choose the best approach.
It could be that your client (or you yourself) commented on the age of the website, the current SEO ranking, bad popups, a badly designed funnel, problems with getting leads, etc.
By understanding what it was that triggered the desire for a redesign, you can start planning the right approach (do need to change the layout, the colors, the size of the text, add buttons, remove them, etc.)
2. Get Your Users To Weigh In
There’s a lot of data at your disposal and this can give you great insight into what’s working, what’s not, and where you need to focus your redesign efforts.
Here are some tools that can help you with your endeavor:
Google Analytics is a valuable resource when redesigning a website. Any suspicion you or your client had about the inadequacy of the design of the site or its content can be backed up with a look at the numbers.
The first thing to look at is your Audience data:
Who is visiting the website? And is it the user persona the website was initially designed for?
If yes, then what’s holding them up from doing what they’re supposed to do? (The Users Flow will help you visualize this.)
If no, then is the problem that the website is designed for the wrong user? Imagine how key performance metrics like bounce rate, time on site, and conversions would look if you redesigned it for that user.
The next thing to look at is individual page performance. You can find this information under Behavior :
Overall, how happy are you with the performance of the site? You’ll find that information in the very top row.
If the site as a whole is seriously underperforming, you’ll have to use other sources to try to sniff out the issues.
If the issue is relegated to certain pages or parts of your site, this data will be useful. For instance, which pages are performing the best in terms of:
- Average time-on-page?
- Bounce rate?
- Page value?
Are there any critical pages missing from the action or seriously underperforming? What do you suspect is causing this issue? Etc.
Try to figure out why your seemingly most valuable pages aren’t getting the traffic and engagement you need them to. The Behavior Flow tool will also help with this.
Website Surveys and Feedback
Your existing Google Analytics data will shed a lot of light on what’s going on with your website and where it needs a redesign. But don’t rely solely on your data-based assumptions. You should go directly to the source.
One way to do this is by adding a survey or feedback widget to your website. This way, visitors who feel strongly (either way) about the design of your website can give you direct input.
Another way to get direct input from your visitors and customers is by setting up usability tests on your website.
With tools like heatmaps and session recorders, you’ll actually see what’s going wrong as they move around your website. It’s a great way to understand where your design or user journey is tripping people up.
Some of the most useful tools for conducting usability tests are Aurora Heatmap, Hotjar and Crazy Egg. You can read more about them here .
Most of these tools will have the following useful functions:
- Heatmaps — which show you the most heavily viewed parts of your pages as well as those that people ignore.
- Recordings — so you can record visitors’ sessions and see if they move around your site and engage with the elements how you wanted them to.
- Surveys — so you can create custom feedback widgets to place along the side or in the corner of your site.
Usability testing is really only effective if you have a good-sized sample of visitor feedback and input to work with — and this tool allows for that if you pay for the business plan. So, keep that in mind when budgeting for your website redesign project.
3. Perform a Website Audit
Next, it’s time for you to take a hands-on approach to evaluate your website’s design and usability. There are a number of things you’ll do to complete this audit:
Compare the Design Against Current Trends
Web design trends can appear out of nowhere and there’s no guarantee they’re going to stick around for very long. So, it’s easy for websites to look out of date even if they were built within the last year or two.
The first thing to check is if your site is holding onto any outdated design trends or features. Or if a previously acceptable design choice is now out of fashion.
You should also look at how well the site adheres to web design best practices, like color theory and font pairing rules . There’s nothing wrong with making unique design choices for your site, so long as they don’t stand in contrast to what works best for the user experience.
Do a Walk-Through of Your Website’s Primary Tasks
Come up with a list of five to seven primary tasks you want people to complete on your website. For instance:
- Read through the homepage and fill out the consultation form at the bottom.
- Visit the Pricing page and choose a plan.
- Complete the checkout process within two minutes.
- Watch the video at the top of the Solutions page to learn more.
- Know how to copy the coupon code from the notification bar and add it at checkout.
Then, go to your website as a visitor and try to complete each task one by one. Be as objective as possible if and when you encounter friction along the way.
Typically, if there’s an issue with task completion, it’s due to not following web design principles . These principles teach us how factors like placement, spacing, size, and so on, impact the usability of a website.
Do a Competitive Analysis
Visit a couple of your top-performing competitor websites and do a side-by-side comparison with your own.
What kinds of signals do their design choices send compared to yours? For instance, does a dark theme make their website seem more youthful and modern?
How efficient are the user journeys compared to yours? For instance, does the sticky menu and search bar provide a faster shopping experience for visitors?
What about features that their site has that yours doesn’t? For instance, is their colorful notification bar less disruptive than your promotional pop-up?
If you’re serving the same users, there’s a lot you can learn about how and why your design is failing its visitors.
Review Your Technologies
One last thing you should look at is your technology. Because it’s not just design choices that can lead to negative user experiences — poor infrastructure can as well.
You should evaluate the:
- Web hosting plan
- Content management system
- Page builder
- Third-party integrations
Also look at your site’s optimization processes, like caching, image compression, and SEO.
If any of your technologies cause performance issues, you’ll want to switch to a better alternative during the redesign.
4. Create Your Redesign Roadmap
A roadmap isn’t about doing any redesign work. This is just about determining the scope of the project and then creating a timeline and deliverables for it.
Now, unlike a web design project, you have to account for the fact that the website is currently live and the company is using it to conduct business (even if it’s not getting them the best results).
Knowing this, you can’t schedule a redesign project the way you would a from-scratch site. There are many project management tools that can help you with this task including Monday, Asana, Trello and others.
5. Determine Your KPIs and Set Measurable Goals
Now you need a way to monitor your site’s performance post-implementation.
The best way to do this is to choose a few key performance indicators (KPIs) that will clue you into whether the redesign was a success or not.
For instance, let’s say the first redesign task on your list is to rework the homepage hero image . A KPI like conversion rate might be too broad of a metric to tell if the redesign improved anything. Instead, you’ll want to focus on what the specific redesign will change.
How about CTA button clicks?
Just as you’ve broken down the steps in your redesign roadmap, each should have an individual set of KPIs (or just one major one) to monitor.
In addition, you’ll want to set a measurable goal in relation to the KPI.
Let’s say you’re changing the image, copy, and button in the hero image. You know you want to see an increase in clicks. But how much of an increase would indicate that the redesign was successful? 5%? 25%?
Look at the legacy data of the site, establish some benchmarks, and then set your goals based on that.
Now that you know what’s at stake with a website redesign, it’s time to talk about how to perform one. Here are the 10 steps you’ll take to ensure that your redesign is a successful one:
Even if you know what the game plan is, the client needs to be on board with what you’re about to do.
Create a website redesign proposal that spells out the:
- Scope of the job
- Project estimates and payment due dates
- Timeline and milestones
- List of deliverables
- Terms of your relationship
Once you get their signature and approval, you can get to work.
Using the steps laid out here, as well as the individual tasks you’ll do within each, set up your redesign job within your project management system.
Don’t be afraid to spell everything out, like when and how much to invoice your client for when milestones are hit. Once you’ve laid down all the tasks and given them due dates, start assigning tasks to stakeholders so they can see what’s coming down the line for them.
It’s not a bad idea to have a kickoff call with your client and team and to talk them through the schedule in real-time either.
Step 3: Research, Plan, and Organize
Everything under “How To Prepare for a Website Redesign” above will be done at this stage of the job.
Make sure you save everything in a dedicated place so you have a quick set of references to guide you, your team, and your client through the project.
Step 4: Back up the Website
Although you’ll be doing the design and development work on a staging server or subdomain, you still should back up your website . There are many WordPress plugins that can help you with this task.
If the website to be redesigned doesn’t yet have a style guide , now is the time to create one for it. If there is one, you’ll want to review what’s in there and ensure that any changes are documented.
You never know how many times or how frequently you’ll update this website (or who will do it), so it’s always a good idea to review and update it before you do anything new.
Unless you’re only making superficial changes to the UI or brand elements, the layout of your pages and the flow of your site’s structure is likely to change.
Spend some time creating wireframes for any pages or parts of your site that will be affected by the redesign.
If you were the original designer for this website and you have the original wireframes, don’t be afraid to repurpose them. They’ll save you time having to build them from scratch.
Or, if you prefer, you can use Elementor as your wireframing tool.
All you have to do is make a copy of your current website on your staging server. Then, create a new page or template and start wireframing your new pages or components.
You can even use Elementor’s block templates to simplify the process:
While there are dozens of fully designed blocks, there are many block templates that would work well as basic placeholders.
Step 7: Create Your Mockups and/or Prototypes
What’s great about doing your wireframes in Elementor is that you can skip right over the mockup phase and go straight to building your working prototypes.
If you prefer to do your mockups with Photoshop or Sketch, that’s fine, too. You can use this guide to effortlessly move your designs over to WordPress where you’ll turn them into prototypes.
Step 8: QA the Redesign and Get Client Sign-Off
Once your prototypes are built out and the redesign and/or rewrite is complete, it’s time to QA the website .
If you’re going to handle it on your own, that’s fine, too. Just give yourself some distance between the work of designing and developing the prototype and the quality assurance review.
When you’re 100% satisfied with what’s there, pass it over to your client and get their feedback on it.
Step 9: Push the New Design Live
With your client’s approval in hand and your pre-launch checklist completed, you can move your staged prototype over to the live site .
Step 10: Carefully Monitor the Site for the Next Month
You’ll want to keep a close eye on Google Analytics as well as your usability tests (if you still have heatmaps and session recordings in place) after launch.
The whole point of this website redesign is to help your website perform better. If your data doesn’t reflect that, then you may want to roll back any changes you’ve made or implement an alternative strategy.
One of the nice things about using WordPress to build your website is that it automatically saves previous versions of your pages.
If your content is causing more problems, just go to your page’s Revisions and roll it back. If your design is causing the issue, you can restore the old backup.
Of course, if your redesign is successful, it’s time to get paid for completing this portion of the redesign job and get started on the next one!
Here are some remaining questions you might have about taking on a website redesign project:
1. Will a Website Redesign Impact SEO?
The short answer is “Yes”. And it can go either way.
If you successfully redesign your website and it improves the user experience, the increase in traffic, engagement, and conversions will give your website a boost in search.
On the other hand, if you make some mistakes during the redesign and it falls flat with visitors, the website’s ranking could plummet as a result and put you in a worse position than before.
There’s another thing to consider when it comes to SEO.
When you make massive changes to the content and metadata of the page, it can negatively impact your ranking. But that’s not always a bad thing.
For instance, if you’re retargeting some of your pages around better keywords, you can expect that it’ll take some time to grow your visibility in search again.
It only becomes a problem when you change something like the URL.
If you simply save the redesigned page to the new URL, anyone who gets ahold of that old URL (from search, from social, or from other sites) will end up on a 404 error page .
So, if you make big changes to the site structure, you have to remember to use 301 redirects in order to keep visitors on live pages and preserve the original page’s link juice in search.
2. How Much Does a Website Redesign Cost?
Freelance web designers charge anywhere from $500 to $5000+ for a brand new website. Pricing is pretty straight-forward since you know how much time and resources it takes to build a certain type of website as well as the value your client will get from it.
Pricing a website redesign isn’t as simple though. Realistically, it could cost anywhere from $500 (for a simple branding refresh) to upwards of $10,000 (for a complete overhaul).
Really, it depends on the scope of the job.
Here are some things to think about before you pitch any pricing to the client:
- Will your client give you time and the opportunity to run usability tests and gather the data needed to create the proper strategy?
- How much of the site needs to be redesigned?
- How complex are the changes?
- Will you need to hire a specialist to do design, coding, or writing?
- Are you going to spend time switching any of the technologies?
- How quickly does the redesign need to be turned around?
If you can estimate the total time you’ll spend on the project as well as the cost for additional resources, your project proposal and costs will be much more accurate.
3. How Long Does a Website Redesign Project Take?
Again, it all depends on the scope of the job. Plus, if you take an incremental approach to implementing changes, that’ll stretch out the length of the job as well.
But let’s say you’re working on a light refresh of the UI. If you factor in all the time you spend gathering and analyzing data and setting goals, it’ll probably take between a month or two to get everything done.
Something larger or more complex, on the other hand, can go on for months and months.
And while your client might not be excited to hear that, remind them why the website needs to be redesigned in the first place: It’s not working as well as it should (if at all).
Then, explain to them the value of taking a methodical approach to redesign.
By prioritizing the parts of the site causing the biggest issues, they’ll start to see progress before the job is done.
This means they won’t have to spend a huge sum of money on a redesign project before they ever hope to see a return on their investment. They’ll pay for each leg of the project and slowly but surely see their website start to generate more and more revenue along the way.
Redesign Your Website With Elementor To Give It New Life and Yield Better Results
Redesigning a website could be a wonderful thing if it’s used appropriately and done correctly. It can breathe new life into your website, improve user experience, conversions, and SEO and it will make sure that you stay tuned to the latest web design trends and don’t fall behind your competition.
The actual process involves a lot of research pre and post redesign. You will need to make sure that you redesign only the things that impact your website negatively and keep those that have a positive effect on your website. Additionally, proper research is a sure way to target your weak spots and make sure that your website redesign is done correctly and to your users’ needs and expectations.
Certainly, depending on the scope of your redesign, you may have to pay a hefty sum, but it shouldn’t deter you as the end results and the long-term benefits are far more important.
Luckily, Elementor can help you greatly with this endeavor. So make sure that you learn about all the benefits that Elementor can provide you with, including easy redesign, numerous user-centric features, and a proper cost forecast, and get your website redesign started.
Looking for fresh content?
Website Builder Strattic Page Builder Plugin Hello Theme Dynamic Content Ecommerce Theme Builder Landing Page Builder Popup Builder Form Builder Workflow Optimization
WordPress Hosting Strattic Page Builder Plugin
Web Designers Developers Marketers Agencies Small Business Owners
Academy Blog Add-Ons Developers Website Support Web Creators Glossary Integrations
Elementor is the leading website builder platform for professionals on WordPress. Elementor serves web professionals, including developers, designers and marketers, and boasts a new website created every 10 seconds on its platform.
Subscribe to our newsletter
© Elementor. All rights reserved
How to Redesign A Website: Tips, Examples, and Best Practices
Want to do a complete website redesign project? This handy guide – complete with useful tips, practical examples, and expert-approved best practices – is a good place to start.
Redesigning a website can be tricky. Knowing how much to redesign , what elements to tweak, and what you want the end product to look like are just some of the questions people struggle with when undertaking the daunting process of a website redesign . In fact, many marketers are unable to justify the costs of redesigning their websites and never go through with the process at all, which can be a big mistake.
Why Do a Website Redesign?
According to research by Stanford , brands should design their website so that it looks professional and purpose-driven. “People quickly evaluate a site by visual design alone. When designing your site, pay attention to layout, typography , images , consistency issues, and more. Furthermore, the visual design should match the site’s purpose.”
The writing is on the wall: your brand’s website design is instrumental for driving user decisions relating to your brand’s credibility. Moreover, it can boost revenues, reduce the churn rate , and improve the overall user experience. Needless to say, ensuring that your website design stays current and ahead of the top UI and UX trends can give your business a competitive edge.
Let’s look at some of the most useful web design tips and best practices you can follow to reboot your website strategically and aesthetically.
Top 5 Web Design Tips to Convince & Convert
1. do a complete audit of your existing website, not a hard reset.
If you want a website that’s free of broken links , plummeting conversions, and a negative user experience , analyze the existing pain points or areas of friction within your site. Ask yourself the following questions when trying to analyze your website’s performance :
- Which are the most-visited/valuable pages on your website? What elements seem to be working well?
- What does your website’s target audience look like, and why are they visiting your website?
- Is there a gap between customer expectations and the website offering?
- What are some of the most useful use cases for the website?
- What metrics will you use to track the success of the website redesign?
Key learning : Instead of blindly going in for a complete website redesign, take a cue from lessons learned in the past and focus on fixing the existing errors – while retaining the elements that actually work – to enhance the user experience and skyrocket the conversion rate . Doing a complete rework without any strategy or purpose will only lead to a design that feels unfamiliar or, worse, out of place.
2. Get Innovative with the Research Process
You can’t hope to have a redesigned website that delivers if you don’t spend extensive time and effort in the ‘research’ phase. Designing the website is important, but it’s the smaller piece of the puzzle.
The real magic lies in building a solid foundation and getting real-time answers to how the website is faring currently. You can send a personalized and explanatory email to customers asking them for their feedback and telling them why it’s important for you to hear them out, as Shopify demonstrates below:
Key learning : Spending time in the research stage will help you to deliver a redesigned website that does not tank and is an actual improvement to the current version. Otherwise, you’ll end up going back to the drawing board–costing you even more time, money, and effort.
3. Think About Your A/B Testing Strategy
Before you begin the redesign process, map out your testing strategy to a ‘t’. You can engage in a variety of experiments to gauge the efficacy of the newly designed web pages, such as:
- Functionality testing: This kind of testing is extremely helpful for understanding whether critical elements such as buttons, colors, text boxes, etc., are in sync with your brand’s positioning and branding guidelines. It will also answer key questions such as whether the website is performing well on slow-loading networks or not.
- Conversion optimization : This testing strategy comes in handy when you don’t have enough data related to conceptualize what the new design should be. So you test new versions of the design each time and use the data results from the split tests to improve upon the redesigning strategies, as PayU did below. This should improve conversions by 5.8% using data-driven A/B testing. PayU found that multiple users were dropping off from the checkout pages:
They tested a variation where the users only needed to fill in their mobile number:
This small change allowed the brand to leverage a 5.8% improvement in conversions as compared to the previous version.
- Other tests : In addition to this, you can test a variety of elements such as the content, the brand colors , fonts , taglines, landing pages, value proposition statements, forms, shopping carts, etc.
Key learning : A/B testing is an important element of the website redesigning process. It helps you to understand what is working and what your users are not liking. Using the real-time data gathered, you can make a more informed, data-driven decision to enhance the website redesigning process.
4. Keep Your Customers Front of Mind
As obvious as this may sound, brands often forget to keep the redesigning process user-oriented and get lost in a maze of aesthetics that may be pleasing to the eye, but may not really add value to the user’s browsing experience. For any website design to hit the nail on the head, it needs to ace both functionality and form.
For instance, Patagonia’s website design is an excellent example of the right mix of form, function, and substance (in both the literal and figurative senses of the word):
The navigation is clean, minimal, and simple. The imagery is beautiful and the layout is easy to navigate. Furthermore, the brand effectively tugs at the reader’s heartstrings by openly speaking about the brand’s core values and principles that drive it forward.
Key learning : To avoid the customer blind spots while redesigning, it is important that you ensure that every element included within your website redesign strategy is user-oriented, not product-driven. This is where doing ongoing customer surveys and conducting user interviews can lend a helping hand and allow you to design using customer-approved data as the base.
Bonus tip : If you’re looking for a rich repository of useful web design elements all under one roof, check out Envato Elements which offers graphics, web templates , video templates , audio , photos , and more, and helps save time on your website redesign project.
5. Let Your Copywriting Team and Design Team Collaborate
When it comes to website designing, brands often take the design-first approach – a fatal mistake. For your website to be effective, your copywriting and design experts should collaborate and conceptualize the redesigning process together from the very beginning.
Asking the content writer to jump in at the end of the design process is like asking the editor to edit a movie without giving them any context of the movie at all. It’ll never work and inevitably, the overall quality will suffer and the design will feel disjointed.
Here’s a workflow you can follow to ensure your redesign process flows smoothly:
- Get your marketing team, content team, and design team to brainstorm on ideas relating to the website pages they wish to redesign.
- Push the team to run customer interviews as well as surveys, and do competitive analysis and market research to get a good understanding of the key pain points that the users are facing.
- Based on data collected, the content writer or content writing service can create compelling content that addresses the pain points unearthed and that the users will actually want to read.
- Consider using an advanced AI writer to deliver high-quality content if you’re in a hurry. This tool can be useful for writing copy, long pieces of content, essays, even stories, and can also audit grammar.
- On the other hand, the UX designers will simultaneously create layouts, wireframes , graphics, illustrations , keeping in mind the content requirements .
- Moreover, you can get your tech team on board and think about ways to further enhance the user experience by integrating intuitive tools such as live chat , chatbots, etc. which bring speed and convenience to the browsing experience as Lululemon demonstrates below:
By integrating a live chat option, customers can instantly get in touch with an agent and have their queries addressed, without the hassle of waiting. Additionally, you can leverage Envato Market to select from a wide range of WordPress themes , code , plugins , and more to get the job done.
Key learning : Long story short, the written content and design of your website should complement each other and add value to the user’s experience with the click of a button.
The Bottom Line
Contrary to popular belief, redesigning your website is a structured and logical process that involves more than swapping out a few images here and there. Follow these useful tips outlined above and redesign your website that customers will keep wanting to come back to, without that extra nudge or push. For more inspiration, check out the top website design trends of 2021 .
Guest Author: Srushti Shah
Srushti Shah is an ambitious, passionate and out-of-the-box writer with vast experience in Digital Marketing. She works as a Digital Marketer and Content Writer at Acquire. Her key focus is to serve her clients with the latest innovation in her field to help drive fast and effective results. Working beyond expectations and delivering the best possible outcome is her professional motto. Outside of work, she loves traveling, exploring new things and spending quality time with family. Reach out to Srushti Shah on Twitter or LinkedIn .
Take your inbound strategy to the next level
- Master the 7 principles of highly effective inbound marketing
- Dramatically improve your inbound sales
- Get more buy-in at your company
- What is They Ask, You Answer?
- They Ask, You Answer Summit
- How to Get Started
- Video Library
- Success Stories
- About the Book
- Sales & Marketing Training
- HubSpot Training
- Paid Search & Social
- Training for Coaches & Agencies
- Web Design & Development
- Membership Overview
- IMPACT+ for Business
- IMPACT+ Pro
- Certified Coaching Program
- All Available Certifications
- Certified Coach Directory
- Learning Center
- Talk with an advisor
- Talk with us
- All Inbound Marketing
- Content Marketing
- Lead Generation
- Marketing Automation
- Marketing Strategy
- Reporting & Performance
- Sales & Marketing Alignment
- Sales & Marketing Technology
- Search Engine Optimization
- Video Marketing
- Working with Marketing Agencies
- YouTube Marketing
- All Inbound Sales
- Sales Enablement
- Sales Process
- Video for Sales
- Virtual Selling
- Getting Started
- Advanced They Ask, You Answer
- Hiring a Marketing Team
- Assignment Selling
- The Selling 7
- Video Resource Library
- Hire a Coach
- Buy the Book
- Commercial Real Estate
- Financial Services
- Higher Education
- Home Services
- Information Technology
- Marketing Agencies
- Consultants, Coaches & Strategists
- Content Managers
- Executives and Leaders
- Sales Professionals
- Blog / Newest Insights
- Tools, Assessments, and Guides
- Events / Recorded Sessions
Join 40,000+ sales and marketing pros who receive our weekly newsletter straight from Marcus Sheridan.
Get live website feedback that's actionable
- Login to My IMPACT+
© 2023 IMPACT, All Rights Reserved 470 James Street, Suite 10, New Haven, CT, (203) 265-4377
Website Redesign Checklist: The 12 Crucial Steps You Need To Be Successful
With proper planning, research, and a little foresight, you can make your next website redesign a huge success and avoid unnecessary stress.
By Joe Rinaldi
Website redesign checklist
Step 1: establish your dedicated team of stakeholders, step 2: audit your current site, step 3: understand the user journey, step 4: set goals, step 5: define your strategy, step 6: setting a timeline.
- Step 7: Review and update (or create) your brand style guide
Step 8: Gather inspiration and analyze the competition
Step 9: craft your content, step 10: start designing, step 11: develop your site.
- Step 12: Launch your new site!
“Website redesign.” Two words that can make even the most veteran of marketers shudder.
When done right, a website redesign can improve the experience people have on your website and turn it into one of your most valuable sales tools. In fact, Marcus Sheridan, author of They Ask, You Answer , often calls your website your best sales rep.
However, when we cut corners and skip steps, a website redesign can easily go off the rails , costing your company valuable time, effort, and money, which could end up doing more harm than good to your marketing.
But don’t let these high stakes scare you.
With proper planning, research, and a little foresight, you can make your next redesign a huge success and avoid unnecessary stress — and we’re here to help.
IMPACT has been strategizing and designing websites for over a decade, and in this article, I will share:
- How to know if it’s time for a website redesign.
- My 12-step website redesign checklist to help set you and your team up for success.
Let's get started on the step-by-step process that will get you the website you need.
But first, how do you know if it’s time for a website redesign?
Before investing valuable company resources into a website redesign, you need to make sure you’re redesigning your website for the right reasons .
While there are a lot of good reasons to redesign your site, there are also a lot of bad ones. Issues such as “I just don’t like our website anymore” or “our competitor just redesigned their site” are poor reasons for a redesign.
If your existing website effectively attracts site visitors and converts leads, there’s no reason to change it. If your website effectively allows you to implement inbound marketing successfully at the highest level, maybe now is not the time.
Let your analytics, rather than your own subjective opinion, be the judge. Ask yourself questions such as:
- Is our business website currently optimized for mobile devices?
- Have our business goals changed since we last launched our site?
- Is the branding on our current website outdated?
- Does our website function properly?
- Is our website set up for easy updates and content publishing? (In other words, is it on a content management system that makes website maintenance easy?)
- Can our target audience easily navigate and find the best content to address their needs?
- How are our business website metrics? Are we converting leads on our website?
Based on your answers to these questions, you should get a good idea of whether or not it’s time for a website redesign.
(Note: These same questions will also help when it comes time to set your goals for a website redesign project, which we’ll dive into later.)
Assuming all signs do point to a redesign, here are the 12 crucial steps you need to take.
Before any website redesign discussions can happen, you need to assemble a website task force (or simply a “web team,” but that doesn’t sound quite as exciting) that will oversee the project.
Having a dedicated team helps avoid the issue of “too many cooks in the kitchen,” which can really slow down the progress of a redesign.
This team should be a diverse, cross-functional group of people composed of no more than five, ideally from different departments.
This helps to ensure that you’re getting feedback from people with different points of view. A good website team will have a:
- Content writer
- Final decision reviewer from C-Suite
Within this team, you also need to determine the person who will be the leader of this project.
This person will have the final say when it comes to making approvals and decisions within the group and ultimately makes sure the project keeps progressing.
With your team in place, you’re ready to get started!
The steps you take to prepare and plan for a website redesign are usually a clear indicator of how successful your redesign project will be.
One of the most beneficial things you can do to start is complete an in-depth audit of your current website.
An audit will give you a bird's eye view of all the assets you have to work with and give you insight into what’s currently performing well on your site and what’s not.
When auditing your website, you want to:
Assess your website’s current page performance.
I recommend building a sitemap of your current website and then reviewing the analytics of each web page to assess any noticeable user trends.
By analyzing key metrics — such as traffic, conversions, bounce rate, and time on page — you’ll be able to understand what pages people find useful, what pages might be missing, and what pages you can remove.
Overall, this will give you an idea of what pages you have to work with and come in handy later on when it’s time to put together the sitemap on your new website.
Complete an SEO audit of your website
A search engine optimization (SEO) audit is a comprehensive evaluation of your efforts to rank in search results and whether your site is set up to perform well.
The goal of conducting this type of audit is to identify any issues that may be negatively affecting your organic search performance. This can be either technical issues, such as the speed at which a page loads, or content-related ones, such as missing keywords.
Platforms like Semrush , Screaming Frog , and Google Search Console can help identify any issues with SEO on your site.
At IMPACT, we’re particularly fans of Semrush’s site health audit, which looks at over 120 factors when it crawls and gives you a percentage score based on what it finds.
Semrush groups issues into errors, warnings, and suggestions based on priority. The tool also tells you what the problems are and how you can fix them.
Keep a running list of any issues you find that you’ll want to address when creating a plan of action for your redesign.
Review your website’s current copy
A lot of businesses still make the mistake of assuming their website is all about them. Most of their content is geared toward telling users how great they are and why they’re unique, when in reality buyers want the answer to know one thing: Can your company solve my problem?
How well does your website copy answer this question?
Try going through your website and counting how many sentences include words like “you” versus “we.” In They Ask, You Answer Marcus Sheridan shares that the ideal ratio is five to one , meaning you should refer to your buyer five times more than yourself.
If you’re not hitting that ratio then it’s usually a clear indicator that your content needs to be reworked to focus on the buyer’s problems and needs.
Similar to the buyer’s journey, a user journey maps out the different stages a user goes through on their way to a purchase, focusing on the different actions and emotions someone may feel in each stage.
The only way to really set yourself up for success is to understand what the user is looking for, what questions they need to have answered, and how they’ll look for them on your website on their way to making a purchase.
An important question to ask yourself as you plan for your redesign is “Are there any holes in our site’s user journey?”
Use customer interviews
There are a few ways you can go about obtaining the answer to this. One way, for example, is by interviewing your customers and asking them questions about their experience:
- What made you decide to purchase product X?
- Did anything on the website frustrate you?
- How did you navigate to page X?
After all, the goal is to reduce friction as much as possible to give prospects an expedited path to conversion. What better way to improve the journey than by actually asking them?
Use user testing
You can also set up user testing and ask your audience to perform different tasks on your current website. Services such as Userlytics and UserTesting make setting up a user test as easy as possible.
This will allow you to see first-hand how a potential customer interacts with your web experience and where you need to solve for their frustrations.
Where are users falling off in their journey? What areas of your site are they consistently interacting with? Are there any major issues or bugs on the site?
Implementing a heat mapping tool such as Hotjar or Lucky Orange is another great way to identify areas for quick optimization. These tools give you a more visual view of how people interact with your website by color-coding the different elements on a page that get the most and least interaction.
By focusing on the user journey and reducing any friction, you’ll be setting your redesign up to generate real results.
As we covered earlier, there’s a reason you need to redesign your website. Now is the time to dive into those reasons and set some specific goals.
With the amount of money and effort that goes into a website redesign , success is critical. Setting realistic goals for your site to reference and measure will allow you to do that. Based on what you uncovered during your site audit, you should have a good idea of what areas of your site need improvement. This is a good place to start for creating your goals.
For example, maybe you noticed that your current site has a steady stream of traffic, but the leads aren’t pouring in. Based on this finding, you may set a goal of increasing your conversion rate by 1% within six months.
However, data alone doesn’t always give us the full story. It’s also valuable to get ideas from the members of your team. Sending out a survey to different team members is a streamlined way to get that additional feedback.
Ask your team:
- What is the primary reason(s) you have decided to redo your website?
- What is your No. 1 goal for the site?
- What are the most important things you’d like a user to be able to do on your website?
This helps you truly understand what you need to focus on during a redesign.
Whatever goals you set should be communicated to the entire team so they can be front of mind while the site is being planned, designed, and developed.
These goals will be used to guide the reporting that should be set up either right before launch or shortly after.
With an understanding of your current website’s performance and a set of well-defined goals, you’re ready to build a strategy for achieving those goals.
What your strategy should include
Make sure you develop a fully-realized strategy:
A new sitemap
During your site audit, you most likely discovered some pages that performed really well, some that no one visited, and others that you have no idea where they even came from. Your new sitemap is your chance to reorganize your existing pages, delete old ones, and add in new ones you might be missing.
I like to make a visual sitemap like the example below so I can understand the hierarchy of each page.
In the end, good web design is about effectively aiding and delivering the intended message. To do that, you need to have a clear understanding of what your message is.
What is the story you’re trying to tell on your website? What journey are you trying to take your buyers on and what are you helping them accomplish? What problems or challenges do you help them overcome?
At IMPACT, we find the most effective messaging strategy to be Donald Miller’s StoryBrand framework . In a nutshell, the StoryBrand framework is a seven-step outline of your value that positions your business as a guide in your customer’s journey to overcome a specific problem.
Once you have an understanding of this strategy, you can use it to frame the journey of your website and of each individual page. You can learn more about StoryBrand and your website specifically in our article “5 ways you can use the StoryBrand” framework to make a better website.
With this strategy, you can more effectively develop ideal user flows.
Ideal user flow
While the user journey represents the stages someone goes through when making a purchase, user flows map out the specific steps someone would ideally take within those stages to complete an action.
Mapping out an ideal user flow will help you start thinking about how people interact with your website, from a first-time visitor all the way to becoming a qualified lead.
Once you plan how someone would move through your site, you can start to figure out how to optimize the different parts of their journey.
It’s completely fine to start off with a very simple user flow like the example above. Once you launch your site and collect more data you can go back and refine it.
From here, you can create individual page strategies and content for your most important pages. More on that later.
Doing keyword research is an important step in optimizing your new site for search and gaining knowledge about what your visitors are looking for.
Knowing the terms your ideal buyers search for allows you to use those same terms when you're writing your site content. This not only helps you rank better in search engines but better resonates with your audience when they are on your site.
When it comes to performing keyword research, using a tool such as Semrush can save you a ton of time and give you the most accurate insights. Semrush comes packed with features like the Keyword Magic tool, Keyword Analyzer tool, and Position Tracking tool.
Keyword Magic is a particular favorite of our website strategists. This is an easy-to-use keyword research tool that provides all the keywords you need to build yo ur most profitable SEO or PPC campaign.
With it, you simply enter a word and are delivered a report with suggestions as well as competitive density, difficulty, search volume, and SERP features.
With a plan in place for how you want to accomplish your goals, it’s time to set a realistic timeline for doing it. The important word here is “re alistic.”
Remarkable websites take time. You don’t want to create a timeline that’s too short and forces your team to rush through important steps or leaves too much time and lacks a sense of urgency.
Unfortunately, there’s no magic answer for how long a website redesign will take. A lot of it depends on the size of your website and how many levels of approval you’ll need along the way, but you should plan to spend anywhere from 2-5 months on your redesign .
Consider when you’ll definitely need your new website. Are there any events coming up? Trade shows? If there is something pressing, get started as early as possible so you’ll have adequate time to get the quality website you desire.
Once you decide on your preferred deadline, break that deadline up into smaller pieces and set milestones. These milestones will help you keep an eye on how on or off track a project is.
As you go through the project, make sure you track your progress against the deadline and readjust your deadline if necessary.
Under more of a time crunch? Consider starting with a launchpad website .
A launchpad is a site that looks and performs better than what you have now, and is scalable, but is still in the process of evolving in terms of design. Get the 20% done that does 80% of the work and collect the data needed to iterate and improve later.
Step 7: Review and update (or create) your brand style guide
Your brand style guide is one of the most important tools your company has — and if you don’t currently have one, now’s the time to make one!
Your brand is what people think of when they hear your company’s name or see your logo. It’s what you represent and who you are as a company.
A brand style guide ensures that what you want your brand to say and what you’re actually communicating are aligned. It’s a set of guidelines that make your brand understandable and replicable by anyone in your company.
That’s why it’s so important to make sure these documents are updated before you start gathering inspiration and moving into design.
There are two major parts of a brand style guide that you’ll want to make sure are updated and accurate: messaging and visual.
This comes back to the messaging strategy we mentioned in step 5. If you don’t know who you are or what you’re selling, your website strategy and copy will be flawed at best and totally inaccurate at worst. That can wreak havoc on the timeline because things will constantly change.
To avoid this, we suggest doing a StoryBrand BrandScript , that outlines the seven pieces of your framework and helps you determine the words you use to describe your value.
Visual style guide
A visual style guide documents the — surprise, surprise — visual elements of your brand. These elements can include:
- Image treatments
- Color palette
When reviewing your visual style guide, think about how each element aligns with your company’s current brand.
Is your typography sending out the right message? Do you have a well-defined color palette that evokes the right emotions? How should people use your logo in different use cases?
Sample brand style guide from Unfold
Once your brand style guide is in order, it’s time to start gathering some design inspiration.
While working through your strategy, you can also start thinking about design (finally!).
It’s smart to do it that way because 1) it speeds up the process, and 2) strategy should dictate design. But design can dictate functionality (e.g., we know we want a pricing module on the page, and a great UX designer will have input on the best way to lay that out).
I recommend doing a deep dive into two or three competitor websites as well as one or two websites outside of your industry. This will give you a view of industry standards as well as where you can shake things up a bit (as long as it benefits the user).
Gathering these assets will also allow you to discuss, as a team, what visual elements and styles you want to incorporate. This ultimately helps confirm that your entire team is aligned on the visual direction of your redesign and that it aligns with the overall goals of the project.
When looking for inspiration, try to answer questions like:
- What feeling should a visitor get when visiting your site?
- What new tools and features should your new site have?
- What types of imagery and graphics should you use?
As you gather inspiration for your new site, make sure you’re saving the different elements you like. The best way to do this is by putting together a mood board for your team to reference during the design phase of your redesign.
If you’re not familiar with mood boards, think of them as a collage of different images and text that visually explain the direction you want to take your designs.
A mood board can include things like typography styles, layout samples, imagery treatments, iconography, color palettes, or even entire websites.
Sample IMPACT mood board
There are a ton of different platforms out there to help you create mood boards. You can use free tools such as Pinterest or Canva or, for a more premium experience with more customization options, you can also use paid tools such as Invision Boards .
Whatever tool you use is ultimately up to you and your team. Just make sure you’re documenting the inspiration you’re gathering.
One of the hardest things for teams to do during a redesign is to focus on content after design.
It’s easy for teams to be overzealous and want to jump right into design so they can see all of their hard work start to come together. Plus, let’s be honest, it’s usually the most fun part.
They figure, “We’ll just write the content after and fit it into the designs we’ve created.”
This is one of the biggest mistakes you can make during a website redesign .
It pushes people into a mindset that content is more of an afterthought that can always just be done later.
Not to mention that trying to retrofit content into an already existing design creates elements that rarely line up properly and usually force you to either make unforeseen design revisions or sacrifice the quality of your content.
Your content should always dictate the layout of your website pages. Design is meant to enhance your message, not distract from or overpower it.
Many people lean toward the design-first approach because they’re not sure where to start when it comes to creating their content. It feels like looking at a blank slate.
Fortunately, it doesn’t have to feel this way.
This is where page strategies come into play. After you complete your StoryBrand Framework and BrandScript, we recommend creating page strategies that outline how the story will be laid out on the page.
Take note of things like where calls-to-action to premium content can be introduced, where FAQs go, and where blog/learning center content can be introduced. This will guide the design.
It’s important to note, however, that not all pages require strategies.
People should just focus on the 20% of their website that drives 80% of the conversions (i.e., homepage, pricing, service/product details, and a direct bottom-of-the-funnel landing page). Pages like these carve out the main path that takes users from the top to the bottom of the funnel.
You can use tools like Trello or GatherContent to organize these pages.
With your pages organized into more manageable chunks of work, start creating content wireframes that break down exactly what content and information needs to go on each page.
This will help you focus on the story you’re telling for each page and cure that feeling of looking at a blank slate.
When creating your content make sure you’re constantly looking for opportunities to educate your visitors.
A simple exercise to see how well you’re educating visitors is to brainstorm the top 25 questions you constantly hear from buyers about your product or services. Make sure you’re answering those questions in the pages on your new site.
Also, look for opportunities to include the following in your content:
- Self-selection tools
- Premium content like ebooks, whitepapers, and buying guides
- Social proof such as testimonials, customer reviews, and case studies
These are powerful assets that can be used to educate and inform your prospects and keep them moving through the buying process.
If you’re ever tempted to skip the content-first approach, just remember that while a person’s first impression of a website is based on visuals, it is strong and helpful content that keeps them engaged and wanting more.
Being a designer, I’m a little biased, but this is the best part. Now’s the time your weeks of hard work come to life and start to take shape.
It may be tempting to dive in and start designing all of your pages, but instead, you need to take it slow and make sure you’re getting constant feedback and buy-in along the way.
Using tools such as InVision or Zeplin can help streamline your feedback and make the design process much more collaborative. Both design tools integrate with most of today’s design programs .
The most popular way to start the design process off is by creating wireframes . These can be simple black and white designs that show how you’d like to lay the content out on each page.
Sample IMPACT Wireframe
Wireframes will keep you focused on the content and allow you to make sure you’re laying the content out in the best way possible.
When you are ready to move into creating full-page designs, start out by designing the first three or four sections of a high-impact page (I like to start with the homepage) and then bring the design back to the team for feedback.
This can save you time and unnecessary revisions in the long run by making sure your design is going in the right direction.
Once your team is fully aligned on a design direction, you’re off to the races. Work your way through each page, making sure you’re getting that constant feedback and buy-in from the team.
Development is typically the final stretch for any redesign, and our website redesign checklist is no different.
It’s been a long process to get to this point, so there’s a lot of anxiety that can go along with this step, but rushing development can be a recipe for disaster and delays.
Dedicate ample time for the site to be coded out cleanly, following SEO and industry best practices — as well as the design you fell in love with.
In this step, your team, internal or external, will transfer the flat design mockups that were created, into HTML, CSS, and other languages.
As pages are developed, make sure you’re checking for cross-browser functionality to ensure a consistent experience for all users. This gives you peace of mind that no matter what browser is used, your site will display exactly as intended and also ensures your users are getting a fully optimized experience.
The same goes for mobile devices. Going through the variety of screen sizes takes time.
Typically it’s a good idea to determine the most popular devices and test those. Google Analytics can help you. This gives you a realistic snapshot of what your site looks like on different devices, again ensuring a consistent user experience that won’t frustrate anyone.
Step 12: Launch your new site!
You’ve made it! After months of auditing, planning, designing, and developing you’re finally ready to launch your new site. That’s super exciting!
Before launch, make sure you perform a pre-launch review of your site to confirm that everything with your new site is in order and ready to go. Your pre-launch review should include:
- Checking for any broken links
- Making sure your 301 redirects are all set
- Verifying that the meta descriptions and page titles are correct for every page
- Checking for any broken or missing images
Double-checking all of these items will not only save you from the future headache of rushing to try to fix issues post-launch, but also ensure a smooth transition for people from using your old website to using your new one.
Next, I’d also recommend doing a Semrush site audit before launch and comparing it to the one you took at the beginning of your redesign process. It’s important to be able to compare site health and make sure that nothing became less effective during the redesign.
When you’re positive everything is ready to go, send that site live, and pour yourself a drink!
Immediately after launch, make sure that all the pages are rendering properly, your analytics and heatmap tracking codes are in place, and you’ve submitted your new sitemap to Google Search Console .
So now you can kick back and watch the leads flow in. But your work is not done.
Plan experiments, then rinse and repeat
Your brand new website is developed and launched, but the fun doesn’t stop there. Now you have to start collecting and reviewing your user data on the new designs.
Work with your team to plan experiments to A/B test different layouts, or features, to help
improve the user journey. Focus on the most important pages on your website first, and go through steps 6-11 as many times as necessary until you ultimately hit your goals — and then set new ones!
Create reports, whether in HubSpot, Google Data Studio, Marketo, or another platform, to help you see how you’re doing. Someone in marketing needs to be able to compare pre-launch metrics to post-launch metrics. Benchmarking leads, conversion rates, keyword rankings, site speed, and site health are especially important.
These tests and the subsequent changes you make as a result will only help improve your website’s user experience, lead generation, and overall effectiveness.
Remember, preparation is key
That’s our website redesign checklist! It’s not always easy to follow it by the book, especially when there are tight deadlines or time constraints. However, following it as closely as you can will help you make your new website the traffic-driving, lead-generating machine you’ve always wanted.
Remember, when thinking about starting a redesign project, the first step is to always assess why you want to redesign your site. Make sure there’s sound reasoning behind your decision.
From here, the success of your redesign will all depend on dedicating the right amount of time to preparation and planning.
Make sure you understand things like what current assets you have to work with, what areas of the site you want to improve, and what goals you will track to see if your redesign was successful.
Follow these steps and you can’t go wrong.
Are you implementing inbound marketing and want to make sure your website is set up to execute your strategy successfully? Check out our course Elements of a Great They Ask, You Answer Website for an in-depth breakdown of what a great inbound marketing website looks like.
Editor's Note: This article was originally published in May of 2017 by Vin Gaeta. It has been fully revised and updated to reflect current website redesign best practices and processes.
Wondering where to begin?
Latest content, don't forget to share this post:, recent articles, website conversions in 2023 — stop, start, keep, how much does a website design or redesign cost in 2023, 8 of the best business website designs to inspire you in 2023, take it from an expert: you probably don’t need a new website, what does a great inbound marketing website look like in 2023, your 2023 website strategy must include these 6 things, 4 ways to recession-proof your website in 2023, 8 best content management systems for digital marketing in 2023, 12 essential tips for improving your web design in 2023, 23 of the best examples of business blog design, 5 prep secrets for a smoother, more successful website project plan (+ infographic), 11 pricing page examples for business websites (updated for 2023), 8 crucial elements every homepage design should have [+video], what makes a good website design 7 award-winning examples to be inspired by, what is a learning center and why does my website need one, 7 self-service tools on business websites to be inspired by, google shares new tools to audit website user experience, new hubspot cms hub starter tier released for growing businesses, too many internal links in content can confuse google about site structure, google july 2021 core update rolling out over next 2 weeks, 6 tips for building a great diversity and inclusion page (+examples), google punts third-party cookie ban to 2023 for 'responsible planning', 8 types of website performance metrics you should look at on a monthly basis, finally, google page experience core update is rolling out, join the 40,000+ sales and marketing pros who recieve our weekly insights, tips, and best practices..
Get the most relevant, actionable digital sales and marketing insights you need to make smarter decisions faster... all in under five minutes.
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
Create Your Redesign Roadmap . 5. Determine Your KPIs and Set Measurable Goals . How To Perform a Website Redesign. Step 1: Create the Website Redesign Proposal. Step 2: Schedule It Out. Step 3: Research, Plan, and Organize . Step 4: Back up the Website . Step 5: Update the Style Guide.
How to Redesign an Existing Website (10 Best Practices) Without further ado, let’s start with the first step: 1. Set a Goal for the New Design Every good effort to redesigning an existing website starts by setting clear goals. However, this is not about setting goals just for the sake of them.
A web design proposal is a written agreement between a web designer and prospective clients. It clarifies the needs of the client and the service or product that the web designer will provide, as well as the cost of this service.