PowerPoint Presentation
DIGITAL DELIVERINGBETTER SHOPPER INSIGHT & EXPERIENCES
across all devices & screen sizes
TABLETMOBILE
Oliver Bradley@eCommerceULVR
LAPTOP
#Our Unilever eCommerce team is fascinated by how technology is
reshaping shopping, and the potential of digital in delivering
better shopper insight and experience.Today I want to explore with
you the mobile revolution. Two out of 3 of you here today slept
with your mobile next to your bed and used it to wake you to get
here on time today. For many of you your mobile is the last thing
you put down before you go to sleep and the first thing you check
when you wake up. For most of us we are now doing more email on our
smartphones between meetings that on our laptops outside of
meetings. The humble smartphone has reshaped our behaviour.1
3 things
MOBILE now the first touchpoint
CONTENT not optimised for mobile
SHOPPER-FIRST category solution
#Today Im going to explore 3 things that show we need a fresh
approach to meet online shoppers needs betterONE: MOBILE IS NOW THE
FIRST SHOPPER TOUCHPOINTTWO: DIGITAL CONTENT FOR THE MOST PART
HASNT BEEN OPTIMISED FOR MOBILETHREE: WE NEED A SHOPPER FIRST
CATEGORY SOLUTION RATHER THAN BRAND CENTRIC SOLUTION.2
The future is arriving fasterthan predicted
#One of the most exciting (and simultaneously exhausting) facets
of working in eCommerce is the relentless pace of change. Put
simply the future is arriving fast than predicted and often were
not quite ready.3
But its not about the iPhone 7
#Despite all the recent hype its not actually about the iPhone 7
thats particularly disruptive, but instead4
Its about the 3Ringing BellsFreedom 251
#Its about the humble Indian Ringing Bells Freedom 251 the
worlds cheapest smartphone as it represents the PERVASIVE
ACCESSIBILITY OF TECHNOLOGY.
5
And the proliferation of sub US$50 smartphones
Moto E
#A more credible example actually is the Moto E and the
proliferation now of sub $50 US dollar smartphones. What does this
mean?
6
The first touchpointIn every persons pocket
#It means we have become the Planet of smartphones. Since 2014
there has been more smartphones connecting to the internet than
PCs.THIS IS THE FRONT COVER OF THE ECONOMIST IN MARCH 2015
predicting that 80% of adults globally will have a smartphone in
their pocket by 2020.
UK in top 10SMARTPHONE
PENETRATIONhttp://thehub.smsglobal.com/smartphone-penetration-by-country-top-10/
#Does this apply here in the UK? Absolutely we are in the top 10
countries for smartphone penetration. Deloitte in a 2016 study
quotes the UK to now be at 81% smartphone penetration, but
regardless of who is doing the survey the conclusion is the same
mobile has replaced PC as the device of choice to go online.8
MOBILE = More Screen Minutes Than TV
Source:Mary MeekerState of the Internet 2015
#But now lets look at how much time is spent on different
screens.Without exception MOBILE & TABLET beat TV & LAPTOPS
ON SCREEN TIME.This slide is from Mary Meekers 2015 State of the
Internet presentation and quotes Milward Brown data.9
BUT MOBILE ISNT IMPORTANT because PC purchases still represent
the majority of online shopping transactions
#But I hear some of you objectMobile isnt that important yet,
because PC purchases still represent the majority of online
shopping transactionsWell10
ButUK hits the MOBILE tipping point >50% transactions are now
on mobile for eCommerce
Mobile Share of eCommerce Transactions by Country:Source:
Criterio 2016 State of Mobile Commerce
#I would put to you that the UK in eCommerce right now has
reached tipping point.This is a chart from Criterios 2016 State of
Mobile Commerce study showing that the UK along with Japan and
South Korea have got to the 50% of transactions from mobile markTo
quote Internet Retailer June 28 2016Ocado says 55% of transactions
on mobile 11
So we need to deliver a great experienceon all screen sizes
But start with mobile
#So our joint challenge is we need to deliver a great experience
for shoppers across ALL SCREEN SIZES.BUT RATHER THAN START WITH
DESKTOP.WE NOW NEED TO DESIGN #MOBILEFIRSTId like to show you a
related example of who is leading the way in delivering mobilefirst
and digitalfirst design we can learn from.12
Digitalfirst design
Analogue design
#Many of us remember perusing the DVD racks at BlockbusterThese
DVD racks have been replaced with swiping up and down looking at
image thumbnails on mobile and tablet, so its no surprise Disney
Pixar have created SIMPLER, CLEANER, DE-CLUTTERED HERO IMAGES for
their film cover artwork to help them get noticed & chosen in
fast scrolling.
13
How do we win shoppers at the very first touchpoint? 60% of all
retail sales will be digitally influenced by 2017FORRESTER
#So the question is IF 60% OF ALL RETAIL SALES WILL BE DIGITALLY
INFLUENCED BY 2017 then
How do we WIN SHOPPERS AT THE VERY FIRST SHOPPER TOUCHPOINT ON
MOBILE?
4 4.3 in3.5 in
4.7- 5.1 in5.7 in5.5 in
http://www.digit.in/mobile-phones/4.7-inches-is-still-the-favourite-screen-size-report-27993.html
+80% of Mobile Traffic is on screens smaller than 5.1
inchesDesign #MobileFirst
#Well the answer is remarkable simple at first glanceB1: DESIGN
MOBILE FIRSTB2: FOR 5 INCH SCREENSB3: BECAUSE 80% OF MOBILE TRAFFIC
IS STILL ON SCREENS SMALLER THAN 5 INCHES
15
ONLINE shopping has mainstreamed
Can you read this? older shoppers have poorer eyesightDo we
really need better eCom primary images?
MOBILE is the 1st screen
#So I hear you ask Do we REALLY NEED better eCommerce primary
images? We do.2 simple reasonsONE: MOBILE IS NOW THE FIRST SCREEN
AHEAD OF TV AND LAPTOPTWO: ONLINE SHOPPING HAS MAINSTREAMED and if
you are not able to read my chart it may be because like me you are
over 40 and need glasses put simply your eyesight deteriorates
massively and unfortunately irrevocably over 40 making
multiscreening very tricky.
16
*Omniture Clickstream from Tesco.com (2.4 million shoppers)
AVOID reading
VISUALLY SCAN images
IGNORE everything else
Online eye tracking shows
#And now for the SCIENCE BIT. Eye tracking has shown us that
ONE: shoppers dislike and AVOID READING why because your brain
can process visual images 4000x faster than reading text.TWO: As a
result people tend to visually scan only the image and ignore
nearly everything else in your app other than the images.
17
What 4 Things Do SHOPPERSNeed to Know to SuccessfullyChoose the
Right Product?
#So let me then ask you a question.Other than price what 4
things do online shoppers need to know to successfully choose the
right product? 18
1. BRAND
#1. BRAND yes Magnum in this case the worlds most valuable ice
cream brand.19
2. FORMAT
#2. Format Dove beauty bar the soap that technically isnt
actually a soap.20
3. VARIANT
#3. Variant in this case Toni & Guy Sea Salt spray who would
have known surf tousled casual look hair would be so hotly sought
after?21
4. SIZE
#4. Size all our Lynx showergels look identical at thumbnail
size so we had to make it easier for shoppers to not get this
wrong.22
#VIDEO EMBED SLIDE PART ONE
Heres your challenge COUNT THE DOVE PACKS IN FAST VERTICAL
SCROLL and show me by number of fingers held up how many you
saw
HOW MANY DOVE PACKSHOTS? 3? 2? 1? NONE?23
#OKAY LETS TRY THAT EXERCISE AGAIN THIS TIME USING HERO
IMAGES
How many Dove Hero Images did you count?
5?4?24
What is the brand? maybeIs it 400 ML or 250 ML? - NOIs it
shampoo or conditioner? - NO
- NOIntensive Repair or Colour Care?
#Okay lets do another quick challenge as I can see you like
being challenged.Whats the brand here? Dove good now lets see how
you do on the other 3 things.Format?Variant?Size?25
What is the brand? Is it shampoo or conditioner? Intensive
Repair or Colour Care? Is it 400 ML or 250 ML? - YES- YES- YES-
YES
#Now lets compare that with a Cambridge Inclusive Design Mobile
Ready Hero Image
Brand?Format?Variant?Size?26
Making variant navigation easyInstore example*Omniture
Clickstream from Tesco.com (2.4 million shoppers)
#
27
Making variant navigation easyOnline example Hero Images vs.
Packshots
#We know that shoppers struggle to find their variant in fast
vertical scroll so weve made it simple and easy
MEDIUM ZOOMVARIANT COLOUR ON VERTICAL FORMAT CALL OUT
STRIP28
not all packs are square
#But I hear some of you say why do you need off pack text in
Lozenges anyway?Well not all packsizes are square and therefore you
struggle to see what they are.29
What brand?
Maybe its Maybelline?
#Let me show you one more example to illustrate just how poor
the shopper experience is on mobileActually I dare you to get your
mobiles out and try it in any retailer app search eyeliner on your
mobile and youll see what looks like a range of wands from
Hogwarts.
Who know what the brand is? MAYBE ITS MAYBELLINE?30
FindingYour Eyelinershould not cause eye strain
LaptopTabletMobile
#So weve tackled this with Lakme our cosmetic brand in India (a
mobile only market) and solved it because finding EYELINER should
not cause eyestrain.31
3 PILLARS: MOBILE READY HERO IMAGES
PROVEN SHOPPER INSIGHT
VISUAL SCIENCE
CLEAR RULESVISUAL CONSISTENCY
Retailer.com feedback
#We started our quest for a better thumbnail image back in 2013
with 3 pillars to our approach:VISUAL SCIENCE: the University of
Cambridge helped with the rigour of delivering inclusive designs
that would succeed with more than 75% of the UK adult
population.PROVEN SHOPPER INSIGHT : We partered with SKIM and Tobii
Eyetracking to test our hero images versus packshots across all
screen sizes to prove they would convert more strongly than
conventional packshots.LASTLY VISUAL CONSISTENCY: Weve worked with
Google, followed GS1 rules and gathered Retailer feedback in order
to avoid visual Armageddon and create a category led solution thats
visually consistent.
32
What is an inclusive design audit?
#So I hear you ask what is an inclusive design audit?the purpose
of an audit is to estimate the percentage of the population who
can/cannot do something. Example task Find and successfully add the
following products to basket on mobileLets look at a real case
study featured in the video.33
Inclusive Design Std: 75% of UK adultsWhat % could
#Going back to the 4 questionsWhat % of UK adults looking at a
23mm image on a 7 inch tablet from 1 metre away canRecognise
BRANDDetermine FORMATRecognise VARIANTRead PACK SIZE / PACK
COUNT?We set our minimum standard as 75% of the UK adult population
should be able to complete all 4 tasksOur HERO IMAGES PASSED.34
Inclusive Design Std: 75% of UK adultsWhat % could
#The results were a lot less pretty for the packshots.They
struggle unsurprisingly on FORMAT & SIZE- So its these two
elements we advise to call out off pack in lozenge strips.35
No mistakeschoosing the right size
2.6% liftA/B test*
*A/B split test with Retailer A
#And weve got some proven live in market resultsJust adding the
number of washes callout with retailer A in Europe delivered a 2.6%
lift in an AB split test
Helping shoppers see our ice cream tastes awesome(& find
their flavour fast)beforeafter
3.6%*lift
*test with Retailer C
#Taking our lids off Ben & Jerrys and making the variant
bigger and easier to read got us 3.6% lift in retailer C37
A SIMPLER experience across all screen sizes
*A/B split test with Retailer D
19.6% liftA/B test*
#On Simple swapping pack shots for hero images gave us 19.6%
liftNot entirely surprising given without hero images the packshots
look confusingly similar.
afterBigger brandingClearer sub-rangeNo confusion onno. of
eachShoppers can see Whats inside
before
+24%* ^lift
*A/B split test with Retailer B
#And back to Magnum this 24% lift in an AB split test took our
breath away (and that of our retail partner who tested with
us).
Small things do make a big difference.
VISUALConsistencyGood for ShoppersBrandsRetail partners
#So lets finish this story with how we are working in
partnership with retailers to deliver visual consistency which is
good for everyoneGood for ShoppersGood for BrandsGood for
Retailers
We dont want VISUAL ARMAGEDDON
UGLYYELLOWLOZENGES
#We experimented with yellow lozenges showing number of washes
back in 2012 but decided they were visually too noisy41
Now replaced with a Category solution
#Past efforts that delivered brand led solutions failedSo we
delivered a category solution
#Im open to admit we had brand led solutions back in 2015 but
since early 2016 weve worked very hard to deliver a category led
solution 43
Medium Zoom&STANDARDISEDStrip Lozenges
#The Cambridge Inclusive Design hero image formula isnt
particularly difficult to decode.
When its difficult to see what the product is because its not
square then medium zoom and add visually consistent strip lozenges
with size and format.44
We open sourceda category led solution
#From April 2016 Cambridge University Open Sourced our joint
solution so everyone could benefit from our work together saving
time and money.45
Medium Zoom
FORMAT callout i.e. LotionColour matches variant colourSIZE
calloutColour matches the BRANDOpen Sans fontSentence Case
#Let me quickly explain how to create a hero image when you have
tall thin products like we have in personal care46
AFTEROpen Sans typeface: CONSISTENCYBEFOREBrand led typeface =
INCONSISTENT. Category Consistent Callouts VISUAL CONSISTENCY
#Tall thin bottles and tubes in Personal Care categories should
be medium zoomed unless the pack shape is very distinctive and
recognisable to the shopper.We learned to ditch the brand led
typefaces in favour of a clean personality free typeface OPEN
SANS.
We standardised putting size bottom right knowing shoppers look
in a Z shaped pattern from eye tracking.47
AFTERVariant Colour in Large stripBrand Colour in Size
lozengeBEFOREWrong Colours for callouts. Category Consistent
Callouts VISUAL CONSISTENCY
#Tall thin bottles and tubes in Personal Care categories should
be medium zoomed unless the pack shape is very distinctive and
recognisable to the shopper.We learned to ditch the brand led
typefaces in favour of a clean personality free typeface OPEN
SANS.
We standardised putting size bottom right knowing shoppers look
in a Z shaped pattern from eye tracking.48
AFTERSIZE in Open Sans always bottom rightBEFORESIZE in brand
font & placed anywhere. Category Consistent Callouts VISUAL
CONSISTENCY
#And where it is self evident what the format is we just have
the size lozenge.49
AFTERSIZE always bottom rightBEFORESIZE placed anywhere.
Category Consistent Callouts VISUAL CONSISTENCY
#The main thing is to ensure we have visual consistency
everywhere. Landscape packs would get a horizontal strip if
required. Size again bottom right.50
HERO IMAGESLIVE >20 countries>40 retailers
UK US IN BR CA NL ES FR AU TR RU SG IN SE VI DE
#So where are we now? We have hero images live in 15 countries
across the globe in over 20 retailers and this updates weekly with
new retailers going live.51
No longer a Unilever thing
#In honesty we no longer see this as a UNILEVER THING.52
But an industry shift
#This is a digitalfirst INDUSTRY SHIFT.53
Will you be a part of it?The shift to mobile has already
happened.
#And the question I want to leave you with is Will you be a part
of it?
Because the shift to mobilefirst has already happened lets not
get left behind.54
