This example is going to help you perform A/B tests in live websites and we are going to use two Chrome extensions.
- VisualEyes Chrome Extension to capture our screenshots and analyse them directly
- 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
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.
- Click the VisualEyes Plugin
- Select “Visible part of screen”
- Click “Analyze”
- (Optional) If you wish you can link it with a Project
- 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.
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
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.
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 🎬
