skip to primary navigation skip to content
Home

Mobile Ready Hero Image Guidelines

 

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:

Nine examples of Mobile Ready Hero Images with different layouts.

Examples of Mobile Ready Hero Images.

Try it for yourself

Watch this video to see some of the problems with pack shots and the potential of Mobile Ready Hero Images.
Screenshot from a video that demonstrates the potential of following the image recommendations

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).
A Mobile Ready Hero Image and a conventional packshot displayed side by side at three different sizes: 16mm mobile, 23mm tablet and 48mm laptop/desktop. A coin is shown for scale.

A Mobile Ready Hero Image is designed to work on all screen sizes that are typical for online retail. It makes better use of the available space than a conventional packshot.

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.

Graph showing the percentage of people able to do various tasks for a pack shot and Mobile Ready Hero Image of the same product: Dove body wash. 89% of people could recognise the brand with the pack shot and 91% with the Mobile Ready Hero Image. 15% or less could recognise the product type with the pack shot and 34% with the hero image. 15% or less could recognise the variant with the pack shot and 34% with the hero image. 15% or less could read the size with the pack shot and 60% with the hero image. Note that the model used to construct these estimates goes out of range below 15%. So for figures of 15%, the number of people able to do the task could be as low as 0%.

Visual clarity results for a pack shot and Mobile Ready Hero Image using the SEE-IT method.

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.

Mobile Ready Hero Images and their relative increase in product selection versus a conventional pack shot. Tresemme hair spray showed a 4% increase on mobile. Tresemme shampoo showed an 8% increase on mobile, Tresemme shampoo showed a 14% increase on PC/desktop.

Mobile Ready Hero Images delivered a significant increase in product selection in simulated shopping tests on Amazon mobile & desktop. Source: SKIM research Dec 2014 (3000 shoppers Quant).

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.

Four Mobile Ready Hero Images as examples of four brands with their associated sales uplift in retailer tests. Persil: 2.6% list, Magnum: 24% lift; Ben and Jerrys: 3.6% lift, Simple: 20% lift.

Sales uplift results in split A/B tests with 4 different retailers. In each case, the result applies to the brand as a whole, but a single Mobile Ready Hero Image is shown as an example.

Back to top

Feedback

We would welcome your feedback on this page:

Your name:


Your email:


I would like to receive the Inclusive Design Toolkit news bulletin. This bulletin showcases people's achievements with inclusive design tools, and highlights new tools. It comes out once or twice a year.

I would be interested in contributing to the Inclusive Design Toolkit news bulletin.

I would like a FREE activation code for the Inclusive Design Toolkit's impairment simulator software.

Your comments:


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

Privacy policy. If your feedback comments warrant follow-up communication, we will send you an email using the details you have provided. Feedback comments are anonymized and then stored on our file server. If you select the option to receive or contribute to the news bulletin, we will store your name and email address on our file server for the purposes of managing your subscription. You can unsubscribe and have your details deleted at any time, by using our Unsubscribe form. If you select the option to receive an activation code, we will store your name and email address on our fileserver indefinitely. This information will only be used to contact you for the specific purpose that you have indicated; it will not be shared. We use this personal information with your consent, which you can withdraw at any time.

Read more about how we use your personal data. Any e-mails that are sent or received are stored on our mail server for up to 24 months.

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

Back to top

Study at Cambridge

About the University

Research at Cambridge