Navigate back to the homepage

How to perform an A/B test in a live website?

Costa Alexoglou
June 25th, 2020 · 2 min read

Streamlining A/B testing - From 2 weeks to 2 minutes

This example is going to help you perform A/B tests in live websites and we are going to use two Chrome extensions.

  1. VisualEyes Chrome Extension to capture our screenshots and analyse them directly
  2. VisBug to modify any live website real-time and without any code skills

After you install both of them let’s get started ⚡️

(If you wish to see a video version of this post jump to the end)

What are we testing?

We are going to test Spotify’s main CTA in their US website. The design team has a crucial decision to make, will the Green or the Purple button convert better?

They can A/B test the two proposed colours with real traffic, over the course of two weeks, or speed up the process with AI Visual testing using VisualEyes.

Step 1 - Control Version Analysis

To test the control version (also known as the original version), all we need to do is the following.

  1. Click the VisualEyes Plugin
  2. Select “Visible part of screen”
  3. Click “Analyze”
  4. (Optional) If you wish you can link it with a Project
  5. Click “Continue”

When the analysis is finished, don’t rush and go to the dashboard, we need to test our alternative design.

Designing and testing a variation

We tested the control version and now we are ready to test our alternative. This is going to be a little tougher than the first test, but it’s going to be fun, I promise.

Remember then VisBug extension you installed in the first step? Go and click it. This should activate a toolbar inside the website like the one attached below.

Old Attention Map
This toolbar should appear after clicking the VisBug extension.

Now select the “GET PREMIUM” button and then click on the circle button with a bucket icon. This will let you modify the background colour. Pick any colour you like, I chose the Purple one.

Old Attention Map
After selecting the desired button, click the button at the bottom left with the bucket icon. This will open a colour palette to choose your desired colour.

Finish modifying of the live website, click again VisBug extension icon to close the toolbar and repeat the process from the previous step.

Making a data driven design decision

Now that we have our two variation analysed we can make a decision. I used the Areas of Interest to calculate the Attention each button is going to receive.

Old Attention Map
The Control's version Call to Action is by far more attention grabbing than the purple variation.

And we have a clear winner 🎉 This is how you can make rapid A/B testings in live websites. Of course you can use alternatives of VisBug, and we would love to see you experimenting. If you have any suggestions feel free to reach us at info@loceye.io .

Video Example 🎬

More articles from VisualEyes

Post-mortem of Uber's landing page redesign

For many websites, especially e-commerce and landing pages, call to action elements are a key to sales, traffic, and success. The call to…

June 25th, 2020 · 1 min read

Which ad creative will generate more leads?

A/B testing a banner design in a production environment is not a quick process. Days or weeks can pass before reaching a point of…

June 25th, 2020 · 1 min read
© 2019–2020 VisualEyes
Link to $https://www.visualeyes.design/?ref=blog-footerLink to $https://twitter.com/visualeyeshq?lang=enLink to $https://www.instagram.com/visualeyes_hq/?hl=enLink to $https://dribbble.com/VisualEyesHQ