Image Swap Using the Visual Editor

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.

Image Swap Using the Visual Editor - PM Clothing Co

Your marketing department thinks that the following image will work better.

Image Swap Using the Visual Editor - Girl in Flower Field

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 NewA/B Campaign.

Image Swap Using the Visual Editor - Step 1 New Campaign

Step 2 – Specify the Campaign Name, Hypothesis, and Preview URL

To specify the Campaign Name, Hypothesis, and Preview URL:

  1. Name the Campaign More Engaging Hero - VE.
  2. 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.

    Image Swap Using the Visual Editor - Step 2 More Engaging Hero

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.

  1. On the right side of the Variation area, select Visual Editor from the Select Edit Mode drop-down, as shown in the following image.

Image Swap Using the Visual Editor - Step 3 Variations

2. When you make this selection, the page changes to display tools for accessing the Visual Editor. Click Launch the Visual Editor.

Image Swap Using the Visual Editor - Step 3 Variations II

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.

Image Swap Using the Visual Editor - Step 3 Edit Image


4. Click Browse to select a new hero image.

Image Swap Using the Visual Editor - Step 3 Edit Image II

5. Select the new image to test and click Apply.

Image Swap Using the Visual Editor - Step 3 Edit Image III

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.

Image Swap Using the Visual Editor - Step 3 Edit Style

 

8. To name the Variation Group, select Variation Group 1, then Rename.

Image Swap Using the Visual Editor - Step 3 Selvedge

9. A small dialog opens allowing you to type the new name. Type the new name and click Apply.

Image Swap Using the Visual Editor - Step 3 Rename Variation Group

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.

Image Swap Using the Visual Editor - Step 4 Metrics

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.

Image Swap Using the Visual Editor - Step 5 Audiences

Step 6 – Save the Campaign

  1. To save the Campaign, click Save.

    Image Swap Using the Visual Editor - Step 6 Save

Step 7 – QA the Campaign

To preview the Variation, click the Preview icon at the far right side of the page.

Image Swap Using the Visual Editor - Step 7 Variations

Previewing displays the Variation for the A/B test with the new hero image.

Image Swap Using the Visual Editor - Step 7 PM Clothing Co

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:

Data starts to appear in the Campaign about 45 minutes to 2 hours after the Campaign is made active.
  1. Open the Campaign again: select BuildCampaignsCampaign List, then select the Campaign.
  2. In the Status field, select Active - Running.

    Image Swap Using the Visual Editor - Step 8 Status

  3. 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).

Image Swap Using the Visual Editor - Step 9 Performance Matrix

A/B Campaign Conclusion: Your new hero image encouraged more users to click through to the Category page.