We've created both a video and some step-by-step instructions to help you learn how to swap an image on one of your web pages using SiteSpect's Visual Editor.
This training video helps you learn how to build an image swap Campaign.
Image Swap Using the Visual Editor – Step-by-Step Instructions
Your marketing department would like to test a new hero image that they believe will be more engaging and will result in more users clicking the Buy Now button. The following image shows the current PM Clothing.CO home page.
Your marketing department thinks that the following image will work better.
Step 1 – Create a New Campaign
For this simple test, you’ll use the Campaign Builder. You can create most types of A/B tests using this simple, single-page form. To start creating the Campaign, select New, A/B Campaign.
Step 2 – Specify the Campaign Name, Hypothesis, and Preview URL
To specify the Campaign Name, Hypothesis, and Preview URL:
- Name the Campaign More Engaging Hero - VE.
Specify the following Hypothesis for the test: "Visitors are more likely to click Buy Now on the updated image." The Hypothesis helps others understand the why you designed the Campaign as you did and helps when it comes time for Campaign analytics.
Step 3 – Create a Variation
In this step, use SiteSpect’s Visual Editor to change the hero image to the one you’d like to test.
- On the right side of the Variation area, select Visual Editor from the Select Edit Mode drop-down, as shown in the following image.
3. In the Visual Editor, you want to change the background image. To do so, right-click on the large image and select Edit Image from the pop-up menu.
4. Click Browse to select a new hero image.
5. Select the new image to test and click Apply.
6. You also want to change the formatting of the smaller text. In the Visual Editor, right-click on the second-level message text and select Edit and then Style.
7. Change the Font Size to 18px, the Background Color to darkviolet, and the Color to White. When you are finished, click Save.
8. To name the Variation Group, select Variation Group 1, then Rename.
9. A small dialog opens allowing you to type the new name. Type the new name and click Apply.
10. Back in the main Visual Editor window, verify the change to the hero image and text style and click Save in the upper right corner. Click Exit to return to the Campaign editor.
Step 4 – Select Metrics and a Key Performance Indicator
Drag and drop the Metrics that help you understand which Variation performed the best. The Key Performance Indicator (KPI) is the most important Metric for the A/B Campaign.
For this Campaign, you want to see if the new image increases the number of visitors who land on the Category Page, so drag and drop the Category Page Metric to the KPI area.
Step 5 – Select an Audience
For this test, you want to include only visitors who are using a tablet. Drag and drop the Device: Tablet Audience into the Include area.
Step 6 – Save the Campaign
Step 7 – QA the Campaign
To preview the Variation, click the Preview icon at the far right side of the page.
Previewing displays the Variation for the A/B test with the new hero image.
At the bottom of the page, the Preview Diagnostics panel displays the Variation changes. Click the Buy Now button to display the Category Page Metric in this area.
Step 8 – Set the Campaign to Active – Running
When you first create a Campaign, it is in Review. After QA is complete, you can change the Status to Active – Running, which turns the Campaign on and allows visitors to be assigned to either the Control or the Variation. To change the Status of the Campaign:
- Open the Campaign again: select Build, Campaigns, Campaign List, then select the Campaign.
In the Status field, select Active - Running.
- Click Save at the bottom of the page.
Step 9 – Results
The A/B Campaign has been running for two weeks now, and you’re ready to look at the results. The Performance Matrix shows comparisons of Metrics between the Control and Variation hero image.
In the Metrics section, you can see a 60.92% lift in views (Totals) of the Category Page from 33.85% more visits (Uniques) than in the Control. Both comparisons are reporting at full confidence (99.99% Sig).
A/B Campaign Conclusion: Your new hero image encouraged more users to click through to the Category page.