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 has brought together the worlds of fashion, touchpoint strategy and e-commerce design. It contains a very concrete approach to obtaining success in fashion e-commerce, illustrated with recent best practices.
Fashion E-commerce - Conversion versus branding? (SXSW 2014 talk by Pieter Jongerius)
1. 1
- Pieter Jongerius -
FASHION E-COMMERCE
CONVERSION VS. BRANDING?
Survival of the fittest
2. 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.
@PIETERJ / #BRANDCONF 2
3. Conversion and branding go hand in hand
Our challenge
Conversion
Branding
Model
Three areas of interest
@PIETERJ / #BRANDCONF 3
4. At Fabrique, we specialize in
Brand driven design
@PIETERJ / #BRANDCONF 4
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
@PIETERJ / #BRANDCONF 5
6. In Fashion, as in many industries, our main way of creating a difference is through our products.
7. 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
12. So for H&M, its relatively simple to associate themselves with higher-end fashion brands by doing the same.
13. Even Diesel, who recently tried a significantly different style,
14. …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. Even net-a-porter know that they have to use a lot of room as soon as they enter the physical realm.
@PIETERJ / #BRANDCONF 15
16. …as they do in Porter, their magazine.
@PIETERJ / #BRANDCONF 16
33. Conversion is …konbirnagn. ding!
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.
@PIETERJ / #BRANDCONF 33
34. 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.
@PIETERJ / #BRANDCONF 34
35. 35
Convention.
Even though you’ve probably never driven this exact type of car, because of convention you probably will be able to.
37. 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.
@PIETERJ / #BRANDCONF 37
39. ?
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.
@PIETERJ / #BRANDCONF 39
40. How do our minds work?
@PIETERJ / #BRANDCONF 40
41. CONVERSION
FAIL
WIN
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.
boring but important
SOURCE: BJ FOGG BEHAVIORMODEL.ORG (SIMPIFIED)
USER ABILITY
MOTIVATION
MOTIVATION
USABILITY
fun!
@PIETERJ / #BRANDCONF 41
46. A brand is a network of associations in people’s heads
@PIETERJ / #BRANDCONF 46
47. advertising
shoes
competitive
football
Davids
dynamics
Kluivert
Adidas
NL elftal
production
USA multinational
profit P&G
agressive competition
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.
48. Birkigt & Stadler
Let me introduce to you a very simple model by B&S that we use almost every day.
49. Birkigt&Stadler, 1986
communication
brand
appearance
behavior
Every brand reaches the market through three dimensions: communication, appearance and behavior
(look up their publications for more detail)
50. communication
appearance
behavior
?
Outside > in
When looking outside> in, you can describe a brand by what it does, looks like and says in the market.
51. communication
brand
personality
appearance
behavior
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.
54. communication
brand
personality
appearance
Inside > out
behavior
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.
56. 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.
@PIETERJ / #BRANDCONF 56
58. Back to our challenge.
@PIETERJ / #BRANDCONF 58
59. ?
How do we create difference?
We’re already narrowing down and we’ve seen the three areas we can work on:
@PIETERJ / #BRANDCONF 59
60. product information
trust & reassurance
SEO
brand
new arrivals
mail & social
personality
appearance
UI patterns
grids
product photography
web-safe fonts
the “fold”
devices
sale
communication
behavior
assortment
price & promotions
conditions
mobile
e-mail
facebook
We still have all these constraints that are so common to ecommerce.
61. product information
trust & reassurance
SEO
brand
new arrivals
mail & social
personality
appearance
UI patterns
grids
product photography
web-safe fonts
the “fold”
devices
sale
communication
behavior
assortment
price & promotions
conditions
mobile
e-mail
facebook
But there is room beyond all of these!!
We’ll now go through these three dimensions, one by one.
64. Rapha, a Dutch sports wear brand, tells stories accompanying many of their products.
By doing this in a relevant way, they create added value.
@PIETERJ / #BRANDCONF 64
65. Nike has traditionally focused on telling stories around new collections.
@PIETERJ / #BRANDCONF 65
66. …but the shop is never far away.
in both cases, users can also shop without having to take in the story content
@PIETERJ / #BRANDCONF 66
72. This is the e-shop of Pharell Williams
@PIETERJ / #BRANDCONF 72
73. Look what happens when I add something to the basket
:))
@PIETERJ / #BRANDCONF 73
74. Shoedazzle
Brand!t
Here the UK startup Brandit tries to learn what is your level of income, in quite an original way!
@PIETERJ / #BRANDCONF 74
75. ?
communication
brand
personality
appearance
behavior
Behavior is the most exciting one by far,
Because it’s all about innovation.
76. Only dead fish go with the flow.
Innovate or die.
@PIETERJ / #BRANDCONF 76
77. BRANDING BY ADDING VALUE
Commerce
Advice
Relation
Community
Emotion
These areas we defined together with a large Dutch retailer.
We’ll briefly go through them.
@PIETERJ / #BRANDCONF 77
78. BRANDING BY ADDING VALUE
· Commerce
· Advice
· Relation
· Community
· Emotion
@PIETERJ / #BRANDCONF 78
79. BRANDING BY ADDING VALUE
· Commerce
· Advice
· Relation
· Community
· Emotion
What you sell determines not only
your business but also many other
factors, such as how you look.
@PIETERJ / #BRANDCONF 79
80. BRANDING BY ADDING VALUE
· Commerce
· Advice
· Relation
· Community
· Emotion
Use the properties of your collection
to create something unique, Greats
Brand shoes do that.
@PIETERJ / #BRANDCONF 80
81. 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
@PIETERJ / #BRANDCONF 81
82. BRANDING BY ADDING VALUE
· Commerce
· Advice
· Relation
· Community
· Emotion
@PIETERJ / #BRANDCONF 82
83. BRANDING BY ADDING VALUE
· Commerce
· Advice
· Relation
· Community
· Emotion
If you have a unique way or see a
chance of providing advice, this is
an excellent way to differentiate.
@PIETERJ / #BRANDCONF 83
84. BRANDING BY ADDING VALUE
· Commerce
fitsme.com
· Advice
· Relation
· Community
· Emotion
Fitsme claim: each visit yielda
around $10 in increased conversion
and diminished returns.
@PIETERJ / #BRANDCONF 84
86. BRANDING BY ADDING VALUE
· Commerce
· Advice
· Relation
· Community
· Emotion
@PIETERJ / #BRANDCONF 86
87. BRANDING BY ADDING VALUE
· Commerce
· Advice
· Relation
· Community
· Emotion
Again, the UK startup Brandit is a
great example.
@PIETERJ / #BRANDCONF 87
88. BRANDING BY ADDING VALUE
· Commerce
· Advice
· Relation
· Community
· Emotion
They have an on-boarding process
called MALE
@PIETERJ / #BRANDCONF 88
89. BRANDING BY ADDING VALUE
· Commerce
· Advice
· Relation
· Community
· Emotion
After registering, there is no shop.
Just a chat engine in which you can
ask your question.
@PIETERJ / #BRANDCONF 89
90. BRANDING BY ADDING VALUE
· Commerce
· Advice
· Relation
· Community
· Emotion
So, when waking in the city, your
phone may buzz and your personal
shopper might come back to you
with a suggestion!
@PIETERJ / #BRANDCONF 90
91. BRANDING BY ADDING VALUE
· Commerce
· Advice
· Relation
· Community
· Emotion
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.
@PIETERJ / #BRANDCONF 91
93. STRATEGY FOLLOWS BRAND
· Commerce
· Advice
· Relation
· Community
· Emotion
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.
@PIETERJ / #BRANDCONF 93
96. 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
@PIETERJ / #BRANDCONF 96
98. BRANDING BY ADDING VALUE
· Commerce
Somewhat disappointing:
· Advice
· Relation
· Community
· Emotion
92% of retailers share social media
insight with their marketing
department
53% with customer service
36% with product development
@PIETERJ / #BRANDCONF 98
99. BRANDING BY ADDING VALUE
· Commerce
· Advice
· Relation
· Community
· Emotion
Finally, as a brand, you might aim to
elicit emotions and create
associations based on that.
@PIETERJ / #BRANDCONF 99
100. BRANDING BY ADDING VALUE
· Commerce
· Advice
· Relation
· Community
· Emotion
Like Uniqlo. They have a strong
history of lifestyle apps that
underline the brand
@PIETERJ / #BRANDCONF 100
101. BRANDING BY ADDING VALUE
· Commerce
· Advice
· Relation
· Community
· Emotion
Such as the wakeup app, that
actually wakes you up by singing
the weather for you
@PIETERJ / #BRANDCONF 101
102. BRANDING BY ADDING VALUE
· Commerce
· Advice
· Relation
· Community
· Emotion
…the gorgeous calendar app…
@PIETERJ / #BRANDCONF 102
103. BRANDING BY ADDING VALUE
· Commerce
· Advice
· Relation
· Community
· Emotion
…and currently, their Lifewear
cooking app, pairing food with
music and fashion.
@PIETERJ / #BRANDCONF 103
104. BRANDING BY ADDING VALUE
· Commerce
· Advice
· Relation
· Community
· Emotion
However, when using the app, the
link to lifewear is not clear and kind
of hidden.
@PIETERJ / #BRANDCONF 104
105. BRANDING BY ADDING VALUE
Commerce
Advice
Relation
Community
Emotion
@PIETERJ / #BRANDCONF 105
106. ?
communication
brand
personality
appearance
behavior
Next: appearance
This is where branding-oriented merchants and designers alike are skidding off the track by the dozens.
107. 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.
Get creative?
Watch out, dont mess with things like these.
May seem trivial but I see so many shops violating this!
@PIETERJ / #BRANDCONF 107
108. it is however all about adopting your own color.
@PIETERJ / #BRANDCONF 108
110. 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 :)
@PIETERJ / #BRANDCONF 110
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.
@PIETERJ / #BRANDCONF 116
118. 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.
119. 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…
125. Coolcat. Young and rebellious.
And, despite the dark background, quite well converting.
@PIETERJ / #BRANDCONF 125
126. Mallett, London and NY based, one of the world foremost Antiques dealer.
They performed a major market innovation: selling online.
@PIETERJ / #BRANDCONF 126
128. 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. Having done a lot of work in the area of heritage, this was a home match in more than one way
@PIETERJ / #BRANDCONF 129
130. To underline accessablity, we designed the shop tablet first.
Large scale controls, very little on the screen at a single time.
@PIETERJ / #BRANDCONF 130
131. We even crafted a custom typeface to reflect tradition and innovation at the same time.
@PIETERJ / #BRANDCONF 131
132. This is about as far as we’d go in deviating from conventional interface patterns.
133. But… can you go overboard?
@PIETERJ / #BRANDCONF 133
134. Absolutely.
How much does this product cost? How do you select a size?
@PIETERJ / #BRANDCONF 134
135. 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…
@PIETERJ / #BRANDCONF 135
136. Even big brands like Calvin Klein have a hard time balancing branding and conversion.
@PIETERJ / #BRANDCONF 136
137. This plethora of boxes is almost impossible to use.
I’m pretty sure conversion for this site is quite low.
@PIETERJ / #BRANDCONF 137
138. I’m sure you all know this pattern.
@PIETERJ / #BRANDCONF 138
139. So why is this happening?
Fakes are taking over. Because the logo is almost all they had.
@PIETERJ / #BRANDCONF 139
140. 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.
@PIETERJ / #BRANDCONF 140
141. So they’re improving branding by removing their logo, think about it.
What elements are you overusing that helped you in the past?
145. So what if you know a four-column list page will convert better, but you think 3 colums look better?
@PIETERJ / #BRANDCONF 145
146. What if your designer comes up with an innovative way to turn products,
but you fear that some customers will not understand?
@PIETERJ / #BRANDCONF 146
147. 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!
@PIETERJ / #BRANDCONF 147
150. 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.
@PIETERJ / #BRANDCONF 150
157. DARE TO DIFFER UNDERSTAND TONE OF VOICE INNOVATE
To sum it up, these are the 8 things you need to know and do to become succesful AND be different online.
LOOK DIFFERENT INSPIRE (A BIT) NO DILEMMAS SURVIVE & THRIVE
158. I hope this talk will help you find the competitive edge that really fits YOU.
@PIETERJ / #BRANDCONF 158
159. brands, design & interaction
We are investing in international business. Don’t hesitate to contact us.
@PIETERJ / #BRANDCONF 159
all content copyright of their respective owners
Pieter
Jongerius
@pieterj
160. 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.
@PIETERJ / #BRANDCONF 160