Best practice examples of e-commerce images
Summary of recommendations
Files available to download for free
The following files are made freely available for commercial use, including modifying and distributing without attribution.
- Mobile is becoming the majority platform for grocery shopping.
- In order to help shoppers get the right product, e-commerce images should communicate:
- Type of product (format)
- When shopping online, the size is usually impossible to interpret from a pack shot.
- For personal care and household products, the type of product is often difficult or impossible to interpret from a pack shot.
- We recommend using off-pack communications to supplement a pack shot and provide the missing information.
- These are typically coloured stripes and icons that do not overlay the image, as shown in the best practice examples above.
- When using coloured stripes, we recommend that:
- The bottom right box should be the brand colour.
- The larger stripe should be the variant colour.
- The text in the larger stripe should be the technical product name, as the retailer would describe it.
- When using the laundry icons, the colour of the icon should change according to the variant.
- Whenever size information is communicated off-pack, it should be placed bottom right. This is the only position that is consistently available for products that are tall and thin, and also for products that are flat and wide.
- The font within the coloured stripes is Google's 'Open Sans'. This was chosen because it is free to download, and it was designed to be legible on all screen sizes.
- In order to avoid 'Visual Armageddon', off-pack communications should be consistent within each product category. Therefore, retailers will typically only accept off-pack communications if the source files are freely available for commercial use.
- The initial scope of these recommendations relates to:
- the design of off-pack communications only.
- Non-perishable products only.
- Single packs only, not multi-packs.
- These recommendations were authored by the University of Cambridge, Engineering Design Centre. They were commissioned by Unilever.
How do we know these images are better?
- Most people want to complete their online grocery shop as fast as possible.
- Our research found that shoppers rarely read the caption that accompanies the image. This is typically the cause of people accidentally buying the wrong size of product.
- We tested the visual clarity of best-practice images against typical pack shots using our SEE-IT tool. The outcome is reported in this news bulletin.
- When we tested these off-pack communications with shoppers, they helped them shop faster and they preferred them.
More best-practice examples of e-commerce images
Images © Unilever plc. Reproduced with permission.
We would welcome your feedback on this page: