Date post: | 20-Sep-2014 |
Category: |
Design |
View: | 555 times |
Download: | 4 times |
1
- Pieter Jongerius -
FASHION E-COMMERCE CONVERSION VS. BRANDING?
Survival of the fittest
2 @PIETERJ / #BRANDCONF
In fashion, perhaps more than anywhere else, branding is everything.
Many fashion brands have spent decades building up a unique but delicate brand image: they often rely on staying enigmatic, using aspirational photography and
inspired physical stores to differentiate.
In an increasingly online world, this imposes a problem. Success in e-commerce is determined by laws of conversion, use of conventions and by enabling choice. Not
by exceeding expectations and offering serendipity. This is why all profitable online fashion stores look more and more the same.
In this talk, Pieter Jongerius will bring together the worlds of fashion,
touchpoint strategy and e-commerce design. After this talk, you will have learnt a very concrete approach to obtaining success in fashion e-commerce, illustrated
with recent best practices.
3 @PIETERJ / #BRANDCONF
Conversion and branding go hand in hand
Our challenge Conversion Branding
Model Three areas of interest
4 @PIETERJ / #BRANDCONF
At Fabrique, we specialize in Brand driven design
@PIETERJ / #BRANDCONF 5
I often compare the challenge that our clients have with that of birds of paradise. They have to comply to a lot of things, like having wings and little legs.
But they also have the need to find ways to stand out and create a difference between themselves and their competitors
In Fashion, as in many industries, our main way of creating a difference is through our products.
But as soon as we start communicating, we all use the same visual language. And that’s a language that Coco Chanel has introduced in 1924
…and that they’re still continuing.
9 @PIETERJ / #BRANDCONF
And they’re not the only one.
Big photo, small logo
Big photo, small logo
So for H&M, its relatively simple to associate themselves with higher-end fashion brands by doing the same.
Even Diesel, who recently tried a significantly different style,
…are conforming in more recent work again to the format: Big photo, small logo Is that me-too behavior? Or really the best way to convey emotion and attitude?
15 @PIETERJ / #BRANDCONF
Even net-a-porter know that they have to use a lot of room as soon as they enter the physical realm.
16 @PIETERJ / #BRANDCONF
…as they do in Porter, their magazine.
17 @PIETERJ / #BRANDCONF
…but not online. Why?
BRANDING VS. CONVERSION?
if you look at this, it comes as no surprise that especially in Fashion ecommerce, this paradox emerges:
19 @PIETERJ / #BRANDCONF
Increasingly, patterns SEEM to be the enemy of creativity and innovation
20 @PIETERJ / #BRANDCONF
It’s getting worse:
21 @PIETERJ / #BRANDCONF
2009: bold statement.
22 @PIETERJ / #BRANDCONF
2014: nice white website.
23 @PIETERJ / #BRANDCONF
2009: Clean and unique
24 @PIETERJ / #BRANDCONF
2014: nice white website.
Lands’ end 2009: Wonderful shopping and exploration island, with nice and big photography
Lands’ end 2009: Wonderful shopping and exploration island, with nice and big photography
27 @PIETERJ / #BRANDCONF
2014: nice white website.
28 @PIETERJ / #BRANDCONF
2014: nice white website.
29 @PIETERJ / #BRANDCONF
And why? We can finally measure the rude and impatient behaviour of our customers.
30 @PIETERJ / #BRANDCONF
1 second delay in page response
7% cut in conversions
11% decline in page views
16% deduction in customer satisfaction
31 @PIETERJ / #BRANDCONF
Conversion is king.
So you will have to come to the conclusion:
ON CONVERSION The king, disected.
32 @PIETERJ / #BRANDCONF
33 @PIETERJ / #BRANDCONF
Conversion is koning. …branding!
We have to acknowledge the fact that conversion is also branding. Evidently, someone is had a good enough user experience to actually buy something.
However: our goal is to improve conversion AND create a difference.
34 @PIETERJ / #BRANDCONF
Consider this car, and how we always complain that all cars increasingly look the same. Causes for this are the forces of nature, Wind, gravity, but also legislation. In our case: brain capacity. Creating overview, estimation of goal achievement,
etc. …And there’s another reason.
35
Convention.
Even though you’ve probably never driven this exact type of car, because of convention you probably will be able to.
36 @PIETERJ / #BRANDCONF
Conversion is convention.
…boring?
37 @PIETERJ / #BRANDCONF
Back to the first car. Who knows what type of car this is? How did you see? Yes, the tail light. THAT is the place where the car designers found room to differentiate.
38 @PIETERJ / #BRANDCONF
39 @PIETERJ / #BRANDCONF
? So if birds and cars have found their places of freedom as well as their constraints,
how does that work with fashion web shops? And we’ll go into that.
How do our minds work?
@PIETERJ / #BRANDCONF 40
FAIL
CONVERSION
SOURCE: BJ FOGG BEHAVIORMODEL.ORG (SIMPIFIED)
41 @PIETERJ / #BRANDCONF
USER ABILITY
MO
TIV
AT
ION
WIN M
OT
IVA
TIO
N
USABILITY boring but important
fun!
Suppose above the orange line is a win, so the
customer buys. Below the line we fail, the
customer doesn't buy.
Conversion is achieved by increasing ability (or usability). Boring but important. It leads to
convention, as we’ve seen. But conversion is also
increased by increasing motivation. And that’s much
more fun! Because increasing motivation
requires innovation and doing something different.
42 @PIETERJ / #BRANDCONF
Branding is creating difference
…not boring!
Brands elicit passion if built up right. Brands are essential in many industries, fashion before most :)
44 @PIETERJ / #BRANDCONF
Conversion may be king … … but branding is everything!
ON BRANDING What is a brand anyway?
45 @PIETERJ / #BRANDCONF
46 @PIETERJ / #BRANDCONF
A brand is a network of associations in people’s heads
advertising
shoes
competitive
Davids
football dynamics
Kluivert
Adidas
NL elftal
agressive competition
USA multinational
profit P&G
production
NO logo
Agassi
tennis
Looks messy? It is! But for your brain that’s no problem. It adds all stimuli to create one brand image.
Birkigt & Stadler
Let me introduce to you a very simple model by B&S that we use almost every day.
appearance
communication
behavior
brand
Birkigt&Stadler, 1986
Every brand reaches the market through three dimensions: communication, appearance and behavior (look up their publications for more detail)
appearance
communication
behavior
?
Outside > in
When looking outside> in, you can describe a brand by what it does, looks like and says in the market.
appearance
communication
behavior
brand personality
At every brand’s core: personality. This may be a real personality, such as Paul Gaultier, Karl Lagerfeld or Anna Wintour.
Or it may be more abstract, such as Diesel or Nike.
52 @PIETERJ / #BRANDCONF
So, how to begin…
PERSONALITY INSPIRES
53 @PIETERJ / #BRANDCONF
appearance
communication
behavior
brand personality
Inside > out
You really have to understand who this brand is. And, again, it’s great to actually have a human personality at the center of this.
55 @PIETERJ / #BRANDCONF https://www.youtube.com/watch?v=ZOnMSLSNmWY
56 @PIETERJ / #BRANDCONF
Aaker (1987) has created a map of personality characteristics. With these, we might describe Karl as being original yet sentimental, cool yet imaginative, intelligent yet charming.
57 @PIETERJ / #BRANDCONF
Personality inspires!
58 @PIETERJ / #BRANDCONF
Back to our challenge.
59 @PIETERJ / #BRANDCONF
? How do we create difference?
We’re already narrowing down and we’ve seen the three areas we can work on:
appearance
product information trust & reassurance
SEO
UI patterns grids
product photography
web-safe fonts the “fold”
devices
communication
behavior
brand personality
assortment price & promotions conditions
mobile e-mail facebook
new arrivals mail & social
sale
We still have all these constraints that are so common to ecommerce.
appearance
product information trust & reassurance
SEO
UI patterns grids
product photography
web-safe fonts the “fold”
devices
communication
behavior
brand personality
assortment price & promotions conditions
mobile e-mail facebook
new arrivals mail & social
sale
But there is room beyond all of these!! We’ll now go through these three dimensions, one by one.
?
appearance
communication
behavior
brand personality
@PIETERJ / #BRANDCONF 62
63 @PIETERJ / #BRANDCONF
Story telling
64 @PIETERJ / #BRANDCONF
Rapha, a Dutch sports wear brand, tells stories accompanying many of their products. By doing this in a relevant way, they create added value.
65 @PIETERJ / #BRANDCONF
Nike has traditionally focused on telling stories around new collections.
66 @PIETERJ / #BRANDCONF
…but the shop is never far away. in both cases, users can also shop without having to take in the story content
67 @PIETERJ / #BRANDCONF
Persuasive design
68 @PIETERJ / #BRANDCONF
A nice concept by three-fifty
69 @PIETERJ / #BRANDCONF
scarcity
Notice the SOLD signs? They communicate scarcity.
70 @PIETERJ / #BRANDCONF
However, use with care: now I’m thinking all the good ones have gone!
71 @PIETERJ / #BRANDCONF
Tone of voice & copy
72 @PIETERJ / #BRANDCONF
This is the e-shop of Pharell Williams
73 @PIETERJ / #BRANDCONF
Look what happens when I add something to the basket :))
74 @PIETERJ / #BRANDCONF
Shoedazzle Brand!t
Here the UK startup Brandit tries to learn what is your level of income, in quite an original way!
? appearance
communication
behavior
brand personality
Behavior is the most exciting one by far, Because it’s all about innovation.
76 @PIETERJ / #BRANDCONF
Only dead fish go with the flow.
Innovate or die.
BRANDING BY ADDING VALUE
Commerce Advice
Relation Community
Emotion
77 @PIETERJ / #BRANDCONF
These areas we defined together with a large Dutch retailer. We’ll briefly go through them.
BRANDING BY ADDING VALUE · Commerce · Advice · Relation · Community · Emotion
78 @PIETERJ / #BRANDCONF
BRANDING BY ADDING VALUE · Commerce · Advice · Relation · Community · Emotion
79 @PIETERJ / #BRANDCONF
What you sell determines not only your business but also many other
factors, such as how you look.
BRANDING BY ADDING VALUE · Commerce · Advice · Relation · Community · Emotion
80 @PIETERJ / #BRANDCONF
Use the properties of your collection to create something unique, Greats
Brand shoes do that.
81 @PIETERJ / #BRANDCONF
Selling just one product? You have all freedom of the world :) This effect can be a reason to launch temporary candy shops (as I call them) for a limited collection
BRANDING BY ADDING VALUE · Commerce · Advice · Relation · Community · Emotion
82 @PIETERJ / #BRANDCONF
BRANDING BY ADDING VALUE · Commerce · Advice · Relation · Community · Emotion
83 @PIETERJ / #BRANDCONF
If you have a unique way or see a chance of providing advice, this is an excellent way to differentiate.
BRANDING BY ADDING VALUE · Commerce · Advice · Relation · Community · Emotion
84 @PIETERJ / #BRANDCONF
fitsme.com
Fitsme claim: each visit yielda around $10 in increased conversion
and diminished returns.
85 @PIETERJ / #BRANDCONF
Also relatively conventional inspirational pages might be considered as being advice.
BRANDING BY ADDING VALUE · Commerce · Advice · Relation · Community · Emotion
86 @PIETERJ / #BRANDCONF
BRANDING BY ADDING VALUE · Commerce · Advice · Relation · Community · Emotion
87 @PIETERJ / #BRANDCONF
Again, the UK startup Brandit is a great example.
BRANDING BY ADDING VALUE · Commerce · Advice · Relation · Community · Emotion
88 @PIETERJ / #BRANDCONF
They have an on-boarding process called MALE
BRANDING BY ADDING VALUE · Commerce · Advice · Relation · Community · Emotion
89 @PIETERJ / #BRANDCONF
After registering, there is no shop. Just a chat engine in which you can
ask your question.
BRANDING BY ADDING VALUE · Commerce · Advice · Relation · Community · Emotion
90 @PIETERJ / #BRANDCONF
So, when waking in the city, your phone may buzz and your personal shopper might come back to you
with a suggestion!
BRANDING BY ADDING VALUE · Commerce · Advice · Relation · Community · Emotion
91 @PIETERJ / #BRANDCONF
A couple of years ago, we all thought the world would move into
profiling and customization Right now I see a movement towards human interaction
The cloakroom a nice example from Amsterdam.
STRATEGY FOLLOWS BRAND · Commerce · Advice · Relation · Community · Emotion
92 @PIETERJ / #BRANDCONF
STRATEGY FOLLOWS BRAND · Commerce · Advice · Relation · Community · Emotion
93 @PIETERJ / #BRANDCONF
All brands bring people together. The classic example of building a
community around your brand. They challenge their community to
design T-shirts. The community votes on the
designs, and the succesful designs get produced.
94 @PIETERJ / #BRANDCONF
Besides having these unique and fun challenges…
95 @PIETERJ / #BRANDCONF
…their shop actually conforms to the convention.
96 @PIETERJ / #BRANDCONF
Co-creation. Participative design.
The brand and audience that make together, stay together.
Even if WE’re personally done with words like participative design and cocreation, this is still a large area of branding & conversion opportunity
97 @PIETERJ / #BRANDCONF
Co-creation. Participative design.
The brand and audience that make together, stay together.
BRANDING BY ADDING VALUE · Commerce · Advice · Relation · Community · Emotion
Somewhat disappointing: 92% of retailers share social media
insight with their marketing department
53% with customer service 36% with product development
98 @PIETERJ / #BRANDCONF
BRANDING BY ADDING VALUE · Commerce · Advice · Relation · Community · Emotion
99 @PIETERJ / #BRANDCONF
Finally, as a brand, you might aim to elicit emotions and create
associations based on that.
BRANDING BY ADDING VALUE · Commerce · Advice · Relation · Community · Emotion
100 @PIETERJ / #BRANDCONF
Like Uniqlo. They have a strong history of lifestyle apps that
underline the brand
BRANDING BY ADDING VALUE · Commerce · Advice · Relation · Community · Emotion
101 @PIETERJ / #BRANDCONF
Such as the wakeup app, that actually wakes you up by singing
the weather for you
BRANDING BY ADDING VALUE · Commerce · Advice · Relation · Community · Emotion
102 @PIETERJ / #BRANDCONF
…the gorgeous calendar app…
BRANDING BY ADDING VALUE · Commerce · Advice · Relation · Community · Emotion
103 @PIETERJ / #BRANDCONF
…and currently, their Lifewear cooking app, pairing food with
music and fashion.
BRANDING BY ADDING VALUE · Commerce · Advice · Relation · Community · Emotion
104 @PIETERJ / #BRANDCONF
However, when using the app, the link to lifewear is not clear and kind
of hidden.
BRANDING BY ADDING VALUE
Commerce Advice
Relation Community
Emotion
105 @PIETERJ / #BRANDCONF
? appearance
communication
behavior
brand personality
Next: appearance This is where branding-oriented merchants and designers alike are skidding off the track by the dozens.
DON’T MESS WITH… · Main navigation · Basket top-right · Scannable and
scrollable PLP · Filters left,
maybe top · Clean PDP layout · Size guides &
measurements · The “fold” · ..the buttons.
107 @PIETERJ / #BRANDCONF
Get creative? Watch out, dont mess with things like these.
May seem trivial but I see so many shops violating this!
108 @PIETERJ / #BRANDCONF
it is however all about adopting your own color.
109 @PIETERJ / #BRANDCONF
Some examples from our work
110 @PIETERJ / #BRANDCONF
Designers Victor & Rolf, being a bit perky, decided to ignore all conventions and wanted us to create a round website. But then again, they’re not selling anything :)
111 @PIETERJ / #BRANDCONF
112 @PIETERJ / #BRANDCONF
113 @PIETERJ / #BRANDCONF
114 @PIETERJ / #BRANDCONF
Dutch/European fashion retailer
@PIETERJ / #BRANDCONF 116
When we were asked to create the design for their web store, all the briefing we got was: go visit our store. That’s what we want to see online.
independent, daring,
down-to-earth
In a couple of workshops, we formalized their brand, with these core values
This is the homepage. It was one of our earliest sketches and they wanted it quite badly, even though it went against all rules and conventions for a homepage. Actually it worked very well and had a very low bounce rate.
However after a year, we all got a bit tired of it, so now it’s been replaced anyway.
Beyond that, our client wanted a bright shop that looked dark. Because it is urban myth that bright shops convert better than dark shops.
So we worked very hard with lighting…
…on clothes…
121 @PIETERJ / #BRANDCONF
…and on all elements.
By combining an unusual look with conventional navigation, the shop turned out to be both daring & down to earth.
123 @PIETERJ / #BRANDCONF
Supertrash: independent, engaging and feminine.
124 @PIETERJ / #BRANDCONF
Men-at-Work: Rawness an craftmenship.
125 @PIETERJ / #BRANDCONF
Coolcat. Young and rebellious. And, despite the dark background, quite well converting.
126 @PIETERJ / #BRANDCONF
Mallett, London and NY based, one of the world foremost Antiques dealer. They performed a major market innovation: selling online.
127 @PIETERJ / #BRANDCONF
Mix of traditional values and the oppenness required by today’s ecommerce. In short, we had to create “a museum where you can buy things”.
129 @PIETERJ / #BRANDCONF
Having done a lot of work in the area of heritage, this was a home match in more than one way
@PIETERJ / #BRANDCONF 130
To underline accessablity, we designed the shop tablet first. Large scale controls, very little on the screen at a single time.
131 @PIETERJ / #BRANDCONF
We even crafted a custom typeface to reflect tradition and innovation at the same time.
This is about as far as we’d go in deviating from conventional interface patterns.
133 @PIETERJ / #BRANDCONF
But… can you go overboard?
134 @PIETERJ / #BRANDCONF
Absolutely. How much does this product cost? How do you select a size?
135 @PIETERJ / #BRANDCONF
if you step out of the ordinary its very hard to get it right See this example by PME Legend
Contrast is very very low…
136 @PIETERJ / #BRANDCONF
Even big brands like Calvin Klein have a hard time balancing branding and conversion.
137 @PIETERJ / #BRANDCONF
This plethora of boxes is almost impossible to use. I’m pretty sure conversion for this site is quite low.
138 @PIETERJ / #BRANDCONF
I’m sure you all know this pattern.
139 @PIETERJ / #BRANDCONF
So why is this happening? Fakes are taking over. Because the logo is almost all they had.
140 @PIETERJ / #BRANDCONF
Louis Vuitton goes logo free in China
“At the risk of shocking everyone, the [rate of] sales growth at Louis Vuitton is not a problem,”
said LVMH Chairman and CEO Bernard Arnault at a shareholders’ meeting, stating that slow growth was part of the company’s “deliberate strategy”
to become more exclusive.
So they’re improving branding by removing their logo, think about it. What elements are you overusing that helped you in the past?
✓ appearance
communication
behavior
brand personality
✓
✓ @PIETERJ / #BRANDCONF 142
:) appearance
communication
behavior
brand personality
@PIETERJ / #BRANDCONF 143
144 @PIETERJ / #BRANDCONF
The classic dilemma, at an interface level
145 @PIETERJ / #BRANDCONF
So what if you know a four-column list page will convert better, but you think 3 colums look better?
146 @PIETERJ / #BRANDCONF
What if your designer comes up with an innovative way to turn products, but you fear that some customers will not understand?
147 @PIETERJ / #BRANDCONF
A/B tests. which test won.com
What if you know conversion will increase if you show a mailing list lightbox, but you really hate them
yourself? Then you do AB tests! Most ecommerce managers report that they’re not doing
them, or not enough. Go, people!
148 @PIETERJ / #BRANDCONF
And what about…
149 @PIETERJ / #BRANDCONF
Nice brand videos? Sensational productions! Yes..
150 @PIETERJ / #BRANDCONF
Video is just for fans Research that the Dutch research agency Netmarketing did shows:
Only fans will enjoy them. As long as they’re placed outside of the essential click paths, they won’t hurt other users. Until now, we could measure no positive effect on conversion, but it may be there for fans.
And what about lookbooks?
and other traditional “branding” and “inspirational” content?
20% / +20% “Inspiration”
@PIETERJ / #BRANDCONF 153
Sadly, evidence shows that only 1 out of 5 people are actually interested in them…
20% / +20% basket size
“Inspiration”
@PIETERJ / #BRANDCONF 154
However, after looking at it, they spend 20% more! That’s actually great news :)
SO…
155 @PIETERJ / #BRANDCONF
✓ appearance
communication
behavior
brand personality
✓
✓ @PIETERJ / #BRANDCONF 156
✓
DARE TO DIFFER UNDERSTAND TONE OF VOICE INNOVATE
LOOK DIFFERENT INSPIRE (A BIT) NO DILEMMAS SURVIVE & THRIVE
To sum it up, these are the 8 things you need to know and do to become succesful AND be different online.
@PIETERJ / #BRANDCONF 158
I hope this talk will help you find the competitive edge that really fits YOU.
159 @PIETERJ / #BRANDCONF all content copyright of their respective owners
brands, design & interaction
We are investing in international business. Don’t hesitate to contact us.
Pieter Jongerius @pieterj
160 @PIETERJ / #BRANDCONF
Pieter Jongerius is a partner at the Dutch design agency Fabrique.
Originally an Industrial Design Engineer, he specialized in web design as early as 1996, with a special interest in interaction, strategy and methodology.
Fabrique specializes in strategic design for cross channel B2C communications and employs around 100 people.
In recent years Pieter has specialized in retail & e-commerce and has done
award winning work for national and international companies such as Heineken, Sony Music, SuperTrash, Hunkemöller, The Sting and more.
Pieter is main author of the book "Get Agile! Scrum for UX and Development" and has been a pioneer of using Scrum in design and development projects since
2008.