Testing and Optimizing Your Web Design for Conversions

By Susan Rust

Beautifully designed websites can surely impress, but do they convert? Does a clean and informative page increase the possibility of online sales for a company? Well it certainly doesn’t hurt, but the real question is if it’s converting at the highest rate possible. How do you know if your site’s current design isn’t limiting your conversions if you haven’t tested it against others?

Web marketers and SEO experts alike should start seeing design as a conversion rate optimization tool if they’re not yet. Just like running an AdWords campaign, marketers can test different variations and analyze the results. Your first design will never be the best option. Through A/B and multivariate testing as well as examining user behavior, web marketers can increase the likelihood of conversions on a website and settle on a design that best suits the business. Let’s look at how this can be done.

Creating Different Designs to Test

You might be surprised to learn how much a small change to text, the location of a button or even the color of a header image can influence goal conversions. Small changes to a page can make a big difference but before you can test different elements, you need to have a basic structure defined. A great way to find a starting place is to adhere to Phoebe’s 9 Must Have’s for User-Friendly Web Design from last week. Using her guidelines like the proper utilization of white space and focal areas, you can create a layout that will serve as the control for your testing.

9 Must Haves for User Friendly Web Design

Once you have a design ready to go (or you’re ready to experiment with your existing site design), it’s time to run tests of different versions. It’s important to understand why we’re doing this though. You may think you know your site’s users in and out, but without enough data, you can’t be sure. Running these tests will allow you to see where people clicked, what text they preferred and lots of other key information. Often times these tests are counter-intuitive and you may learn something you hadn’t even thought of before.

For example, what if you find out that your users never scroll down on your page but that’s where your “Buy Now” button is located? That would be a great piece of information to take advantage of! Just moving that button up could increase sales in a big way.

A/B Testing

When it is time to trial designs, the first action item is A/B testing. Essentially just displaying different designs simultaneously, A/B testing is a science experiment in many aspects. You have a Version A and Version B, with one of those often being the control. If you test more than two variations, you can always compare data to Version A to see if it was more or less effective.

There are some key elements that need to happen in order to make this a true test:

  • Run all versions at the same time. Since user behavior, search volume and other factors can change based on the time of day, week or month, all designs should be run simultaneously. A great tool to get this done is Google’s Content Experiments, which is built in to Analytics.

  • Allow enough time for the test to produce an accurate representation of your target users. If you only test three versions for one day, you may only be seeing behavior for Wednesdays, which could differ from the weekends.
  • Be sure to show repeat visitors the same design. Nobody likes to refresh a page only to find a completely different layout. Don’t confuse your users.
  • Run multiple A/B tests. One test run alone could be an abnormality and only over the course of multiple tests will you start to see a confident pattern.

Minding those 4 rules, let’s look at an example that produced real results. Elastic Path Software makes digital solutions for ecommerce businesses and took on the Vancouver 2010 Olympics. They wanted to test the difference between a two-page checkout process and a single page checkout. Their thought was that users would prefer a single page and would be less likely to drop off compared to having two pages worth of forms to fill out.

Elastic Path A/B Test

They ran the A/B test using Google’s tool and directed 50% of users to the two-page form and the other 50% to the one-page checkout. The results were staggering. The single page checkout outperformed the other by 21.8%! That led to a large increase in sales and a way more optimized conversion process.

Multivariate Testing

Running through some A/B tests with your own site can be really beneficial, but what if you don’t have the ability to make completely different webpages? Well you can still run tests but limit it to just changing certain elements on a page. This is called Multivariate testing, where you only make small changes like the color of a button or the H1 of a homepage and it can produce beneficial results similar to an A/B test.

37signals, the developers of Basecamp and Highrise, decided to see how they could improve their conversion rate for free 30-day trial signups by running different headers and text directly beneath. Everything else on the page remained exactly the same. One headline read “Start a Highrise Account” and the other read “30-day Free Trial on All Accounts” with each having different support text.

37signals First Headline - Multivariate Testing

37signals Second Headline - Multivariate Testing

They ran the test for 4,000 pageviews and found that the second headline led to a 30% higher conversion rate than the other; A major improvement by just changing the text. Imagine doing this to your homepage and using this knowledge to optimize other site elements! You could increase conversions over your first design by more than 50% easily.

Behavioral Analysis

Deciding what to write and where to place a button is all up to you, but you may not be giving users an option they’d prefer. Consider your users’ behavior by using Analytics to see where they click the most, or where they go after reading your current test page. If you find that most users click on the calls to action in your left navigation 40% of the time but only 20% for the ones in the center, then try testing different versions of text with each having the call to action on the left. For example, maybe you run one page with an image that says “Learn More” in the upper left and another that says “Explore Today” in the same spot.

Tools to Get Started

If you’re tempted to start testing your site’s design (which means I’ve done my job!), then you’re going to want to take a look at some of these tools that can help you get the job done.

Google Content Experiments

Mentioned earlier in this post, Google offers this free tool in Analytics that helps you run different page URLs at the same time and displays them in an alternating fashion to your users. Data can be assessed for each page and compared right in their tool.

Visual Website Optimizer

Paras Chopra, an author for Smashing Magazine, created this paid tool that offers analytics for all kinds of testing, as well as the ability to run behavioral targeting and usability testing. Free trials are available.

Adobe’s Test&Target

Part of the Adobe Digital Marketing Suite, Test&Target is a great tool that allows you to design tests, create audience segments and analyze all within its own interface.


One of my favorite tools for testing, Unbounce lets you create landing pages in minutes using their templates. If you don’t want to make major site design changes yet but want to test your ideas, this is a great tool to use.

Hopefully you have all you need to start increasing conversions today. With a well-designed site that looks great and converts, you can be confident that you’ve set a firm foundation for the rest of your marketing efforts.

Please feel free to share any examples of tests you’ve run!

Share with Your Colleagues:
Susan Rust

By Susan Rust

I believe we hear and learn to say "no, it can't be done, that's too hard" rather than say "yes, let's do it now!" I have many mottos, mine for now is "Run fast, break things."