how to do a redesign the right way

Why Most Redesigns Fail (and How to Make Sure Yours Doesn’t)

Talia Wolf Conversion Optimization 1 Comment

Talia Wolf

Talia teaches businesses how to plan and execute conversion optimization programs. She runs thousands of AB tests using emotional targeting, real time data and consumer psychology to increase online revenues, engagements and sales.

Talia is a frequent keynote speaker at marketing conferences, teaching conversion optimization and growth on stages such as Google, Unbounce, MozCon, GMIC, CXL live, Search Love, Learn Inbound and many more.

She is the Co-founder & CMO at Banana Splash and was recently listed as one of the most influential voices in conversion optimization.

I’ve lost count of the amount of emails and phone calls I get that go somethin’ like this:

Them: “We recently did a redesign and conversions have plummeted, we have no idea why this is happening. Can you help?”

Me: “What was the redesign based on?”

Them: “Our designers created a new, beautiful, sleek, up to date and responsive site…”

Me: “Did you test it or elements of it before going live?”

Them: “Test it…..?”

We’ve all heard the horror stories of beautiful (costly) redesigns, causing a whole lot of damage for businesses, yet companies still do them all the time. In fact, just this week I spoke to two different large insurance brands and a bank who are experiencing this exact issue; a redesign gone wrong.


Why Most Redesigns Fail

Most redesigns are based on gut feelings, best practices someone read about, what “looks good”, new design trends or what corporate wants.

The thing about redesigns however, is that if they’re based on anything but profound research, detailed strategy and expermination, they’re most likely not going to produce the results you’re hoping for (which is a nice way of saying, they’ll probably completely fail).

Here’s why:

One of the most common sentences you’ll hear me say is; “best practices suck”.

In my line of work I’ve ran countless tests using all the best practices and common suggestions you can think of:

  • Reducing form fields
  • Moving the call to action button above the fold
  • Adding a pop up
  • Using a hero image pointing/looking at the call to action button

And all those good tips you can think of.

More times than not, these best practices didn’t work.

Some failed miserably.

Because, best practices have no place in optimization.

They’re not based on the specific behavior of your visitor, on your value proposition or on your audience, they’re just general ideas and things people have done in the past that worked for them.

Best practices or gut feelings don’t produce those huge increases in conversions you’re looking for, a measurable, step-by-step process does.

The same goes for your redesign.

When clients or students tell me they’re considering a redesign, the first thing I suggest is to stop everything and instead, start with optimizing their existing website. It’s not that I’m completely against re-designs, I know that sometimes there’s a need for them, but I also know what results for 99% of these redesigns look like, and they’re not good.

This is what most redesign processes look like:

  1. You redesign an entire website or funnel
  2. You go live with it
  3. Conversions start to plummet
  4. You have trouble identifying what caused the decline in conversions because so many changes were made, nothing was tested and you have no way to identify what went wrong.

Back in 2014 Marks and Spencers, one of the largest retailers in the UK launched their new redesign. After two years of planning, designing and spending a lot of money and other resources on it, the redesign resulted in an 8.1% drop in sales. 

The new design looked better, sure, but dozens of usability and performance issues caused a huge drop in sales. People were frustrated, unable to add items to their cart, find what they were looking for or even check out. This was a huge blow for the giant retailer.

So what does work? Is there a good way to do a redesign?

Yes, if you do the redesign each step at a time, test each change you make, analyze its results and then optimize again, it can be done. A step-by-step process reduces the risks, allows you to evaluate each change you make, understand its effect, learn from it and iterate again.

This kind of redesign process will give you the insights you need for larger changes and give you control over the outcomes.

That is my go-to strategy when clients say they need a redesign.

In our Facebook group discussion, Emanuel Da Costa, Founder of Effective Experiments said it really well:

“Redesigns as a single launch event must be avoided. The myth that a full redesign can solve your sales and conversion problems is a dangerous one.  A better way to look at it is evolutionary redesign where you test and iterate and repeat. The test and learn process informs your design and is much more reliable.”

Bottom line: If you’re going to do a redesign, you need a strategy and a process, so let’s map one out:


The 3-Step Process to An Informed, Successful Redesign

Step 1: Research

Though most companies forget this, the purpose of a redesign isn’t for them to look good, it’s to create a better experience for your visitors. A well designed flow will catch prospects’ attention, solve their problems and direct them towards the call to action that’s right for them.

