skip to primary navigation skip to content
 

E-commerce image recommendations

This page provides recommendations for how to design e-commerce images that are visually clear, especially when viewed on mobile devices.

A hero image consists of a digitally created representation of the product, which may be augmented with off-pack communications. There are several possible layouts for a hero image, depending on whether the pack is portrait or landscape, and on whether the pack has individual items inside it.

The following standard layouts may be used for all products.

In addition, the following 'multipack' layouts may be used for packs that have individual items inside them, where the number of items is described on the shelf label. These products may also use the standard layouts above if desired. M4 is only allowed when each item in the pack is the same.

Anatomy of a Mobile Ready Hero Image

The diagram below explains one of these layouts (S4) in more detail. The off-pack communications in the other layouts are similar. See this presentation for further details

Video explanation

Watch this video to see some of the problems with pack shots and the potential of hero images.

Files available to download for free

The following files are made freely available for commercial use, including modifying and distributing without attribution.

Download photo shop template (v1)

You may also want to Download the Open Sans font that is used inside this file.

You can also download a detailed presentation on the research and rationale that underpins these recommendations.

Detailed recommendations

  • Mobile is becoming the majority platform for grocery shopping.
  • In order to help shoppers get the right product, e-commerce images should communicate:
    1. Brand
    2. Type of product (format)
    3. Variant
    4. Size.
  • 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

ComfortFabricConditionerBlueSkies42Washes15LT.jpg ComfortFabricConditionerBlueSkies85Washes3LT.jpg ComfortFabricConditionerIntensePassion38Washes570ML.jpg ComfortFabricConditionerIntensePassion64Washes960ML.jpg ComfortFabricConditionerLavenderBloom42Washes15L.jpg ComfortFabricConditionerSunshinyDays42Washes15L.jpg ComfortPureConcentrated38Washes570ML.jpg ComfortPureConcentrated64Washes960ML.jpg ComfortPureFabricConditioner42Washes15LT.jpg ComfortPureFabricConditioner85Washes3LT.jpg DoveAdvancedHairSeriesOxygenMoistureConditioner250ML.jpg DoveAdvancedHairSeriesOxygenMoistureShampoo250ML.jpg DoveAdvancedHairSeriesPureCareDryOilConditioner250ML.jpg DoveAdvancedHairSeriesPureCareDryOilShampoo250ML.jpg DoveCaringProtectionBodyWash250ML.jpg DoveDaily2in1ShampooConditioner400ML.jpg DoveDailyMoisture2in1ShampooConditioner250ML.jpg DoveDailyMoistureConditioner200ML.jpg DoveDailyMoistureConditioner350ML.jpg DoveDailyMoistureShampoo250ML.jpg DoveDailyMoistureShampoo400ML.jpg DoveDeeplyNourishingBodyWash250ML.jpg DoveDeeplyNourishingBodyWash500ML.jpg DoveDermaSpaGoodness3BodyCream300ML.jpg DoveDermaSpaUpliftedBodyLotion200ML.jpg DoveGoFreshCucumberRollOnAntiPerspirantDeodorant50ML.jpg DoveGoFreshPomegranateRollOnAntiPerspirantDeodorant50ML.jpg DoveGoFreshScentsBeautyCreamWash250ML.jpg DoveIndulgingCreamCaringBath500ML.jpg DoveInvisibleDryAerosolAntiPerspirantDeodorant250ML.jpg DoveInvisibleDryStickAntiPerspirantDeodorant40ML.jpg DoveMenCareCleanandComfortBodyFaceWash250ML.jpg DoveMenCareCleanComfortBodyFaceWash400ML.jpg DoveMenCareCleanComfortRollOnAntiPerspirantDeodorant50ML.jpg DoveMenCareHydrateMoisturiser50.jpg DoveOriginalAerosolAntiPerspirantDeodorant250ML.jpg DoveOriginalBeautyCreamWash250ML.jpg DoveOriginalCreamAntiPerspirantDeodorant50ML.jpg DoveOriginalStickAntiPerspirantDeodorant40ML.jpg DoveRichNourishmentCreamPot150ML.jpg LynxAfricaBodySpray150ML.jpg LynxAfricaBodySpray200ML.jpg LynxAfricaShowerGel250ML.jpg LynxBlackBodySpray150ML.jpg LynxBlackBodySpray200ML.jpg LynxBlackShowerGel400ML.jpg LynxBlackShowerGelMini50ML.jpg LynxDryBlackAerosolAntiPerspirantDeodorant150ML.jpg LynxDryBlackAerosolAntiPerspirantDeodorant200ML.jpg LynxDryPeace48HAntiPerspirantDeodorant150ML.jpg LynxExciteBodySpray150ML.jpg LynxExciteXLBodySpray200ML.jpg LynxSignatureAerosolAntiPerspirantDeodorant150ML.jpg LynxSignatureAntiMarksProtectionAntiPerspirantRollOn50ML.jpg LynxSignatureDailyFragranceOudWoodDarkVanillia100ML.jpg PersilLiquidWashingCapsulesColour22Washes22S.jpg PersilLiquidWashingCapsulesColour38Washes38S.jpg PersilLiquidWashingCapsulesUltimateNonBio19Washes19S.jpg PersilLiquidWashingCapsulesUltimateNonBio30Washes30S.jpg PersilNonBioWashingPowder70Washes49KG.jpg PersilSmallMightyLiquidDetergentBio25Washes875ML.jpg PersilSmallMightyLiquidDetergentBio40Washes14LTR.jpg PersilSmallMightyLiquidDetergentBio60Washes21LTR.jpg PersilSmallMightyLiquidDetergentNonBio25Washes875ML.jpg PersilSmallMightyLiquidDetergentNonBio40Washes14LTR.jpg PersilSmallMightyLiquidDetergentNonBio60Washes21LTR.jpg PersilWashingPowderBiological23Washes161KG.jpg PersilWashingPowderBiological45Washes32KG.jpg PersilWashingPowderNonBio23Washes161KG.jpg SureMenQuantumAerosolAntiPerspirantDeodorant250ML.jpg SureMenSensitiveRollOnAntiPerspirantDeodorant50ML.jpg SureMenSensitiveStickAntiPerspirantDeodorant50ML.jpg SureWomenCottonAerosolAntiPerspirantDeodorant250ML.jpg SureWomenCottonRollOnAntiPerspirantDeodorant50ML.jpg SureWomenCottonStickAntiPerspirantDeodorant40ML.jpg SureWomenCrystalInvisibleAquaAerosolAntiPerspirantDeodorant250ML.jpg SureWomenCrystalInvisibleAquaStickAntiPerspirantDeodorant40ML.jpg SureWomenCrystalInvisibleBlackWhiteRollOnAntiPerspirantDeodorant50ML.jpg TRESemmeBeautyFullVolumeReverseSystemAntiStaticShampoo500ML.jpg TRESemmeBeautyFullVolumeReverseSystemAntiStaticShampoo750ML.jpg TRESemmeBeautyFullVolumeTouchableBounceMousse200ML.jpg TresemmeKeratinSmooth7DaySmoothConditioner250ML.jpg TresemmeKeratinSmooth7DaySmoothShampoo250ML.jpg TresemmeKeratinSmoothDeepTreatmentMasque300ML.jpg TRESemmeKeratinSmoothRestoringConditioner500ML.jpg

Images © Unilever plc. Reproduced with permission.

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