Which Hero Image Won on Desktop, But Lost on Mobile?
WhichTestWon's Analysis: (Click back to see versions A & B)
– Case Study –
The goal was to determine if changing the hero image would increase the number of shoppers clicking into the conversion funnel, ultimately resulting in higher sales.
The original/control hero image featured a single product view. It showed a brunette model with beautiful, flowing hair extensions:
Original/control hero image on desktop
The variant featured a blonde model with straight hair before affixing the extensions and long, full, rolling curls once the extensions were clipped in.
Variant with before/after view on desktop
To test which image converted better, more than 23,000 visitors were shown either the brunette or blonde image. Traffic was split 50/50 across both versions and across desktop and mobile devices.
The test ran on Visual Website Optimizer for two weeks.
The team suspected showing the before/after view would help shoppers’ visualize the transformative effect of the hair extensions, increasing product interest.
However, the team was unsure if the updated image would appear too crowded on a small mobile screen, potentially diminishing conversions.
Winner: Version B – the before/after view– 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 by a strong 17.61%, compared to the original.
However, these results only held true for desktop viewers.
Interestingly, results greatly differed with mobile traffic.
For mobile viewers, the crowded before/after image actually decreased clicks on the CTA by -0.67%, resulting in a dramatic -27.69% drop in overall revenue.
What works best on one device and for one set of viewers, doesn’t always transfer across devices, or traffic channels.
This is a key finding to remember when designing and testing ways to optimize your site.
While one image may be a perfect fit for a large desktop screen, it may not scale well on a smaller mobile device.
In this test, the winning before/after view formatted nicely on a larger, desktop screen, but appeared somewhat crowded on a smaller mobile screen.
View on desktop
View on mobile
Although the image remained consistent across both devices, scaling on the smaller screen created subtle differences in how much hair was viewable, likely affecting conversions.
Across devices, image scaling is critical – especially with your hero image. Your hero image is the first and most prominent visual visitors see when landing on your site. It sets the tone of your brand 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.
Image psychology research confirms small changes can make an enormous difference on how an image is perceived. For example, just slight alterations in expression and posture can influence whether a model is seen as attractive, approachable, or helpful.
When considering image perception, marketing researcher, Nick Kolenda, argues you need to think about image zoom levels. He suggests that zoomed-out views are best when presenting the “big picture,” or when a 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 desktop view that is zoomed-out likely worked best because the decision to purchase wasn’t imminent. Buying the hair extensions was several steps deeper within the sales 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 the research, suggesting screen size and device-type also impact how well a zoomed-in image converts.
- Choose your images wisely – and always test them. Not just on one platform, but also across multiple devices and traffic segments. What works well on one device with one traffic source might not translate to viewers on a smaller mobile screen.
- Small differences can make a big difference. Minute 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.
- Weigh in on the scale. Ensure your images scale properly across device types and are presented at an optimal zoom-in level. A strategically sized and zoomed-in hero image may mean the difference between viewers entering your conversion funnel or abandoning your site.
Tell Us Your Thoughts:
Why do you think the before/after desktop hero image outperformed the mobile version?
Let us know by tweeting @BEHAVEdotorg.
Got a great test you’d like to see featured on the next Test of the Week? Send it on in!