To get started you’ll first need to conduct thurow research into identifying what needs to be optimized. Questions you should be asking yourself:

  • What is currently broken?
  • What isn’t working?
  • What do people have a hard time doing on your site?

This could be anything from a lack of clarity in your messaging, broken forms, an overwhelming design that confuses people and more. In this step your goal is to identify that friction using the following tools:

#1 User behavior analysis

Step 1: Google Analytics

GA will help you identify specific leaks in your funnel, broken links, problematic pages, technical issues like load time, engagement metrics and more. Using the information you find in GA, you’ll then want to set up heatmaps on those specific pages to see what exactly is happening on these pages.

Step 2: Heatmaps

Heatmaps work best when you know what you’re looking for, they allow you to see what people are currently doing on your problematics pages, how they behave, what they’re clicking on (or not clicking on), how much they scroll and the different actions they take on the page (dive deeper into how to use Heatmaps the right way here).

Step 3: User Testing

User testing is a great way to see how people interact with your site in real life. See how they react to certain elements on the page, buttons and text, see what confuses them, what they don’t understand, what questions they’re left with and what actions they have a hard time performing (check out this in-depth guide to doing user testing).

A quick example of this stage of the research would be:

You see in Google Analytics that your pricing page has a big drop in conversions, so you place a heatmap on the pricing page plus activate session recordings to see how people interact with your pricing page, then you do some user testing to observe people’s expressions, challenges and roadblocks while on the pricing page. This whole process will give you a clear understanding of what needs to be fixed on the pricing page.

#2 Messaging and content evaluation

After identifying people’s behavior on the site and getting a little more insight into the areas that need optimizing, it’s time to figure out what needs optimizing in terms of your messaging. While design is extremely important, your copy plays a huge part in your visitor’s decision-making process and your website’s experience. Design will not work without good, on-point copy. To assess your current messaging and content strategy you’ll want to take the following steps:

Step 1: Surveys

Surveys will help you understand your customers and prospects better, their pains, hesitations, concerns and what stage they are in the customer journey.

For example: Using an on-site survey last month we discovered that more than half of the prospects who visit our client’s website are solution-aware, meaning they are familiar with different solutions to their problem and are actively shopping around. Another quarter of the audience we discovered, are problem-aware, which means, they are likely feeling pain, but have not yet reached the conclusion that it needs to be resolved. This insight tells us exactly what content our client’s website needs to include, what we should focus on and what to highlight on the homepage:

customer survey example

Learn more about how to conduct effective surveys here.

Step 2: Interviews

Interviews are another great way of understanding your customers on a deeper level. A simple 15-20 call with as few as 5 clients/customers can help you better understand why people took action with you in the first place and what keeps them coming back. These insights are crucial for identifying what you want to say on your pages and getting great testimonials to supports those messages.

Step 3: Chat Logs

Review chat logs and customer support tickets to find common complaints, issues and problems people face. These insights may also help with your FAQ section, specific roadblocks you want to address from the get-go and more.

Once you’ve concluded the research phase, you’ll have a better idea of what you need to change on your site based on a proven research process and not gut feeling or because your competitor is doing it too.

Step 2: Planning

Now that you know what you want to optimize and how, it’s time to start planning these changes and make sure we’re making them correctly. It’s one thing deciding to change your entire website with your new findings, it’s another going live with them. To do that, we’ll need to first map out the best way to make these changes to reduce the risks and ensure we can track every change we make. The planning stage includes 3 important steps:

#1: Prioritization

By now you have a great list of pages you want to optimize, however we don’t want to make all the changes at once as that may give us a hard time tracking those changes and their effect. If our goal is not just a cosmetic change, we need to prioritize what change to make on the site and when.

I like to prioritize tests according to three parameters and score them from 1 to 5:

  1. Time: The amount of time it will take you to get this change live and see results. From planning to writing, designing, going live, testing and getting conclusive numbers, how long will this process take? The less time it takes, the higher the score it will get (5 being the best score – the least amount of time, 1 being the longest time)
  2. Resources: What resources will you need to make this change happen? For example, will you need an extra budget for it? Do you need the team’s help? A copywriter, designer, developer? These are all company resources we need to consider. The less resources you need, the higher the score.
  3. Impact: Ultimately what matters is the impact this change will have on your bottom line. The last thing you want to do is spend months on optimizing and redesigning an entire page just to discover that the increase in conversions has little to no effect at all. For example, you may want to immediately redesign the homepage BUT it you really look carefully you’ll notice that changing the homepage won’t have a huge increase on conversions as much as changing your offer pages or product pages for example. Grade each change you want to make according to the level of impact it can have on your ROI, 5 for those with highest impact, 1 for the lowest.

