In One Click Retail’s eCommerce Expertise series, we invite some of our

top clients to offer their expert opinions on specific, niche subjects

affecting the industry, from the latest design principles to key moments

in the history of eCommerce. In contrast to our broad, industry-level

insights, these articles focus on a unique and distinct topic in the

ongoing development of the digital economy.

eCommerce Expertise: Oliver Bradley, UnileverBy Oliver Bradley, Global eCommerce Experience Design Director at Unilever

At a time when packshots are the industry standard, it takes a lot of

confidence for someone to come along and suggest not only that they

don’t work, but that they actually adversely affect user experience.

Some retailers may take exception to Unilever’s insistence that mobile-

ready hero images are a better visual solution than packshots, so they

deserve some explanation and proof.

Online Shoppers Want Mobile-Ready Hero Images

For those new to this subject, the image to the

above left is a hero image, while the above right is

a packshot.

Both use the same amount of space on screen but the hero

image makes better use of the space. The difference is

immediately obvious, but in order to prove that the distinction

is significant and the hero image is scientifically better for the

user experience, Unilever eye tracked over 100 shoppers on all

devices, including mobile & tablets. Here is a quick summary of

our findings:

Almost every online shopper we interviewed could regale us

with stories of having bought the wrong size product because

they relied too heavily on the image and it failed to properly

communicate the pack size.

Understanding size from a packshot is arduous and requires reading the full product title

Shoppers are in a huge rush; without exception everyone told us they shop

online because it’s “more convenient” and “saves time”, and the adoption of

mobile devices has further driven fast vertical scrolling behavior. In our

study, the conventional packshot failed in its ability to successfully

communicate BRAND / FORMAT / VARIANT / SIZE on mobile devices, even

while assuming a best case image size of 16mm for smartphones and 23mm

for tablets.

Recognizing product format in personal care with identical looking vertical tubes is problematic

Our study revealed that shoppers are not particularly good at search. Most

of them didn’t bother refining or filtering their search results, especially on

size. In fact, most weren’t really aware of what size they usually buy and

didn’t even know the name of their Dove variant: they would simply tell us “I

use the light blue Dove”.

“Search & scroll” behavior is pervasive

“Vegas Style scrolling” is flicking the screen upwards at speed

then stopping the fast scroll when the shopper spots what

they are looking for. The current mobile experience using

packshots in fast scroll is very poor, leading to poor conversion

rates and creating a problem for us and for other retailers.

On mobile, shoppers vertical scroll through their search results “Vegas style”

We knew we couldn’t solve this on our own and so we approached

the Cambridge University Inclusive Design team, having noticed the

exceptional work they helped deliver on GOV.UK. The first question

they asked was “what does the shopper get for free just by looking

at the packshot?” Brand, yes, and sometimes the product variant,

the size and the format, but none of those reliably.

Developing an Inclusive Design Approach

As some people have pointed out, all those details are in the

product title. Our response is product titles help the search

ranking but rarely get read by shoppers. Our eye tracking has

verified the power of visual content – shoppers want to visually

scan when shopping online, they don’t like being forced to read.

Product titles are a bit like instruction manuals: too much effort

in today’s plug-and-play world.

The first thing we did to help shoppers see the pack better was simply to

“medium zoom”, making the brand and variant name bigger. Shoppers

loved it, but suddenly the size and format were no longer visible in the

picture, let alone hard to read. With our personal care products, many

bottles and tubes at different sizes are identically shaped – in a thumbnail

it’s impossible to tell the size difference. So, using the same strategy as

placing the star rating right next to the image to help the shopper, we

bravely decided that we needed to take size and format callouts “off pack”.

We did heroes first in Laundry with the number of washes – a

safe move embraced by retailers and shoppers alike which

yielded solid positive results: a 2.6% uplift vs packshots in A/B

tests. Following that success, we took size off pack on all other

categories with even stronger double digit conversion results,

laying the foundation for our new hero image template.

Hero images make finding products easier for shoppers, leading to amazing A/B test

results: a 24% lift on Magnum, a 19% lift on Simple, and a 4% lift on Ben & Jerry’s.

However, retailers were understandably unhappy: we had an unfair advantage. Our

hero images were not visually consistent with other products on their websites. So

we decided to take a big step and open-source the Cambridge hero image template

to allow all suppliers and retailers to follow. We realised that we needed to create a

versatile category solution with the same visual architecture and consistency across

the board. Since doing this we’ve been pleased to see L’Oréal, GSK, P&G, Kellogg’s,

Kimberly Clark and J&J follow our approach.

Unilever now has hero images live on over

40 e-retailers across 20 different markets.

There are still detractors who don’t think mobile-ready hero images are the

solution. To them I make one request: test it. Test it versus current

packshots, test it versus your best new ideas, and together let’s make the

user experience on every device and for all shoppers a whole lot better in

2017.

With 98% accuracy, OCR delivers the industry’s most accurate sales data to their brand manufacturer clients

selling on the world’s top eCommerce platforms. To get a glimpse of the unique insights One Click Retail

provides its customers, be sure to follow our weekly blog at www.oneclickretail.com/insights, and following

us on Twitter and LinkedIn.

One Click Retail (OCR) is a market leader in eCommerce data measurement, sales analytics and search optimization for brand manufacturers in North America, Europe and Asia. Thanks to our proprietary sales calculations that are 98.5% accurate down to the SKU level, OCR’s accuracy is unrivaled in the marketplace. The OCR Product Suite provides 1st and 3rd party business intelligence across the 30 largest retailers such as Amazon, Walmart, Target, Staples and Home Depot. The world’s top brands, such as Procter & Gamble, Panasonic, Nestle, Hamilton Beach and HP, rely on OCR insights to drive sales and profitability across eCommerce.

Founded in 2013 by eCommerce experts from Amazon, Walmart, Target, Overstock and other leading retailers, OCR was acquired in 2016 by Ascential plc (LSE: ASCL.L), a UK-based international B2B media company with a focused portfolio of market-leading events and information services products.

To learn more about how OCR can provide your brand with the competitive edge in today’s ecommerce marketplace, visit www.oneclickretail.com.

About One Click Retail