All Mimi wanted was long, thick, shiny hair for her wedding day.

After hours of research, frustration, disappointment and heartache, Mimi found out the hard way a market didn’t exist out there for thick, luscious hair extensions that were also affordable.

So she decided to create one herself. Soon after her big day, Luxy Hair was born.

Now a highly successful ecommerce store, Luxy Hair gives ladies across the world a confidence boost with their simple, affordable clip-in hair extensions. The company thrives on offering a product that creates a lasting impression, while making women feel beautiful.

Naturally, Luxy’s online images need to reflect this glowing confidence. 

First Impressions Matter

Photography plays a key role in the vitality of a website, especially when you consider that it only takes 50 milliseconds for a visitor to decide whether or not they want to leave a website (or stick around to take a peek).

The hero image (a.k.a that massive, prominent photo displayed on a homepage), is the first image visitors see and creates a strong impression. It showcases your products or service to the world, while setting the visual tone for your store.

Luxy had two hero photos they wanted to work with. Although both photos exposed their luscious hair extensions, they did so in very different ways. In order to discover which image encouraged visitors to click, Luxy ran an A/B test.

One... or two?

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

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

To test which image performed stronger, more than 23,000 visitors were shown either the brunette or the Before and After 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. 

And the winner is...

The results were in and... (drumroll please!) 

The Before and After photo increased clicks on the call-to-action (CTA) button by an impressive 7.93%!

But it doesn't stop there. Since more visitors were engaged with the Before and After photo (rather than the brunette model), revenue per visitor actually increased by a whopping 17.61%! 

The most interesting result though, is that this photo only resonated with desktop viewers. Mobile viewers didn't feel the same way.

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

(Yup, that big of a difference... images truly are important!).

Scaling for Success

Although the same photos are featured across both devices, they appear different on mobile devices. This is especially true for the Before and After photo. 

In the Before and After photo, mobile viewers couldn't see a small portion of her hair. And this tiny, subtle difference most likely affected conversions.

But why?

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

So although the Before and After image worked remarkably well on desktops, it failed to perform on mobile. 

Key Takeaways

Testing Luxy's hero image confirmed that images have a direct impact on their bottom line. The results also highlight the importance A/B testing has on maximizing conversion rate. Anything from headlines, landing pages, copy and CTAs should be tested to ensure your store is running to its fullest potential. 

To maximize conversions, Luxy now features the Before and After photo on their desktop version, while the single brunette model displays for mobile viewers. 

Here are a few other aspects to consider when thinking about images:

Choose them wisely – and always test

Test 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

Tiny differences in images can impact how your product or service is perceived (especially when scaling a photo for mobile). Always think about this when selecting 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 site!