Mobile-friendly hero images: leading the charge to improve the mcommerce experience

March 9, 2017| by Amy Dunning

We’re reaching a tipping point in the UK, where now about 50% of ecommerce transactions are made on a mobile device instead of a computer or laptop – with other countries not far behind. The FMCG industry needs to adapt so that all products look their best across all devices.

With that in mind, Nielsen Brandbank recently co-hosted a conference for some of the UK’s most prolific FMCG brands, to discuss research findings and share views on the dos and don’ts for mobile-friendly hero images.

In conjunction with GS1, IGD and the University of Cambridge, we wanted to facilitate a discussion with the brands in which we begin to define best practice when it comes to developing images optimised for mobile grocery shopping.

We began on the general consensus that due to the reduced screen size, key product attributes needed to be more prominent. Cambridge University’s Inclusive Design team recommends that ecommerce images should communicate:

  1. The brand
  2. The type of product (format)
  3. The variant (i.e.: subcategory of product)
  4. Size

But how should these be displayed? What other attributes should be given priority? And who will control how these images look – the brands, the retailers, or both? Cambridge University provides recommendations; we wanted to encourage brands to build on these by sharing their practical experiences.

Lozenges and optimised images

Unilever highlighted the success of their approach to mobile-friendly hero images, which follow the University of Cambridge’s proposed standard. The product image is zoomed in and optimised, so that the brand and product variant are prominent and other details, or ‘visual noise’, are removed from the image. The product type and size are displayed as lozenges, or ‘callouts’ alongside the image.

Unilever has reported up to 19.6% increased online engagement in A/B testing, and an 8% lift in shampoo sales on Amazon mobile.  

These results look very promising, but the participating brands had some questions:

How should we determine which keywords to include on the lozenges?

The University of Cambridge recommends that the lozenges must only be used to clarify the format of a product (e.g.: to indicate if the shopper is viewing a bottle of shampoo or conditioner), and a product’s size.

There is concern that the lozenge space will be misused and therefore cause inconsistencies in the online aisle view. Dr Waller advised against the use of trademark words, or words which indicate a product’s colour, flavour or scent.

There was also discussion of using common search terms to determine what words should be included in a lozenge. However, shopper search terms may vary depending on whether they’ve used the product before, which supermarket they’re browsing, or if they’re after a specific brand.

Are optimised images misleading?

Optimised images are designed to remove detail from a product’s packaging which will likely be included on the product’s page, so key details look more prominent on the hero image. They’re also often cropped and zoomed in so this information is easy to read.

However, without strict regulation, we again run the risk of inconsistencies between products, and there could come a point where the shopper doesn’t recognise the product that was delivered to them as the one they added to their online basket.

Will retailers still add overlays to optimised hero images?

It’s currently a very common practice for UK supermarkets to add ‘overlays’ – i.e.: graphics with additional information, onto online product images.

Some brands are concerned that for mobile images, which will already contain multiple lozenges with essential information, additional graphics could overcrowd the image and in some cases obscure a product’s branding.

However, supermarket representatives counteract this point by suggesting that overlays do not obscure essential product information in most cases, and that displaying this additional content prominently is of benefit to the shopper, particularly when it’s promoting a special offer or the shelf-life of a product.

We discussed the possibility of displaying overlay information in the text descriptions that accompany the image, but the University of Cambridge’s research indicates that these are often overlooked in favour of the lozenge information. Another alternative is to display them next to or underneath the image (often seen on Sainsbury’s website), making it an extension of the image as opposed to an ‘overlay’.

One thing’s for sure, there’s an industry calling for some clear, established guidelines on this; which ultimately serve the best interests of the shopper, whilst remaining fair to the brands and retailers concerned.

Is an industry standard in place, or is this open to interpretation?

There’s no denying that Unilever has seen great results from the application of Cambridge University’s findings. However, at this early stage, we need to consider other influences and practices; there needs to be general agreement from brands, buy-in from the supermarkets and sign-off from GS1 before an industry standard can be finalised. The rulebook is still being written – that’s why Nielsen Brandbank is actively facilitating these discussions between industry stakeholders.

I’m not sure that these guidelines would work for my category?

Again, Unilever and the University of Cambridge appear to have cracked the code for the beauty category, but will brands experience the same uplift in sales if these practices were applied to fresh produce, pet food, or frozen ready-meals? Optimum lozenge placement will differ depending on the shape of the product, and keywords will need to be considered for each category and subcategory to ensure all brands benefit equally from this industry-wide change.

What happens now? Three next steps

  1. We’ve called upon GS1 to define an industry standard of acceptable keywords for use in the lozenges.
  2. We will present key findings and discussion points to UK supermarket representatives, facilitating a discussion on their view of best practice and content requirements.
  3. We will arrange another conference with FMCG brand representatives to share key updates and continue the discussion on best practice.

For more information on the development of best practice for mobile-friendly hero images, please contact


Get In Touch

For further details in relation to how we handle the personal information you provide to us, please see our Privacy Notice.