Once you’ve made this list, you’ll want to start with the pages and changes that have the highest points. Example:

Learn more about testing prioritization here.

A tip from our FB community:

I reached out to our Facebook group members and asked them how they approach redesigns. Wesley Bush suggested a great way to test run some of those changes you want to make:

“One of my favorite things to do during a redesign is vet the copy, images and colors through digital ads that retarget previous website visitors. By the end of the experiment, I have data to back up the winning approach and get buy-in to try something entirely new that is already proven to work.”

#2 Measurement

As we’ve discussed, we’re in the business of improving our ROI and increasing conversions, not making a beautiful site. What will determine if a change you made was successful? Make a list of all the KPIs and metrics you will be tracking for each page you optimize. This list will help keep you in check and  will give your team the insight they need when they’re looking at the process you’re going through, when they ask for updates and want to know what your changes are based on.

#3 Outlining

The last step before the actual design process is outlining all the pages you’re going to optimize, creating wireframes that outline every single change you’re going to make so it’s easy to follow and check items of the list.

The best way to do this is in an excel or Google sheets document. Simply add it to your prioritization sheet, and write down all the changes you’re going to make to this page and how you’re going to measure it.

Step #3: Build

Now that you have identified and prioritized all the changes you want and need to make, it’s time to start testing.

At this stage you’ll work on creating the new variations for the first page you’ll be optimizing. This is where you’ll write the actual copy, design the page and follow your hypothesis for a newly optimized experience.

Next, you’ll want to test that new variation. A/B testing this change is the best way to prove your hypothesis and reduce the risk of decreasing your conversions and not knowing why it happened.

The test will also validate if the rest of your hypotheses about your messaging, user experience and design are in the right direction. You’ll be testing the waters to see if people behave differently, how they react to this change and then, if it works well you can gradually start making similar changes to other pages. If it doesn’t work well, then you only have to stop the test and optimize that one page which isn’t performing as well as you would have liked it to. Analyse the results, adjust the variants and test again.

The best thing about testing is that you don’t need to guess, you can verify every change you make and support it with the numbers. You’ll be making evidence-based changes to your site and reduce the level of stress to a minimum.

As we like to say in our Facebook group: Eat, sleep, optimize, repeat.


What if I’ve already done the redesign?

Everything I wrote in this guide was directed to companies who are considering a redesign, but what if you’ve already gone ahead and started the redesign? What if your moments before launching the new design? If you’re at this stage I’d highly recommend putting together a presentation or document that will persuade people in your company to test each page you’re working on separately. Go back to step 2, prioritize according to time, impact and resources and create a roadmap for people in the company to follow. Explain how testing the redesign will give you greater control on the results and save the company time and money.

Present as much data as possible about the most important pages that need optimizing according to ROI and not just their look and feel.

You’re Up

Avoid redesigns that aren’t based on research and experimentation. The steps we mentioned today can save you a lot of time and energy. Instead of redesigning according to what you think will work, use a proven methodology, one that gives you a way to continuously improve and control the outcome. If you follow a step-by-step process, you’ll reduce the amount of stress and that guessing game you want to avoid.

Let me know in the comments: Have you ever done a redesign? Have any tips for making them successful?

Facebook Comments

comments

Powered by Facebook Comments

Comments 1

  1. Hey Talia,

    Thanks for your write up.

    I’m actively measuring some of the patterns you mentioned with the intent of forming a better understanding of which changes tend to work more so than not.

    Ex: For Fewer Form Fields
    https://goodui.org/fastforward/patterns/3/
    We have 6 out of 7 positive a/b tests.

    Ex: For Above The Fold Calls To Action
    https://goodui.org/fastforward/patterns/49/
    We have 4 out of 5 positive a/b tests.

    I think it makes a lot of sense to remember and calculate prior probabilities from past experiments (instead of being ignorant to past results). 🙂 Basing redesigns on high probability experiments, we’re finding to be effective.

    What draws me to reach out to you is that you have cases where these patterns failed miserably. Given that I’m 100% dedicated to publishing both winning and losing tests for given patterns (that’s the only way to get closer to truth), would you be willing to share those test results with me?

    Looking forward to hearing from you.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.