skip to primary navigation skip to content
 

Are hero images better?

Mobile Ready Hero Images provide a clear, readable and consistent alternative to pack shots. This page contains a link to a video where you can see some of the problems with pack shots and the potential of Mobile Ready Hero Images for yourself. It also presents various pieces of evidence showing that hero images perform better than pack shots.

On this page:

Try it for yourself

Watch this video to see some of the problems with pack shots and the potential of Mobile Ready Hero Images.

What is a Mobile Ready Hero Image?

A Mobile Ready Hero Image

  • Is created specifically for e-commerce to act as the primary image in thumbnail results (e.g. With search, favourites and store categories).
  • Makes better use of space than a conventional packshot — see image below.
  • Is designed to work well on all screen sizes that are typical for online retail (approximate 16mm on mobile, 23mm on tablet and 48mm on laptop / desktop).
  • Helps the online shopper to better recognise four key pieces of information (brand, product type, variant and size), especially when scrolling through images quickly.
  • Includes a pack shot which may be zoomed and/or cropped to deliver better legibility and recognition of the brand and variant especially on tall thin products such as bottles.
  • May include (if necessary) a box containing the size in the bottom right (see standard layouts for more details).
  • May include (if necessary) a stripe on the right hand side or bottom specifying the product type (see standard layouts for more details).

Visual clarity results

The Cambridge Engineering Design Centre conducted SEE-IT visual clarity tests on conventional pack shots and Mobile Ready Hero Images for a variety of products. These tests estimated the proportion of the UK population who would be unable to make out various pieces of information from the images, based on the amount of visual acuity required (high numbers are bad).

The graph below shows the results for one product. Overall, the Mobile Ready Hero Images resulted in many more people being able to recognise the product type and variant and read the size or pack count, with similar numbers being able to recognise the brand.

Simulated shopping results

SKIM conducted simulated shopping tests with both pack shots and Mobile Ready Hero Images, measuring the number of times that each product was selected and placed in the basket. Tests were conducted with 3000 shoppers on Amazon mobile and desktop. Mobile Ready Hero Images performed better than pack shots across a wide range of products in both mobile and desktop, vertical scrolling and grid layout. Some example results are shown in the image below.

Sales uplift results

Mobile Ready Hero Images were trialled live against conventional pack shots in A/B split tests with a range of retailers. The Mobile Ready Hero Images typically resulted in positive sales uplift as shown in the image below.

Mobile Ready Hero Images also resulted in large amounts of sales uplift on the Coles website. For example, Surf branded products saw an average weekly sales uplift of 74.5% when they changed from conventional pack shots to Mobile Ready Hero Images. Similarly, Coles front loader launder powder saw a 55% sales uplift post image update.

Feedback

We would welcome your feedback on this page:

Your name:


Your email:


Please tick this box if you would like to receive updates on inclusive design training and tools from the Engineering Design Centre.

Your comments:


Please leave this field blank (it's a spam trap):
Submit feedback

Any information that you send us will be handled in accordance with our privacy policy.

Unless otherwise stated, all images are © Unilever and used with permission. Walkers is a trademark owned and designed by PepsiCo and used with permission.