Navigate back to the homepage

ASOS Case Study: How can product images impact conversion rates?

Dimitris Raptis
November 28th, 2019 · 5 min read

Product images can play a critical role for every e-commerce company that seeks to increase its conversion rates and engagement.

ASOS is the undisputed champion of online fashion, boasting over 50,000 branded and own label product lines across womenswear, menswear, footwear, accessories, jewellery, and beauty.

Its online platform works by choosing the best fashion items from a variety of brands and grouping these items with the company’s products.

1 D ZxtadC2tQtLyNe9obdwQ 1024x586

Landing Page of Asos.com


Then, the optimization of ASOS’ platform (or any e-commerce company) is highly essential. Minor UI changes can taper the conversion funnel and cost millions in losses to the company.

. . .

Challenge

The numerous product images closely connect to the ASOS conversion rates.

MIT neuroscientists proved that the brain can identify images seen for as little as 13 milliseconds. This greatly illustrates the importance of optimizing product images!

Furthermore, an excellent visceral design makes us feel at least something, hopefully making us happy and ideally getting us excited. In his book _Designing for Emotion, _Aarron Walter explains that we know ourselves so well that we try to relate everything we see to ourselves.

We know ourselves so well that we try to relate everything we see to ourselves

Therefore, each product image (including both the product and the model) tells a unique story and waits for a user to relate to it. These images build a strong and lasting connection between the user and the brand.

1 SCdHHhcSDKdBvXe84bQdGQ 1024x689

Numerous options for any kind of product type.


Thus, our challenge is as simple as that:

Which product photo is the most engaging to optimize the customerbuying process?

1 LJHy bQPFPpeMxu5o1sKaQ 1024x518

The goal is to find out which product image increases the attention of the _ADD TO BAG_call to action button along with the product visibility itself.

The product under investigation is the following:

👗 Missguided Jersey shirt dress in white

. . .

Traditional Method

Usually, the process includes User Testing or A/B testing by sourcing people from an external tool like UseBerryUserFeel or UsabilityHub, or by gathering your unbiased colleagues’/friends’ feedback.

We’re going to focus on A/B testing because it’s an excellent way to measure user response to small tweaks. A/B testing provides clear, quantitative results when conducted successfully.

1 GyLlYqp3ifyQFCMUAYTK4g 1024x624

A/B testing infographic


However, there are two primary bottlenecks:

  • The amount of audience sourcing required.
  • The time it takes until the results are available.
. . .

New Method

Let me introduce you the successor of traditional A/B testing

The method is called predictive design:

Predictive design is a commonly used statistical technique to predict future behaviour. Predictive design solutions are a form of data-mining technology that works by analyzing historical and current data and generating a model to help predict future outcomes. In predictive design, data is collected, a statistical model is formulated, predictions are made, and the model is validated (or revised) as additional data becomes available.

Learn more about it here 👈

Do you like it so far?! I appreciate it 👏👏👏

. . .

Solution

We’re going to use a new predictive design tool called VisualEyes. The tool gets an image as input and generates an Attention Heatmap. It helps us understand the correlation between user attention and, in this case, the product image.

All we need is a prototyping tool like Sketch, AdobeXD or Figma and use the corresponding plugin. The tool gives us the following results:

  1. Attention heatmaps that depict where the users’ attention goes.
  2. The VisualEyes plugin allows the definition of a polygon Area of Interest (A.O.I.) inside your design that measures the average attention.

1 0DBoqSIRmqgjR28MpwQF w 1024x781

An example of AOI definition


Product

The choice of this product is not a random one. The absence of a brand and the placement of the model will help us generate some mind-blowing results.

1 UdQyIFOXjHSysoFnBeuJjA 1024x518

👗Missguided jersey shirt dress with back print in white


For each variation, we define the following three Areas of Interest (AOI) around:

  1. The Add to bag (red) call to action button
  2. The product’s additional information (green) section and
  3. The product (blue) itself
1 Zo1 mVyuZrezHZy2P5HAew 1024x518 1 euGjwWr9mypsaCEkAA2Unw 1024x518
1 JpEfbei4WK2Vfzxwz8PX3w 1024x518 1 rpKix 4K0ueqoB0wlEhCLw 1024x518

