Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
  1. Web Design
  2. Visual Website Optimizer

How to Simplify Split Testing With Visual Website Optimizer

Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

As designers, we're trained and compelled to put a focus on what we feel is most pleasing to the eye. We work hard to create the most stunning looking sites, bringing together everything we can draw from the branding and business goals of our clients or of our own operations.

However, the reality is that no matter how perfect a design looks, the only way to be absolutely sure it's achieving its goals is to get out there and crunch the numbers with some real world tests.

Q. Does the color you chose for the Download Free Trial button look amazing?

A. Yes, of course it does, because you're an amazing web designer.

Q. Does the color you chose for the Download Free Trial button actually compel people to download a free trial?

A. The truth is you have no way of knowing unless you create some alternative colored buttons and compare the results you get from real traffic.

Every site has a completely different audience. And no matter how much market research you do beforehand you can't possibly know the minds of every user. Until those real people start coming through and performing real actions, it's all just theory.

That's where Split Testing otherwise known as A/B Testing comes into play. The design phase of site production is the art, and the A/B Testing is the science.

How A/B Testing Used to Be

For any site that has to achieve a specific goal, which means any business site, A/B testing is as essential to the process as cross browser testing. Making sure a site achieves its objectives is just as much a part of creating a functional site as having all the CSS render correctly.

Despite this, in the past it was always a bit like the dental flossing of the web design world. You knew you ought to do it, but you always ended up slacking off because it was awkward and sometimes a little bit painful.

You had to install and configure complicated scripts, create multiple different versions of your sites stored at different URLs, and the whole process was cumbersome and tedious.

Like everything else in the web world however, A/B split testing tools are evolving and things that used to get relegated to the "too hard basket" are now in the "quick and easy basket."

We now have a new generation of A/B testing tools at our disposal that make sure every single site we create can be fully optimized in every way, helping us to design sites that not only look great but achieve all their objectives too.

How A/B Testing Is Today

One of the new generation of A/B testing tools is Visual Website Optimizer, or VWO, from the folks at Wingify. VWO does away with the old A/B testing methods of dealing with endless lines of code and hours of creating alternate versions of your site.

Instead, it's this simple:

1. JavaScript Snippet

Drop a little snippet of JavaScript into your site's head section.

2. Drag & Drop Alternate Site Versions

Use the Visual Website Optimizer drag & drop interface to create as many alternate versions of your site as you want.

3. Watch the Results

Watch traffic come through and use the automatically generated charts and heatmaps to see exactly which version of your site generates the best results.

This process completely takes out the guesswork and lets you determine with absolute certainty which variations of your designs generate the most leads and the most sales.

Small Changes, Big Differences

If you've never carried out A/B Testing before you might think that it takes complete site overhauls to make a difference in generating results. In actual fact, it's often very small changes that lead to the biggest differences.

A great place to get an idea of the little changes that can yield significant increases in revenue is VWO's case studies gallery.

The examples there show that improvements can come from something as simple as changing the color of a link from blue to red for a 50% increase on clickthroughs:

A: Beamax, blue link
B: Beamax, red link 50% more clickthroughs

Changing a font size from 15px to 20px and bolding for a 36.54% conversion increase:

A: Royal Discount, font size 15px and font weight normal
B: Royal Discount, font size 20px bolded, 36.54% increase in conversions

Or adding a couple of words to go from a 14.5% to 18.6% conversion rate:

A: Soocial, original with 14.5% conversion
B: Soocial, added "It's free" and increased to 18.6% conversion

Now let's put that in perspective a little bit.

The example you see above where text was bolded and increased in size led to a revenue increase of 10.21%. Even if the business' entire revenue for a year was just $100,000 (and I'm sure it's much more) that would mean a payoff of $10,210 for two minutes of tweaking, a worthy result in anyone's book.

Fast, No-Code Tweaks in VWO

You've seen above how even minor tweaks can net real results. Now let's take a look at how you can create tweaks like this using VWO.

You can follow along with these steps by registering for a 30 day free trial at VWO. This free trial gives you: 

  • All features in standard plans
  • 1000 visitor limit
  • Unlimited email tech support

After registering and entering some basic account details like your company name and URL you can go to the Installation Code tab in your admin area to grab your JavaScript integration snippet.

Copy the snippet and paste it in at the end of your site's head section and you're good to go.

You can verify that everything is in working order by entering your site's URL in the Smart Code Checker on the same page and clicking the Check button.

Create a New Campaign

Now that you have VWO integrated with your site you can setup a new campaign. Click the big + icon in the left menu, then select Website Campaigns.

You'll then be taken to a range of campaign types you can select from. For our purposes, select A/B Test.

In the next panel, enter the URL of the page you want to run A/B tests on.

You'll then be taken straight to your site in the Visual Website Optimizer (VWO), where you can start creating different versions of it to test.

To demonstrate, I've created a little newsletter signup page for people who love videos of cute puppies, because who doesn't, right?

From here, all you need to do is click on the element you want to change and you'll see a range of tools pop up that will allow you to make your alternate versions right inside VWO.

Watch These VWO Tweaks, Done in Seconds

Still shots of VWO alone won't do it justice, because you really need to watch it used live to see how quick it makes creating alternate site versions.

These are the same types of tweaks as in the examples we looked at earlier, where little changes generated big differences in results.

As I mentioned in the video, I was able to setup these tweaks just through a free trial account. To try out making these same types of changes for yourself, head over to VWO's site and get 30 days fully functional access for free.

Multivariate Testing and Report Types

As well as A/B testing, VWO also lets you create multivariate tests. Multivariate testing allows you to compare more than just two variations of a site, so you can think of it as being A/B/C/D..... testing.

The resulting reports that are generated from your tests come in a variety of shapes and formats. Amongst the selection of reports available, you'll get "at a glance" summaries tracking your conversions, revenue, traffic and so on:

You'll get comparative charts:

And one of my personal favorites, heatmaps to track where visitors are clicking:

Beyond Split Testing

While you may go to VWO for the split testing, you might also stay for all the other ways the toolset can be used and some of the additional perks on offer.

What the VWO gives you is a way of creating variations of your site without slowing it down or having to maintain different installations at different URLs. Split testing is one way you can put this to use, but you can also serve up versions specifically optimized for all kinds of different factors such as location, device type, operating system, browser, search terms and so on.

For example, you might use VWO's segment tracking system to discover that people on iPhones in New York coming via Facebook are the most responsive and yield the most conversions. You can then create a customized version of the site just for this segment, analyzing and tweaking it for usability and conversions until you get the most perfectly optimized variation possible.

Another aspect of membership that is, in my opinion, worth the price of admission unto itself is the "Idea Factory". Once you've tested the obvious things like headlines and button colors you might be wondering what you can do next to continue optimizing. At that point, you can hit the "Ideas" tab in VWO to get full details and guidance on over 400 extra ways you can continue to make improvements:

You'll also get access to a large and library of real world case studies so you can see exactly what worked to increase conversions and revenue for other sites. This type of thing can be pure gold when you apply what you discover to your own projects.

To put this in perspective, a few years back I recall seeing a person selling a compendium of just over 40 split testing case studies for $200, and they did so very successfully.

I started to count how many case studies were in the VWO idea factory- I stopped clicking the "Load More" button at the 120th entry.


I hope this has given you some insights into what A/B Testing can do for you and how VWO can help you carry it out. VWO has a whole stack of features, and you can read all about them on their website.

Or to jump straight in and start putting your sites to the test, get 30 days of creating variations and watching your results with the fully functional free trial.

Let's see how well your sites perform!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.