Designing Websites for Multivariate Testing, Key Considerations

If you are like most digital marketers, you are doing everything you can to optimize your website. One of the best ways to optimize your site is through multivariate testing, which is a technique that enables your visitors to tell you what's working on your site and what isn't. In a multivariate test, variations of your site's content are presented to visitors. As visitors navigate through the site, their behavior is tracked to determine how each content variation affects marketing goals such as conversion, registration, retention, average order value and so on.

While multivariate testing is an effective and proven technique for optimizing a site, some sites can be made easier to test than others. Technical factors such as the structure of the HTML come into play in determining how much preparation you will need to create a new multivariate test. But since testing is so valuable in terms of giving you insight into your visitors' preferences and behaviors, it's well worth considering how to make your site more readily testable. Doing so will yield a competitive advantage that makes it possible to out-test,out-learn, and out-optimize competitors.

There are a few times in your website's lifecycle that are ideal for considering how to make your site more testable. For example, building a brand-new site or redesigning your current one gives you the perfect opportunity to apply some best practices and make your site's elements easier to test. Another good time to prepare your site for multivariate testing is when you are adding major new content or functionality, where those new elements can be carefully introduced on the site so as to maximize their effectiveness without hindering existing site goals.

An interesting observation in the business of website design is the age-old struggle to balance a great-looking website versus a great-working website. Ideally, you want both, but the primary requirement should be a highly functional site that achieves your online marketing goals,instead of just a pretty website.

Here are four key considerations in preparing your site for multivariate testing success, which represent the fundamentals of making content testable:

1) Think About Your Mobile Visitors First

Mobile Web traffic is on the rise, and it's far easier to create a simple mobile site that works with all devices than to build a complex, rich desktop website that needs to be scaled down for mobile users. You can use mobile targeting to understand which devices are accessing your site and test which content variations work for them. 

For example, VEGAS.com ran a mobile A/B test that was able to quantify how mobile-optimized content influenced user behavior. In its tests, VEGAS.com decided to focus on key content that users were already accessing via mobile, namely the Homepage, top-level category pages such as hotels and shows, and the hotel room search tool. It turns out that VEGAS.com's mobile content outperformed regular non-mobile content across a number of key metrics. Some of the notable improvements that they achieved were:

- 22 percent reduction in bounce rate

- 16 percent increase in page views

- 14 percent increase in hotel searches

- Double-digit lift in conversion rate

2) Use Cascading Style Sheets (CSS)

CSS is a popular choice for Web design consistency and standardization, and that's great news for multivariate testing. Among other things, CSS centralizes site-wide styles such as text and headline specifications (font, style, color, size), page layout, and positioning of elements. So, when you make a CSS change , you change it in one place and the style is updated everywhere on the site. This makes it much easier to test multiple variations of site elements since you don't have to wrestle with changes in multiple places, which you would have to if you weren't using cascading style sheets. CSS is a key element in Responsive Web Design.

For example, a recent test for a B2B site revealed that by increasing the size of body text by 0.2 "em," the time-per-visit increased by 21 percent and pageviews-per-visit increased by 18 percent. This test was highly fruitful, and because only one line of CSS was changed, it was very easy to design and deploy.

3) Employ Text-Oriented Navigation

In the past, Web designers often relied on images or Flash for navigation text elements, particularly for sites that were built before 2004-2005, since browser technology was such that CSS couldn't be relied on for precise positioning or stylization of text and labels. Unfortunately, using images or Flash for navigation has the side effect of making it difficult to test alternate text labels-for example, to test "My Preferences" vs. "My Profile" vs. "My Settings." 

Since browsers have become much better at supporting CSS, there's little reason to rely on images or Flash for navigation. Text links are much easier to modify and control, and thus are much easier to test and optimize.

But why bother testing navigation? Because they're the milestones by which visitors step through your site to accomplish their tasks and reach your marketing goals. The best product, price, or promotion is no good if the visitor can't grasp which link to click on to find the information they need, or to get to the next step in your site's conversion process.

4) Use Responsive Web Design

Websites built from a Responsive Web Design perspective utilize an adaptable, fluid layout, media queries and flexible image sizes. That means a site's elements can be added, removed or rearranged without interrupting or breaking the presentation of the surrounding content. Besides being a good design principle that makes the site more accessible across varying screen sizes, Responsive Web Design also makes multivariate testing much easier because you can determine which layout is most effective.

For example, an online jewelry retailer wanted to determine how cross-sell items should be displayed relative to customer product reviews. Because the site had a responsive design, a multivariate test was easily constructed that optimized the arrangement of elements within the page, leading to a 16 percent increase in average order value. And remember that sometimes "less is more," meaning that visitors may prefer less cluttered pages as they browse your site. Responsive Web Design makes it possible to remove elements on your pages in order to determine the optimal amount of information that should be shown.

Another factor to consider about layout is that different types of visitors scan content in different ways. For example, older visitors who grew up without computers may view a page's sections in a different order than younger visitors who have been "wired" since birth. Similarly, behavioral differences exist based on gender, education level, and language spoken. 

And remember, the optimal layout is dependent on device. Analyses of consumer behavior have shown that mobile users have different needs and expectations than desktop users - environment, task-at-hand, and physical device constraints all differ, often dramatically. By making it easy to adjust page layout through the use of Responsive Web Design, you'll be able to test and optimize for the audience and device that is unique to your site.

Summary

Overall, you'll want your website to be modular, flexible, and easily testable. These are the qualities that make a site usable for your visitors and will support thorough optimization toward reaching your marketing goals. Multivariate testing is an advanced technique that enables you to increase revenue, turn browsers into buyers, and enhance your key performance indicators, whether that's conversion rate or average order value.

About the Author

Kim Ann King is an award-winning marketing executive and has been a B2B software marketer for more than two decades. She currently serves as the Chief Marketing Officer of Web and mobile optimization firm SiteSpect.