Over a million developers have joined DZone.

How A/B Testing Will Make You a Better Web Designer

The benefits of A/B testing in web design, as well as some tips to get started with designing your first tests.

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Designing a website is a massive undertaking for designers and business owners alike. But whether you are building a new website or redesigning an existing one, it’s crucial to base your decisions on data, rather than intuition. The decisions you make during the design process can determine creative and financial prosperity or failure — for both the client and the designer.

To avoid any potential pitfalls in your next build, you should start including A/B testing as a standardized service in your design packages. Conducting simple A/B tests on your clients’ websites will allow you to work out any shortcomings with regards to design, navigation, and functionality before handing over the reins. That way you’ll be able to offer them a final product that is not only visually stunning, but also optimized for conversion — and they’ll love you for it.

A/B Testing 101

A/B testing (also known as split testing) allows you to compare two variations of a design element on a website, with the purpose of identifying which element is most effective at accomplishing a specific objective.

In an A/B test, visitors are randomly divided into two segments as they enter a site: half are placed in “segment A”, while the other half go into “segment B”. Each segment is then shown a variation of a specific design element of your choice — for example, a landing page, store theme, call-to-action button, or checkout flow.

Ab Testing for Web Design - Multiple Landing Pages

By testing two variations against each other in real-time with real users, you are able to collect meaningful data to determine how each version of an element influences the behaviour of your visitors. In turn, this gives you the insight to create a design that will yield the best results for your client’s online business.  

Essentially, A/B testing allows you to design the best website possible for every single project.

Why Web Designers Should A/B Test

Creating the best website possible should be reason enough for you to start offering A/B testing as a standard service in your design projects. But if you still aren’t convinced, here are a few other benefits you can expect to see:

1. Increased revenue — By including A/B testing as a service you offer as a freelancer, you will be able to bring in more revenue on projects. You can either include it as a standardized service within your web design packages, or you can leverage the benefit of website optimization as an upsell feature. Your clients are spending a decent sum to have their site built professionally — use A/B testing as a post-launch service to make smart design changes that will help them get the best bang for their buck (and earn a few more yourself too).

2. Reduced client disputes — When it comes to making decisions about the design of a website, everyone in the room seems to have an opinion on what the site should look like — especially the client who’s paying for it. Luckily, A/B testing gives you concrete data to guide decision-making and resolve unnecessary debates without offending the client.

3. Satisfied clients — It’s easy to focus all our energy into the visual design of a website and overlook its functional purpose. While most clients do want a beautiful looking final product, every client is more concerned with having a site that converts. Running A/B tests shows your client that you genuinely care about their business’s online goals and are willing to do whatever it takes to make sure they’re accomplished.

How to Design a Simple A/B Test

If you’ve never run a web optimization experiment before, A/B testing can appear pretty daunting at first. But don’t worry, creating a simple A/B test is, well, pretty simple. Below I’ll outline a strategic method you can start using to run your first A/B tests.

Define Your Objective

Before you start testing anything, you need to understand the purpose of your website. Understanding the purpose of a website allows you to identify what success means for your client in terms of quantifiable metrics. These metrics, known as conversions, represent the desired action you want a visitor to take on your site. By defining your objective and success metrics early on, you are setting up the framework for which your A/B testing will operate within.

Your conversion metric will vary based on the type of website you are designing. Here’s a table that outlines some common conversion metrics for various websites types:

ab testing metrics for web design

Identify Bottlenecks

For your tests to have the greatest results, you will need to identify the areas of your funnel where users are losing momentum or dropping off in their journey towards conversion. These barriers in user flow are known as bottlenecks. It’s these bottlenecks that negatively influence the performance of your website and where you’ll want to run your A/B tests.

Ab Testing for web design Bottlenecks

If you have Google Analytics set up on your client’s store, its built-in conversion tracking can provide a relatively easy way to identify potential bottlenecks in your user experience. While setting up your conversion goals in the analytics admin, simply create a conversion funnel by defining the series of events or pages a user must interact with on their way to conversion.

A simple example of a conversion funnel commonly  seen on ecommerce sites would be: “add to cart,” to “view cart,” to “checkout,” to “payment method,” and finally “order confirmation.” Here’s agreat guide to get you started with conversion tracking on Analytics and another for setting up moreadvanced funnel conversion tracking.

Once your conversion goals and funnels are set up, you’re able to identify bottlenecks with the “Goal Flow” report found in the “Goals” section of Google Analytics. By highlighting the pages and events that cause the most drop-offs and exits, this report can help you focus your efforts on the areas that will benefit from testing the most.

Create a Hypothesis

Once you’ve established your objectives and identified your bottlenecks, you should create a hypothesis with regards to how you believe your site changes will alter visitors behaviour. This makes your test more valuable because it adds a layer of purpose to the process and ensures you stay on track throughout the implementation.

For example, let’s say your client’s ultimate objective is to decrease their website’s cart abandon rate. You’ve done your research and identified that the bottleneck influencing the existing rate is the “delivery information” page that appears after the “billing information page” and before the “confirmation” page. In this case, your hypothesis could look like:

“If we shorten our checkout flow by consolidating the billing and delivery information pages into a single page, then our overall cart abandon rates will decrease.”

If you attempt to run a test without creating a hypothesis, you will still gather valuable data about your visitors. Unfortunately, you will miss a deeper level of analysis and validation as to why the results appear the way they do. Even if your test fails, you are still able to draw conclusions from your experiment. The beauty of experimentation is that you’ll be able to scrap any idea that doesn’t work before implementing it to the entire site.

Design Some Variants

Before you can start implementing your experiment, you’ll need to create variants for the particular design element you are testing. Your original version of the element will act as the control while your new version would be a variation of that control.

Web Design Variants for AB Testing

In order to develop the most accurate and unbiased A/B test, make sure only one aspect of your control variant is changed in the new version. For example, you can test the colour of a call-to-action button (as seen above) or its position on the webpage, but not both simultaneously. Reducing your tests to a single variant change ensures that you can confidently attribute any change in behaviour to the design change you made in your variant.

Start Testing

With your bottlenecks identified and your design variants built, you are almost ready to start running your A/B test. To ensure your test provides the most accurate results, you’ll want to ensure the following two things occur during implementation:

1. Display your variant and control elements simultaneously to a randomly selected group of site visitors.

2. Run your test long enough so that it is shown to the largest sample size possible.

Following these two guidelines will help guarantee the experiment provides the most statistically significant results possible. That way, you can rest assured that the data you’re using as the basis for your final design decisions is reliable and accurate.

One of the easiest ways for a beginner to start implementing an A/B test on their site, regardless of whether or not it is on Shopify, is by using an A/B experimentation tool. There are various tools out there that you can use to perform A/B tests on your website, but I’d suggest starting with Optimizely,unbounce, or Google Analytics Content Experiments.

And if you’re looking for some extra resources to get started, check out these comprehensive guides:

This article originally appeared at the Shopify blog by Simon Heaton.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

web design,ab testing,testing,web dev

Published at DZone with permission of Courtney Symons, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}