skip to primary navigation skip to content
Home

Mobile Ready Hero Image Guidelines

 

Rationale for these recommendations

Recommendations for Mobile Ready Hero Images improve consistency and prevent brand teams from engaging in an attention grabbing ‘arms race’. This page also discusses the principles that are used in developing these recommendations, the scope of the recommendations and who developed them.

On this page:

Example of an S4 image. The pack shot is portrait. A vertical stripe is placed to the right of the image. It contains the product type, not marketing messages and not variant text. The stripe uses the same colour as the product variant. The product variant itself is written on-pack. The size callout is in the bottom right-hand corner. Its colour matches the brand. All callouts use the Open Sans typeface

The recommendations for one of the Mobile Ready Hero Image standard layouts.

Why are rules needed?

Consistency in the images means that shoppers learn where to look in an image for key pieces of information. This speeds up the shopping experience and reduces confusion.

Without rules, brand teams could quickly end up in an attention grabbing ‘arms race’, where they use visually disruptive shapes and colours to make their image ‘shout’ louder than the competition. Rules are needed to ensure a fair and level playing field for all the brands, and a consistent and stable user experience.

The rules have been developed to ensure that the key messages are visually clear to a large proportion of the population. If brand teams adjust fonts and sizes, they may compromise the readability for large numbers of people.

Mock up of two online stores, one with product images with inconsistent placement of elements, and one with Mobile Ready Hero Images.

The mockup on the right shows the greater consistency attained by using Mobile Ready Hero Images.

Underlying principles

The principles used to develop these recommendations are as follows:

  • Be clearer: Improve the visual clarity of the four key messages: brand, type of product, variant and size.
  • Be faster: Increase the speed of finding a particular product within a search results page by highlighting its distinguishing features.
  • Be consistent: Promote consistency to improve the shopper experience. For example, size is always positioned in the bottom right corner.
  • Be restrained: Prevent brands from starting an attention grabbing arms race, which would be detrimental to the overall shopper experience. For example, no UPPERCASE TEXT off-pack because its SHOUTING.
  • Be easy: Ensure that Mobile Ready Hero Images can be made by augmenting standard pack shots with off-pack communications, because 100,000+ Mobile Ready Hero Images need to be made, and not all brands have the time and budget to produce digital renders of their packs.
  • Be square: on a global basis, nearly every retailer offers a square canvas for Mobile Ready Hero Images, so we recommend that Mobile Ready Hero Images should be square.
  • Be achievable: Only use retailer technology that already exists, on a global basis. Currently, retailers cannot dynamically generate or dynamically position their overlays, hence we recommend all off-pack communications should be embedded within the image that is supplied to the retailers.
Mock up of an online store containing Mobile Ready Hero Images.

Visual consistency and clarity are key considerations.

The scope of these recommendations

These recommendations:

  • Have been extensively tested for categories where shelf-life is not important, such as personal care, household, ambient foods and laundry.
  • Are currently being developed for multipacks. Several brands already use Multipack layouts M1 (item pull-out) and M2 (Quantity on item pull-out).
  • Do not cover shelf-life as this information should be placed by the retailer. We recommend that retailers develop the technology to place it in different locations for landscape and portrait products.
  • Will be developed further. We are working with GS1 to codify the existing solutions as a GS1 standard, and develop solutions for the remaining issues
In S1: Full-square, a modified square pack shot uses the full canvas. In S2: Size only, a square size call-out is added to the bottom right corner of the image. In S3: Landscape with stripe, the pack shot is landscape, and a horizontal stripe and size call-out have been added below the image. In S4: Portrait with stripe, the pack shot is portrait and a vertical stripe and size call-out have been added to the right of the image. In M1: Item pull-out, an individual pack of crisps is shown next to the multi-pack in the bottom right corner. In M2: Quantity on item pull-out, the number of bars is shown on top of the item pull-out In M3: Item pull-out plus size box, an individual laundry tablet is shown out of the box on the top-right. In addition there is a washing basket lozenge showing the number of washes in the bottom right corner. In M4: Number and size of items (not variety packs): an additional lozenge has been added to the size box in the bottom right corner. The additional box specifies the number of bottles in the multipack while the size box indicates the size of each bottle.

The layouts for standard and multipack products in the current recommendations.

Who developed the recommendations?

Mobile Ready Hero Images were first developed and adopted by Unilever, in collaboration with by the Cambridge Engineering Design Centre.

Subsequently, retailers demanded that Mobile Ready Hero Images had to be category standard, so Unilever has released all of its Mobile Ready Hero Image intellectual property and assets into the public domain, and actively encourages competitors to ‘fast-follow’.

The Cambridge Engineering Design Centre has developed these recommendations to provide detailed guidance on producing Mobile Ready Hero Images and to answer many of the frequently asked questions about hero images. In June 2017, we started working with GS1 to initiate one of their standards development processes for these new types of Mobile Ready Hero Images. GS1 are aiming to develop a single global standard, which will be developed by the GS1 members who volunteer to join the process.

Logos of the University of Cambridge Engineering Design Centre, and of Unilever e-commerce

These recommendations were developed by the Cambridge Engineering Design Centre. Mobile Ready Hero Images were first developed and adopted by Unilever.

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