Neil Patel co-founded Crazy Egg in 2005. 300,000 websites use Crazy Egg to understand what’s working on their website (with features like Heatmaps, Scrollmaps, Referral Maps, and User Recordings), fix what isn’t (with a WYSIWYG Editor), and test new ideas (with a robust A/B Testing tool).
Did you know that poor web design can hurt conversions and sales? An unattractive site deserves a website redesign.
No matter what your company size or industry is, though, it’s crucial that you take a strategic approach to your website redesign. Know what isn’t working, what does currently work, and what goals you wish to achieve.
Otherwise, how will you take advantage of your existing web traffic? Worse, what happens if your web design is causing people to avoid visiting your site at all?
Let’s look at some of my favorite techniques for creating a website redesign strategy and implementing it for maximum ROI.
How Do You Know if Your Website Needs a Redesign?
I answer three questions when deciding whether or not to redesign a website:
-
Does the design look outdated?
-
Are my conversions/sales decreasing?
-
Have I received complaints about user experience or design-related issues?
If I answer yes to any of those questions, a website redesign is necessary.
It’s also important to consider branding. For instance, I recently bought Ubersuggest, a keyword suggestion tool to which I’m adding more functionality.
Before I bought it, the site looked like this:
There’s nothing wrong with the design, but it doesn’t match my personal branding. After giving it an overhaul,, the site now looks like this:
It matches the design of my personal blog, so it’s easily recognized as one of my properties.
If you’re rebranding your business, a website redesign might help bolster your efforts.
The Risky Website Redesign Approach
Unfortunately, the creative process used by most agencies and marketing departments don’t consider risk mitigation.
To understand your risk exposure, think about the number of individual changes that are made during a redesign. Multiply that by the depth of change for each element. Imagine for a moment the laundry list of changes proposed during a creative meeting.
You’ll change the home page headline, imagery, site-wide template layout, navigation bar design, fonts, shopping cart or form layouts, and many more.
When do you discuss the risk of all these changes? Maybe some of those changes help conversions, and some probably hurt. How do you know which have positive or negative effect?
In most cases that discussion about risk-mitigation doesn’t happen.
Marketers usually go into a redesign without a process in place to test the page templates and landing pages that are being changed. There’s no system put in place to monitor and justify those changes against key conversion metrics.
Mitigating these risks can only be done with a rigorous conversion optimization strategy. It requires a process that includes understanding the target audience, prioritizing test hypotheses to solve issues obstructing conversions, setting up controlled split tests, and analyzing insights from data to make informed changes.
Companies that are using a structured process that include A/B/n split testing as part of a conversion optimization strategy, like WineExpress, Iron Mountain, Electronic Arts and BabyAge.com, are getting significant sales lift while reducing risk.
In fact, eConsultancy reports that companies with a structured approach for conversion optimization are twice as likely to have seen a large increase in sales as others.
A structured approach doubles conversion optimization success
The Better Approach: Evolutionary Site Redesign
Testing, and a proven system to execute testing for design changes, is critical for today’s online marketer. The risk of making substantial website changes without it is too great not to.
This approach to website redesign is something I call “Evolutionary Site Redesign” or ESR.
The truth is that a dramatic, “revolutionary” redesign is dangerous for most companies.
It’s not that you don’t need a redesign. You probably do. But a better, and less risky, approach involves a process of testing with incremental (and often dramatic) improvements. This ESR approach gives a better visitor experience and results versus the traditional throw-the-baby-out-with-the-bathwater method.
ESR Gives Continuous Results Improvement
There are two major differences between ESR and the traditional “Revolutionary Site Redesign” (RSR) approach:
- It’s Faster
After a traditional website redesign, marketing departments are usually so fed-up with the process that they’ll gladly wait another 5 years before trying again. Or else, they may spend the next 6 months scrambling to fix the conversion rate drop with their new site. ESR, in contrast, creates a system of continuous improvement so your website is always leading the pack.
The traditional website redesign cycle of under-performance - Success criteria
“Gut feeling” and reliance on the so-called “best practices” of designers and UX practitioners rules in a traditional redesign. While the team may be talented, no batter hits .1000 and many of their changes are likely to hurt website results. With ESR, every change is measured in controlled A/B/n split tests against its effect on business goals.
The RSR approach leaves your website lacking and continuously falling behind in the intervals between major redesigns. But, with ESR, your website will continuously keep up and surpass the success of the rest of the web.
ESR essentially uses conversion rate optimization principles to redesign your site.
How ESR Eliminates Epic Website Redesigns
By adopting the evolutionary site redesign approach you can guard against website redesign risks while dramatically improving your website every day.
ESR continuously improves your website
With ESR, your website will continuously keep up and surpass the success of the rest of the web. Once you’ve defined your websites goals clearly, you can test and continuously optimize to improve on them.
ESR works by implementing a system of continuous A/B split testing throughout your entire website and digital marketing. Rather than relying on the gut-feeling and flawed intuition of an art director, your website decisions should be made against the crucible of customer actions.
You should test everything in your marketing:
- Site-wide design styles
- Logo, header and tagline
- Product page templates
- Landing page design & content
- Your product or service value proposition statements
- Lead generation forms, shopping cart and checkout
- Home page design, eyeflow, merchandising
- Imagery, copywriting, ads, calls to action, and offers
- And everything in-between!
Booking.com, for example, should be continuously updating their design by testing the major site-wide elements that combine to create their look & feel: header, nav, PCTA, headlines, repeating listing areas, etc.
Booking.com’s ESR opportunities
At WiderFunnel, we’ve developed a continuous improvement system to drive the ESR process for companies. It leverages great thinkers who have gone before us and adapts the scientific method for website practicalities.
The system ensures that website test iterations are driven by solving customer problems identified in the heuristic LIFT Analysis, voice of customer data and web analytics data (like Crazy Egg click heatmaps), rather than just creative aesthetics.
The Top 5 Reasons to Use ESR
Here’s why ESR is the future of website un-redesign:
- You get a new site “look and feel” and conversion rate lift at the same time
- You learn which elements actually improve results
- You maintain your team’s focus on the important business metrics rather than “aesthetic” redesign
- Your website never faces lags in results in-between redesigns
- You avoid the risks of a “Revolutionary” site redesign
How to Redesign an Existing Website
Whether you use ESR or decide to take the plunge and do a full redesign all at once it is important to keep your website’s redesign work manageable (and enjoyable) and to make sure your final results are worth the effort. In short, take time before beginning creative work to plan. A detailed, in-depth plan of the entire project will ensure you and your comrades don’t trip over one another in the trenches.”
To do this, a lot of spreadsheet work and grit planning is necessary.
If you plan down to weekly – or even daily – tasks to be completed for each aspect of your website and assign them to different, responsible professionals from the beginning, there will be no reason your project should lag behind your timeline or produce sub-par results.
This means creating spreadsheets with numerous pages and what will seem like an endless amount of rows and columns for tracking and filling in information.
It might sound overwhelming and unnecessary, but when you’re there in the trenches and can’t see the battlefield from a bird’s eye view, having a guide to tell you exactly what to do next will give you comfort and bring you closer to relief and your goal of winning the battle.
Think of creating your website redesign action plan and tracking sheets as training for the battle: the harder you train, the more prepared you’ll be, the more successfully you’ll fight, and the quicker you will rise as the victor and return home with the spoils.
Take a look at this video before redesigning your website:
Strategy First, Planning Second
Before you make a plan of the steps you need to take to redesign your website, you need to seriously consider why you need or want to redesign your website.
Consider the goals you want to accomplish with this redesign:
- keeping visitors from bouncing off your pages so quickly
- make your library of downloadable information more accessible
- more informative pages
- to be more visually aligned with your brand
- to improve navigation to average more pages per visit
- improve on-site SEO
- etc.
Outline exactly what your goals are and prioritize them in a numbered list which you will use to plan accordingly, and attach actual data and numbers with these goals.
For example, if your main goal is to increase your conversion rate, define that goal (broken down on a page-by-page basis) like this: “Improve conversion rate of mobile game development landing page from X% to Y%.”
For each goal of your strategy point, you will make a plan outlined in a spreadsheet to achieve those goals and weave them together into one overarching, detailed plan that will lead you step-by-step into getting everything done and making your website rock.
Note: If your goals are to simply make your site look better or offer better information to your visitors, a total redesign probably isn’t necessary. You can simply refresh your site with updated design elements and better-written content to achieve your goals without getting bogged down.
Document Everything That’s Current
Write down and save your current metrics (whether they’re directly associated with your strategy-based goals or not) and save them in a spreadsheet document.
Divide the document into multiple pages based on each individual web page you have. If your site has more than 10 pages, create documents based on sub-sections of your website so there’s less confusion in trying to store and access this information.
Include the following data, at a minimum: bounce rate, average time on page, 1st traffic source, 2nd traffic source, 3rd traffic source, and conversion rate.
These documents will serve as a base that will help you prioritize your tasks and daily or weekly priorities when making your action plan tracking sheets.
Hint: Also back up the most recent version of your website before you start making changes so you don’t lose any of your backend SEO work that can be transferred to the new design. Further, document each and every piece of content you have:
- Page text
- Videos
- Blog posts
- Downloadable reports
- White papers
- etc.
These pieces of content have incredible value so you don’t have to re-do absolutely everything. And, even if one of your main goals is to rewrite a lot of it, it’s a valuable source to refer back to… whether for positive guidance or as an example of what not to do next time.
Time and Money: Your Two Most Valuable Resources
Taking stock of the internal resources you have available from the very beginning of the project is crucial. You need to know how much worker bandwidth and money you have to dedicate to the project, and over what periods of time.
With this knowledge, outline your plan for time-based deliverables and dedicate portions of your monetary and time-related budgets to each step of the process.
Make sure you complete the budgeting for the entire project at once so you can look out for problem areas and make sure you don’t come up short in the end.
In this example, a company plans to take care of everything except the design in-house.
Create Action Plan Trackers
To make filling in the exact tasks and deadlines easier, start with creating action plan trackers for every single page you will either redesign in some way or the new pages you will add into your site as a part of your redesign.
Use your page’s current site map to help you get started.
If you only have 5-10 pages within your site, one document with different tabs will suffice. However, if you’ve got more than that, segment your pages into different documents based on the over-arching goals of the pages.
For example, if you’ve got one subset of pages for services, another subset for products, and a third for company-based information, these can be three different documents, each with multiple tabs, grouped together in the same folder.
Label your column headings with page-specific task, goals, person responsible, target delivery date, and date completed, and your rows with each task that you will do.
You won’t be using this yet, but it’s the easiest document to set up and you won’t want to lose your momentum once you get to the point of filling it in.
Create Strategy Trackers
Think of your page action plan trackers as your ready-to-implement plan.
But, as stated earlier, you can’t have an effective plan without a strategy in place. You can’t decide how to get somewhere until you actually define where it is you want to go. This is what your strategy documents will do for you.
And just like your need to fine-tune every detail of your plan before you execute it, you also need to fine-tune every detail of your strategy before you execute it into your plan implementation documents.
Open the document you used to write down your goals earlier. Each goal gets its own tab in a spreadsheet.
It’s up to you how many separate spreadsheet documents you make, but make sure you’ve at least covered the bases: SEO goals, conversion goals, UI goals (clickability), time on page, pages per visit, content quality, brand association / design quality, etc.
Set your columns up with Goal, Person Responsible, Deadline, and each row is dedicated to a sub-part of action items required to either do or plan to complete that goal.
Remember the trenches, people. It sounds like a lot of work now, but you’ll be thanking your lucky stars for these sheets once you actually get down to business.
If you’re getting confused about how all this documentation works together, here’s a flow chart of the process:
Fill In Your Strategy Trackers
With both types of trackers made, it’s time to get down to business.
This is where your real training starts and is what separates the boys from the men when it comes to showing a website redesign project who’s boss.
With each overarching goal, you’ll find a seemingly endless number of baby steps to take to finish that goal.
One of the best ways to do this is to fill in the obvious, larger steps into the document first. As you realize what the smaller steps are that comprise the larger steps you initially filled in, you can add rows underneath them to make the document more complete and cohesive.
Hint: To save time doing this, have a brainstorming session with everyone involved in the website redesign project. Go goal-by-goal and write down absolutely everything each person suggests needs to be done in his or her arena to accomplish that goal.
You can go back and organize these tasks into the document later, but doing this will give you all the information you need to complete the documents in one sitting rather than having clunky back and forth communication for suggestions on improvements and additions.
Note: Depending on your in-house capabilities, you may or may not need to outsource some of the work to freelance professionals or agencies. If you see you need to do this, build a planning document dedicated to the steps you need to take to successfully find the best professionals to work with within your budget.
Fill in Action Plan Trackers
When your strategy tracker is finished, half the battle (of the training part, anyway, is finished).
You’ll find that each action item of your strategy tracker will lead you to solve problems and make decisions about what to write directly into your action plan tracking sheets. All you need to do is follow each one step-by-step.
It will take some time to do, but you can set your to-do list on autopilot (since the strategy tracker has it taken care of) and just go step-by-step, completing your goals for each day.
Once this is finished and your action plan documents are done, send them out to your colleagues working on the project with you and ask for their reviews and criticisms. A few small adjustments may have to be made, but that’s all.
If it helps, have another brainstorming meeting to poke holes in your action plan to find ways to make it stronger.
Each action item will be assigned a responsible person and a deadline, so once everything is finalized, distribute these sheets to your team and have them tick off items as they complete them.
A word to the wise: Even though you’ve taken care of yourself to follow a step-by-step plan, you will still feel like you’re deep inside a war zone trench at some points. When this happens, it’s best to hold a meeting to clear the air, communicate about any confusions, and get everyone back on track to win the battle.
Make it Happen
After all the teeth-gritting, hair-pulling planning and the internal cringing over staring at spreadsheets and filling them in day in and day out, you’re ready to jump out of the low-flying helicopter and hit the battlefield.
To make the process easier and more effective, follow these strategies.
Research and competitive analysis
Carefully evaluate your top 10 competitors. What do their websites look like? What strategies are they using that you could co-opt? What do you think they’re doing wrong?
Use competitive analysis to make your website better than the competition’s. Redesign your website so it loads faster, offers more intuitive navigation, and present better offers.
Building the wireframe and mockups
Wireframes and markups allow you to visualize your site before it goes live. When you use a wireframe, you can place each element precisely on the page.
Grid-style websites have become the norm. The human eye appreciates uniformity and balance. Your web designer can create wireframes and mockups for you to evaluate.
Starting the new design
Take your website redesign one element at a time. Figure out what elements will extend across all pages — excluding, perhaps, your landing pages — and which are specific to individual pages.
Don’t neglect your blog pages. CTA placement, image sizing, and other visual elements deserve careful consideration.
7 Steps to Launch Your Website Redesign
I’m a firm believer in beginning with data. If you have concrete information with which to begin a website redesign, you’re more likely to achieve your goals.
1. Analyze the “old” website
Start by looking critically at your current design — the “old” website. What’s working? What’s not?
More than likely, you’ve already identified specific problems. Maybe you’re experiencing frequent abandoned shopping carts on your e-commerce site, for instance. In that case, you might need to revamp and redesign the checkout process to encourage follow through.
Using Google Analytics, study traffic patterns. Do you have a high bounce rate? Which pages receive the most frequent and fastest bounces?
Using visual reports like heat maps or scroll maps to analyze the behavior of your website visitors can also help you identify potential problem areas. For instance, you might have calls to action placed too close together or limited activity on important areas of your website, such as email signup forms.
Recordings can provide even more in-depth information about website visitors’ activities on specific pages. You can see where they scroll, click, and otherwise interact with your site.
2. Identify your priorities
A website redesign shouldn’t just change the overall look of your website. It should enhance the ways in which it functions, especially when it comes to sales and conversions.
What metrics do you want to improve with your website redesign? Maybe you want to collect more email addresses, sell more of a flagship product, or encourage customers to buy bundle deals.
Knowing your goals up front allows you to focus on achieving specific results with your redesign. For instance, if you want to encourage email conversions, you could A/B test your signup forms and lead magnets.
3. Define and update the website’s target audience
Target audiences evolve over time. As you add new products or services to your website or expand into new markets, you must update your messaging to the people who are most able and willing to buy from you.
Create buyer personas for each of your target demographics (sets of individual characteristics for consumers) or firmographics (information about B2B clients).
Knowing how to appeal to those target audience members will help you make smart decisions as you recalibrate your website redesign. For instance, if you’re now targeting Millennials, you might want to create a more youthful, colorful site than if you were just marketing to middle-aged professionals.
4. Find out what is working on the current website
You don’t have to change everything during a website redesign. In fact, you shouldn’t.
Some aspects of your site probably work very well. For instance, if you’re happy with your current logo and it’s received widespread brand recognition, you probably won’t want to change it.
The same might go for the site’s color palette, font choices, or photographs. Based on hard data from Google Analytics and other tools, you can decide what you want to keep and what could use adjustments.
5. Create a list of desired design changes
Think of this step as a wish list. Write down every feature you want to add to your website, whether it’s a color change or a new tool for your audience.
Make note of any structural changes you might prefer for your site. For instance, I often recommend removing the date from blog posts. Instead of a URL that looks like this:
https://www.examplesite.com/2018/06/20/website-redesign
You might be better off with a shorter, cleaner URL:
https://www.examplesite.com/website-redesign
Do you want to add or remove anything from your navigation lists or sidebar? Are you interested in creating new landing pages? Add those to your list.
6. Define the new goals
Each of the items on your wishlist should have a reason behind it. Do you want a more complex top navigation bar? Maybe your users have trouble finding the content they need, so you need to give them ways to locate information faster.
Some of the items on your list might not have an associated goal or reason. Put a question mark next to them so you’ll know to test them against variations.
I always recommend data-based changes because you get more mileage after your website redesign and you don’t have to redesign your site as frequently.
7. Start building the website redesign plan
Whether you’re redesigning your site yourself or hiring a professional design team, you need a timeline. Figure out when each element of the redesign will occur and whether or not you will test those changes against variations.
If you’re hiring a third party or working with an in-house designer, appoint someone to approve all changes systematically. For third-party contracts, make sure you spell out all expectations in the contract and know exactly what you’re getting, such as number of free revisions and the cost of adding extras later on.
8 Website Redesign Tips and Best Practices for a Good User Experience
Now that I’ve gone through the website redesign process, let’s look at some of the best practices I’ve discovered over the years for successfully creating a pleasing design for your audience.
1. Add strong visual features and elements
I can’t stress enough the importance of eye-catching visual elements. People respond more strongly to images, illustrations, and videos than to plain text.
Consider using custom images instead of stock photography. One truck driving academy increased its conversion rate by more than 160 percent by replacing a stock photo on its homepage with one of its actual students, and by altering the CTA slightly.
2. Personalize your website based on your brand
There’s nothing wrong with showing off your brand’s personality. Think about the ways in which you communicate with your audience, such as the voice and tone of your blog articles or social media posts.
Use colors, fonts, and imagery that reflect your brand identity. Always write in a consistent voice so your audience recognizes your content immediately and doesn’t get confused.
3. Use contrasting colors
If you want your website redesign to pop, use contrasting colors. Highlight the key areas of your website you want visitors to notice with a color that isn’t found elsewhere on the page.
Todoist does this well on the landing page for its premium product. A salmon pink color draws the eye to key areas of the page, such as the logo and CTA.
You’ll notice that the CTA is larger than the other pink elements on the page, which is just another form of contrast.
4. Build a blog if you still haven’t
Content marketing doesn’t just work — it’s one of the most effective ways to drive traffic to your website. Writing for NewsCred Insights, content specialist Dawn Papandrea says, “Customers want content, not ads…[they] can smell a sales pitch a mile away.”
She notes that, based on a 2017 study by global communications firm Havas Group, nearly 85 percent of consumers report wanting to read content by brands. If you don’t meet your target audience’s expectations, you risk losing them to your competitors.
A blog is one of the easiest and cheapest ways to disseminate content. Write consistently about topics that help solve problems to attract search traffic and social shares.
5. Add new landing pages focused on converting users
During your website redesign, consider creating new landing pages. Focus each page on converting visitors on a specific offer, whether it’s a discount on your most popular product or a lead magnet for your email list.
After the redesign, run website optimization reports to keep an eye on user behavior. Armed with intel from reports of your visitors’ activities on each page, you can adjust your design based on how the pages perform.
6. Optimize the entire website for SEO
From your landing pages to your blog, make sure people can find your content through organic search. Use relevant keywords, add alternate text to your images, create custom meta descriptions, and write long-form copy so Google can make sense of the content’s purpose.
For a handy primer on getting started, check out my video below. I go into detail about three steps you can use to begin your search engine optimization efforts.
7. Consider also optimizing the website for voice search
Famed marketer and serial entrepreneur Gary Vaynerchuk has preached for more than a year about voice becoming the next big thing. According to Gary Vee, “Audio and voice are by far the most natural interface for humans to interact. We like to speak and listen.”
Think about how people interact with their smartphones. If they’re on the go, they’d rather tell their phones what to search for than type out a query. Optimize your website for voice so people can find you more easily.
If you have a local business, consider trying to rank for terms that include “near me,” “nearby,” and “closest.”
For instance, if you sell bicycles, you might want to rank for “bicycle shop near me.” Including your geographic location in your target keywords can also help, such as “bicycle shop in Seattle, Washington.”
8. Make sure all pages are mobile-first
Turning your website into a mobile-first machine doesn’t take much effort, but it pays excellent dividends. Now that more people search for content on mobile devices than on laptops and desktops, you can’t afford to ignore smaller gadgets.
Ideally, your website should look beautiful on any size device. Make sure images and font sizes don’t exceed a smartphone’s screen size because you’ll alienate visitors from those gadgets.
Responsive design and Accelerated Mobile Pages (AMP) can both improve the mobile experience for your visitors.
9. Collect feedback from your target audience
When your site is live (or even during staging), start collecting feedback from your end-users.
Even with the best web designers or QA teams, some bugs will fall through the cracks. That’s when you need more testers—your website visitors.
Even if they find a problem on their own, they won’t say anything unless you make it easy for them.
Install a feedback widget or a simple form so users can:
- Let you know how they feel about your redesign
- Spot usability issues
- Share their overall experience
- Point out anything else that might be wrong with your site
Website Redesign Examples to Inspire You
It helps to look at some examples of website redesigns so you know what to expect. I’m going to share two examples — one of my own that’s fairly subtle and another example that’s extremely complex.
First, I’ll show you how I’ve redesigned NeilPatel.com. Back in 2015, the homepage looked like this:
As you can see, the homepage is focused on my webinar, which I was heavily promoting at the time. Since then, though, my focus has changed, so I’ve redesigned the homepage to concentrate on collecting new leads.
I haven’t changed my color scheme or my font choices. For the most part, the site still has the same feel.
However, the previous design was no longer compatible with my marketing strategy, so it had to change.
You should know, though, that I’ve done major overhauls on my website’s design before. Here’s what the homepage looked like in 2013:
You can see a similarly large change in the overall design and feel on Problogger. It’s a website helmed by Darren Rowse that provides massive value to content marketers.
Just a couple years ago, it looked like this:
It’s not a bad design, but Darren has redesigned it to look more modern and to focus on the direction in which he’s taken the Problogger business:
There’s stronger contrast, and a clear value proposition above the fold.
You’ll notice that the logo has been altered, but only slightly. It’s still recognizable to people who are familiar with the older logo, but it’s been revamped to match the new website’s design scheme.
Conclusion
Redesigning a website can boost conversions and sales when done correctly.
Start with data. What do you know about your current trends in web traffic, conversion rates, bounce rates, time on page, and other metrics? Apply what you know to the new design.
Don’t forget about research. Knowing what your competitors are doing can help you design a more effective site that surprises and delights your customers. Using wireframes and mockups, get an idea for what your new site will look like, then begin building it piece by piece.
While an increase in revenue is the end goal of any website redesign, improving the user experience and flow through your site is certainly a bonus!
