Shopify Experts

How Luxy Hair used their hero image to increase revenue per visitor by 17.6%

  1. Their Story

    Luscious locks for the win

    Luxy Hair grew out of the desire to provide brides with long, luscious locks for their special day. Now, by extension (pun intended) Luxy Hair serves ladies across the world with affordable hair extensions that can be worn from time to time.

  2. Their Challenge

    Finding the perfect image

    Luxy Hair wanted a homepage banner (i.e. hero image) that showcased how their hair extensions enhanced a woman's appearance, but they also wanted to ensure the image encouraged visitors to make a purchase.

  3. Their Solution

    Highlighting the change

    To find out if the banner image even mattered, Luxy Hair tested two different images to determine which one was the stronger performer. 

Keys to Success

First Impressions Matter

First impressions matter - just ask any merchant in the world of ecommerce.

It’s been proven that 55% of visitors spend fewer than 15 seconds on a website. This data highlights just how important the first few moments are to get a visitor to take a peek into your store.

With that in mind, there are many aspects to a website that engage readers. The most obvious? Images!

Compelling photography is essential to grabbing hold of your reader’s attention, especially within those first few moments. So it’s only natural that the hero image (otherwise known as the banner image - the prominent photo displayed front and center on your page, and the first photo your visitors sees!) carries a lot of weight in the minds of your visitors.

It sets the visual tone for your store. It creates an impression. It showcases your products or services to your visitors.

Not only that, but it’s the first step (and a key component!) in placing visitors into the sales funnel.

The Ultimate new headline

Knowing the important role imagery plays on their homepage, Luxy Hair decided to test two hero images, on both desktop and mobile, to determine if their use of photos had a direct impact on their bottom line.

Both images highlighted the hair extensions, but did so in very different ways.

The original image features a photo of a brunette model with beautiful, flowing hair extensions - a simple preview of the final product.

The second image features a Before and After photo - a blonde model with straight hair before adding the extensions, and then long, full, rolling curls once the extensions were clipped in.

To test which image converted better, more than 23,000 visitors were shown either the brunette or the Before and After blonde image. Traffic was split 50/50 across both versions - and also across desktop and mobile devices.

The test ran on Visual Website Optimizer for two weeks.

/

Two is better than one... but only on desktop

It was suspected the visuals of the Before and After photo would perform better, as visitors could instantly see the visual transformation of the hair extensions.

And we were right!

The Before and After photo increased clicks on the call-to-action button (Shop Hair Extensions) by 7.93%.

And since more visitors were engaging with the Before and After photo, revenue per visitor increased by a strong 17.61% (that’s compared to the original!).

But this only held true for desktop visitors. A surprising find, considering the same image appeared across both devices.

For mobile visitors, the Before and After image actually decreased clicks on the call-to-action, resulting in a dramatic 27.69% drop in overall revenue.

(can you see hear the shock in our voice?)

/

Scaling for Success

Although the Before and After photo is the same photo across both devices, it had to be scaled for the mobile version.

Since there were two people in the image, scaling proved to be difficult on mobile. Scaling this photo created a subtle difference in how much hair was visible to readers on a mobile device - which most likely affected conversions.

But why is that?

Well, image psychology research confirms small changes in an image can make an enormous difference on how it’s is perceived. For example, slight alterations in expression and posture can influence whether a model is seen as attractive, approachable or helpful.

Extending across Devices

Luxy Hair concluded that 

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.

Conclusion

Always think about mobile! One image that performs well on desktop may not work across all devices.