The Areas of Interest (AOI) of the 4 product image variations.

We use the VisualEyes plugin and after 19 seconds, the results are ready! ⏰

1  ZKFpv5G1VptHT3zhAVHnA 1024x864

The winner of our A/B/C/D testing based on the results of VisualEyes tool is the #1 product image.

The key point for our selection is the combination of product and Call to Action visibility. The first image scored the highest product attention by catching 10.6% of the total customer attention.

1 770DdKDZMptbtZGXsv660A 1024x651

🎉The winner product image


However, why is that happening? The reason is quite impressive!

User Experience designer A.Walter describes in his book Designing for Emotion why we appreciate human faces so much. He explains that we are continually exploring the world around us by looking for something familiar. Familiarity gives us a feeling of comfort and reassurance. That’s the very first part of the subconscious process to capture your user’s attention.

Once you have caught your visitors’ attention, human faces are a great way to also guide their line of sight. This is happening because we are curious by nature and if other people look at something, we want to know what it is they are looking at.

The product image #1 is a textbook example of guiding the user’s gaze. In our case, this is employed to point the user towards the additional information of the jersey shirt dress and eventually lock her/his attention on the Call To Action button. The user’s attention has been subconsciously captivated and guided towards a button that prompts him/her to buy.

Last but not least, the winner image demonstrates precisely the Hick’s Law.

The time it takes to make a decision increases with the number and complexity of choices.

The winner image simplifies the user choices by breaking down complex tasks into smaller steps. The user flow starts by looking at the product itself and continues to the model’s face whose line of sight guides the visitor to the additional information section. Subsequently, the user ends up in the_ Add To Bag _button.

The designers at ASOS hacked the buying decision process of the customer victoriously! 🏆

Conclusion

The main takeaway for me is the importance of product images for any e-commerce company. These companies ought to understand the effect images have on the user and spend an adequate time optimizing them.

The benefits not only can increase the attention to a specific element of the user interface but also make the customer relate to the product. Hence, the customer forms a special bond of trust with the brand itself. Once a consumer bonds to your brand, they’re more likely to make recurring purchases with no hesitation, which then bridges the gap between trust, loyalty and brand recall.

Can predictive design be considered a panacea?

Have you ever heard people refer to themselves as “Apple people,” “Nike people,” or “Trader Joe’s” people?

This is what brand awareness can do for a brand: embed itself into people’s lifestyles and purchase habits so that consumers don’t have to think twice before becoming a customer, time and time again.

Brand awareness influences customers’ decision making subconsciously. It doesn’t mean that the 13 milliseconds rule or the lust for familiar content don’t apply to these users too, but the emotional effect on their buying decision process is waning.

1 aS4lbC7soQFAxAWLd0 jbQ 1024x314

Ellesse brand visibility is predictable! But brand awareness is a little more difficult problem!


This is where predictive design currently fails but I firmly believe that running your predictive design tool with custom demographics will soon be available and will completely change the way people think about design.

As the famous Chinese-American machine learning scientist, Andrew Ng quoted:

It is difficult to think of a major industry that AI will not transform. This includes healthcare, education, transportation, retail, communications, and agriculture. There are surprisingly clear paths for AI to make a big difference in all of these industries.

AI will transform the design industry really soon!

. . .

Thanks for the support!

Connect with me on: 🐦 Twitter, 🏀 Dribbble👔 LinkedIn

. . .

🔗 References:

Special thanks to Nikolaos Paschos for his review

More articles from VisualEyes

6 Call To Action Copies That Convert

This post helps you hack the copywriting process by providing you the most common phrases that work! You and your increased revenue…

November 27th, 2019 · 1 min read

Call to Action: The Ultimate Survival guide

Understand the primary principles for Call to Actions that stand out! By the end of this post, you will be able to understand how attention…

November 25th, 2019 · 5 min read
© 2019–2020 VisualEyes
Link to $https://www.visualeyes.design/Link to $https://twitter.com/visualeyeshq?lang=enLink to $https://www.instagram.com/visualeyes_hq/?hl=enLink to $https://dribbble.com/VisualEyesHQ