Results: Which Hero Image Won On Desktop, But Lost On Mobile?

Hero image: brunette model with hair extensions

Click here to enlarge

Hero image: blonde model before and after hair extensions

Click here to enlarge

Which Hero Image Won On Desktop, But Lost On Mobile?

Loading ... Loading ...

Difference Between Versions:

Version A: Hero image showcasing a brunette model with hair extensions
Version B: 
Hero image showing a blonde model before and after affixing hair extensions


Key Performance Indicator (KPI): 

Clickthrough rate (CTR) and Revenue Per Visitor (RPV)

Test Goal:

Increase the number of people going through the sales funnel to purchase hair extensions

Traffic Source: 

All – Direct, search, referral, organic, paid, affiliate, email list, and social: segmented by desktop and mobile

Sign-up now to get free, gamified A/B tests and more helpful content delivered to you each week.

Become a Better Digital Marketer

Get full access to all A/B tests, plus helpful articles, interviews, and resources to optimize your digital marketing success. Become a Pro Member

Get Your A/B Test Featured!

Submit your A/B test and see it showcased on the site. You'll get a great case study write-up, your logo prominently featured, linkbacks to your site, and social media promo, giving you with valuable, free brand exposure. Submit Your Study
This week’s Featured Test is brought to you by:

Test Run By

Fuel Made

Test Run For

Luxy Hair

Test Run On

Visual Website Optimizer (VWO)

WINNING VERSION

B

Poll Results - The Best Guesses:

Which Hero Image Won On Desktop, But Lost On Mobile?

  • Version B
  • Version A
Loading ... Loading ...

Test Details:

Luxy Hair, a high-quality hair extensions e-tailer, teamed up with Fuel Made, a Shopify web design and development agency, to conduct this “hair-o” image test.


Background:

The goal was to determine if changing the hero image — from a person with long, flowing hair extensions, to a before/after picture, showing the transformative effect of the hair extensions — would increase the number of shoppers clicking into the sales funnel, ultimately resulting in more product purchases.


Hypothesis:

The team suspected showing the before/after image would help shoppers’ visualize the transformative effect of the hair extensions, increasing product interest.

However, the team was unsure if this image would appear too crowded on a small mobile screen, potentially diminishing conversions.


Test Set-Up:

To test which hero image converted better, over 23 thousand visitors where shown either the brunette or blonde hero image. Traffic was split 50/50 across both versions. Traffic was also equally split across desktop and mobile devices.

The test ran on Visual Website Optimizer for two weeks.

During this time, shoppers were directed to a hero image either featuring the brunette model with beautiful, flowing extensions, which looked like this:

Or, the version featuring a blonde model with straight hair before affixing the extensions and beautiful, rolling curls after adding the extensions. The image looked like this:

Clickthrough rate (CTR) and Revenue Per Visitor (RPV) were tracked across both versions, and assessed on both desktop and mobile devices.


The Real-Life Result:

Winner: Version B – the before/after view of the blonde model — increased clicks on the “Shop Hair Extensions” Call To Action (CTA) by 7.93%.

With more shoppers entering into the sales funnel, revenue per visitor increased a strong 17.61%, compared to the control.

However, these results were only for desktop.

It’s really important to note, the trend did not hold true for mobile traffic. For mobile viewers, the more crowded before/after image actually decreased clicks on the CTA by -0.67%, resulting in a dramatic -27.69% drop in overall revenue.

So, if you guessed version A, you’re also sort of right. . . because Version A worked best on mobile.


Analysis:

What works best on one device, for one set of viewers, doesn’t always transfer across devices, or traffic channels.

This finding is key to remember when designing and testing ways to optimize your site.

While one image may look great on a large desktop screen, it may not scale well on a smaller mobile device.

In this test, the before/after view formatted nicely on larger, desktop screens.

Desktop view :

But, appeared somewhat crowded on smaller mobile screens.

Mobile view:

And, therefore, lost on mobile. Although the image was the same across both devices, subtle differences in how much hair was viewable likely affected conversions.

In contrast, you can see, the version with the brunette model rendered well across both desktop and mobile devices. Nothing was cut-off in the image.

Desktop view:

Mobile view: 

Even though it didn’t win on desktop, it didn’t under perform on mobile.

The team, therefore, decided to use the brunette image for the mobile view and the blonde image for desktop.

Using different images for your desktop and mobile sites may be a valuable practice. Image psychology research confirms small changes can make an enormous difference on how an image is perceived. Just slight alternations in expression and posture, for example, can influence whether a model is seen as attractive, approachable, or helpful.

Across devices, image scaling is also critical – especially with your hero image.

Your hero image is the first and most prominent thing visitors see when landing on your site. It sets the tone of your online presence. And, visitors form expectations immediately upon seeing it. In fact, some research shows viewers draw conclusions about your site in just 40 milliseconds!

So, you need to effectively manage your online image. Literally.

To do so, marketing researcher, Nick Kolenda, argues you need to think about image zoom-in levels. He suggests that zoomed out views are best when presenting the “big picture,” or when the person needs to make a decision in the future.

In contrast, zoomed in views are best when the person needs to focus and gather enough details to make an immediate decision.

In Luxy’s case, the more zoomed out desktop view likely worked best because the purchase decision wasn’t imminent. It was several steps deeper within the funnel.

Since shoppers had just landed on the homepage, they only needed to assess “the big picture” and decide if they were interested in learning more about the product.

These case study results add to Kolenda’s research, showing screen size and device type also impact how well a zoomed-in image converts.


Ultimate Takeaway & Immediate Application:

  1. Choose your images wisely – and always test them. Not just on one platform, but also across devices and traffic segments. What works well on one device with one traffic source might not translate to viewers on a smaller mobile screen.
  1. Small differences can make a big difference. Minuet differences in image views can have a huge impact on our assessment of the featured product and our decision to convert. Always think about the subtleties when selecting your site images.
  1. Weigh in on the scale. Ensure your images scale properly across device types and are presented at an optimal zoom-in level. An optimally sized and zoomed-in hero image may mean the difference between viewers entering your conversion funnel or abandoning your site.

Want full access to more, helpful case studies like this one?
Unlock Pro Membership Access

Poll Results - The Best Guesses:

Which Hero Image Won On Desktop, But Lost On Mobile?

  • Version B
  • Version A
Loading ... Loading ...

Sign-up now to get free, gamified A/B tests and more helpful content delivered to you each week.

Become a Better Digital Marketer

Get full access to all A/B tests, plus helpful articles, interviews, and resources to optimize your digital marketing success. Become a Pro Member

Test Run By

Fuel Made

Test Run For

Luxy Hair

Test Run On

Visual Website Optimizer (VWO)