Your SlideShare is downloading. ×
0
1 
- Pieter Jongerius - 
FASHION E-COMMERCE 
CONVERSION VS. BRANDING? 
Survival of the fittest
In fashion, perhaps more than anywhere else, branding is everything. 
Many fashion brands have spent decades building up a...
Conversion and branding go hand in hand 
Our challenge 
Conversion 
Branding 
Model 
Three areas of interest 
@PIETERJ / #...
At Fabrique, we specialize in 
Brand driven design 
@PIETERJ / #BRANDCONF 4
I often compare the challenge that our clients have with that of birds of paradise. 
They have to comply to a lot of thing...
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 in...
…and that they’re still continuing.
And they’re not the only one. 
@PIETERJ / #BRANDCONF 9
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 bes...
Even net-a-porter know that they have to use a lot of room as soon as they enter the physical realm. 
@PIETERJ / #BRANDCON...
…as they do in Porter, their magazine. 
@PIETERJ / #BRANDCONF 16
…but not online. 
Why? 
@PIETERJ / #BRANDCONF 17
BRANDING VS. CONVERSION? 
if you look at this, it comes as no surprise that especially in Fashion ecommerce, this paradox ...
Increasingly, patterns SEEM to be the enemy 
of creativity and innovation 
@PIETERJ / #BRANDCONF 19
It’s getting worse: 
@PIETERJ / #BRANDCONF 20
2009: bold statement. 
@PIETERJ / #BRANDCONF 21
2014: nice white website. 
@PIETERJ / #BRANDCONF 22
2009: Clean and unique 
@PIETERJ / #BRANDCONF 23
2014: nice white website. 
@PIETERJ / #BRANDCONF 24
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
2014: nice white website. 
@PIETERJ / #BRANDCONF 27
2014: nice white website. 
@PIETERJ / #BRANDCONF 28
And why? 
We can finally measure the rude and impatient behaviour of our customers. 
@PIETERJ / #BRANDCONF 29
1 
second delay in page response 
7% cut in conversions 
11% decline in page views 
16% deduction in customer satisfaction...
Conversion is king. 
So you will have to come to the conclusion: 
@PIETERJ / #BRANDCONF 31
ON CONVERSION 
The king, disected. 
@PIETERJ / #BRANDCONF 32
Conversion is …konbirnagn. ding! 
We have to acknowledge the fact that conversion is also branding. 
Evidently, someone is...
Consider this car, and how we always complain that all cars increasingly look the same. Causes for this are the forces of ...
35 
Convention. 
Even though you’ve probably never driven this exact type of car, because of convention you probably will ...
Conversion is convention. 
…boring? 
@PIETERJ / #BRANDCONF 36
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...
@PIETERJ / #BRANDCONF 38
? 
So if birds and cars have found their places of freedom as well as their constraints, 
how does that work with fashion ...
How do our minds work? 
@PIETERJ / #BRANDCONF 40
CONVERSION 
FAIL 
WIN 
Suppose above the orange 
line is a win, so the 
customer buys. 
Below the line we fail, the 
custo...
Branding is creating difference 
…not boring! 
@PIETERJ / #BRANDCONF 42
Brands elicit passion if built up right. Brands are essential in many industries, fashion before most :)
Conversion may be king … 
… but branding is everything! 
@PIETERJ / #BRANDCONF 44
ON BRANDING 
What is a brand anyway? 
@PIETERJ / #BRANDCONF 45
A brand is a network of associations in people’s heads 
@PIETERJ / #BRANDCONF 46
advertising 
shoes 
competitive 
football 
Davids 
dynamics 
Kluivert 
Adidas 
NL elftal 
production 
USA multinational 
p...
Birkigt & Stadler 
Let me introduce to you a very simple model by B&S that we use almost every day.
Birkigt&Stadler, 1986 
communication 
brand 
appearance 
behavior 
Every brand reaches the market through three dimensions...
communication 
appearance 
behavior 
? 
Outside > in 
When looking outside> in, you can describe a brand by what it does, ...
communication 
brand 
personality 
appearance 
behavior 
At every brand’s core: personality. 
This may be a real personali...
So, how to begin… 
@PIETERJ / #BRANDCONF 52
PERSONALITY INSPIRES 
@PIETERJ / #BRANDCONF 53
communication 
brand 
personality 
appearance 
Inside > out 
behavior 
You really have to understand who this brand is. 
A...
@PIETERJ / #BRANDCONF https://www.youtube.com/watch?v=ZOnMSLSNmWY 55
Aaker (1987) has created a map of personality characteristics. With these, we might describe Karl as being 
original yet s...
Personality inspires! 
@PIETERJ / #BRANDCONF 57
Back to our challenge. 
@PIETERJ / #BRANDCONF 58
? 
How do we create difference? 
We’re already narrowing down and we’ve seen the three areas we can work on: 
@PIETERJ / #...
product information 
trust & reassurance 
SEO 
brand 
new arrivals 
mail & social 
personality 
appearance 
UI patterns 
g...
product information 
trust & reassurance 
SEO 
brand 
new arrivals 
mail & social 
personality 
appearance 
UI patterns 
g...
? 
communication 
brand 
personality 
appearance 
behavior 
@PIETERJ / #BRANDCONF 62
Story telling 
@PIETERJ / #BRANDCONF 63
Rapha, a Dutch sports wear brand, tells stories accompanying many of their products. 
By doing this in a relevant way, the...
Nike has traditionally focused on telling stories around new collections. 
@PIETERJ / #BRANDCONF 65
…but the shop is never far away. 
in both cases, users can also shop without having to take in the story content 
@PIETERJ...
Persuasive design 
@PIETERJ / #BRANDCONF 67
A nice concept by three-fifty 
@PIETERJ / #BRANDCONF 68
scarcity 
Notice the SOLD signs? They communicate scarcity. 
@PIETERJ / #BRANDCONF 69
However, use with care: now I’m thinking all the good ones have gone! 
@PIETERJ / #BRANDCONF 70
Tone of voice & copy 
@PIETERJ / #BRANDCONF 71
This is the e-shop of Pharell Williams 
@PIETERJ / #BRANDCONF 72
Look what happens when I add something to the basket 
:)) 
@PIETERJ / #BRANDCONF 73
Shoedazzle 
Brand!t 
Here the UK startup Brandit tries to learn what is your level of income, in quite an original way! 
@...
? 
communication 
brand 
personality 
appearance 
behavior 
Behavior is the most exciting one by far, 
Because it’s all ab...
Only dead fish go with the flow. 
Innovate or die. 
@PIETERJ / #BRANDCONF 76
BRANDING BY ADDING VALUE 
Commerce 
Advice 
Relation 
Community 
Emotion 
These areas we defined together with a large Dut...
BRANDING BY ADDING VALUE 
· Commerce 
· Advice 
· Relation 
· Community 
· Emotion 
@PIETERJ / #BRANDCONF 78
BRANDING BY ADDING VALUE 
· Commerce 
· Advice 
· Relation 
· Community 
· Emotion 
What you sell determines not only 
you...
BRANDING BY ADDING VALUE 
· Commerce 
· Advice 
· Relation 
· Community 
· Emotion 
Use the properties of your collection ...
Selling just one product? You have all freedom of the world :) 
This effect can be a reason to launch temporary candy shop...
BRANDING BY ADDING VALUE 
· Commerce 
· Advice 
· Relation 
· Community 
· Emotion 
@PIETERJ / #BRANDCONF 82
BRANDING BY ADDING VALUE 
· Commerce 
· Advice 
· Relation 
· Community 
· Emotion 
If you have a unique way or see a 
cha...
BRANDING BY ADDING VALUE 
· Commerce 
fitsme.com 
· Advice 
· Relation 
· Community 
· Emotion 
Fitsme claim: each visit y...
Also relatively conventional inspirational pages might be considered as being advice. 
@PIETERJ / #BRANDCONF 85
BRANDING BY ADDING VALUE 
· Commerce 
· Advice 
· Relation 
· Community 
· Emotion 
@PIETERJ / #BRANDCONF 86
BRANDING BY ADDING VALUE 
· Commerce 
· Advice 
· Relation 
· Community 
· Emotion 
Again, the UK startup Brandit is a 
gr...
BRANDING BY ADDING VALUE 
· Commerce 
· Advice 
· Relation 
· Community 
· Emotion 
They have an on-boarding process 
call...
BRANDING BY ADDING VALUE 
· Commerce 
· Advice 
· Relation 
· Community 
· Emotion 
After registering, there is no shop. 
...
BRANDING BY ADDING VALUE 
· Commerce 
· Advice 
· Relation 
· Community 
· Emotion 
So, when waking in the city, your 
pho...
BRANDING BY ADDING VALUE 
· Commerce 
· Advice 
· Relation 
· Community 
· Emotion 
A couple of years ago, we all 
thought...
STRATEGY FOLLOWS BRAND 
· Commerce 
· Advice 
· Relation 
· Community 
· Emotion 
@PIETERJ / #BRANDCONF 92
STRATEGY FOLLOWS BRAND 
· Commerce 
· Advice 
· Relation 
· Community 
· Emotion 
All brands bring people together. 
The c...
Besides having these unique and fun challenges… 
@PIETERJ / #BRANDCONF 94
…their shop actually conforms to the convention. 
@PIETERJ / #BRANDCONF 95
Co-creation. Participative design. 
The brand and audience 
that make together, stay together. 
Even if WE’re personally d...
Co-creation. Participative design. 
The brand and audience 
that make together, stay together. 
@PIETERJ / #BRANDCONF 97
BRANDING BY ADDING VALUE 
· Commerce 
Somewhat disappointing: 
· Advice 
· Relation 
· Community 
· Emotion 
92% of retail...
BRANDING BY ADDING VALUE 
· Commerce 
· Advice 
· Relation 
· Community 
· Emotion 
Finally, as a brand, you might aim to ...
BRANDING BY ADDING VALUE 
· Commerce 
· Advice 
· Relation 
· Community 
· Emotion 
Like Uniqlo. They have a strong 
histo...
BRANDING BY ADDING VALUE 
· Commerce 
· Advice 
· Relation 
· Community 
· Emotion 
Such as the wakeup app, that 
actually...
BRANDING BY ADDING VALUE 
· Commerce 
· Advice 
· Relation 
· Community 
· Emotion 
…the gorgeous calendar app… 
@PIETERJ ...
BRANDING BY ADDING VALUE 
· Commerce 
· Advice 
· Relation 
· Community 
· Emotion 
…and currently, their Lifewear 
cookin...
BRANDING BY ADDING VALUE 
· Commerce 
· Advice 
· Relation 
· Community 
· Emotion 
However, when using the app, the 
link...
BRANDING BY ADDING VALUE 
Commerce 
Advice 
Relation 
Community 
Emotion 
@PIETERJ / #BRANDCONF 105
? 
communication 
brand 
personality 
appearance 
behavior 
Next: appearance 
This is where branding-oriented merchants an...
DON’T MESS WITH… 
· Main navigation 
· Basket top-right 
· Scannable and 
scrollable PLP 
· Filters left, 
maybe top 
· Cl...
it is however all about adopting your own color. 
@PIETERJ / #BRANDCONF 108
Some examples from our work 
@PIETERJ / #BRANDCONF 109
Designers Victor & Rolf, being a bit perky, decided to ignore all conventions and wanted us to create a round website. 
Bu...
@PIETERJ / #BRANDCONF 111
@PIETERJ / #BRANDCONF 112
@PIETERJ / #BRANDCONF 113
@PIETERJ / #BRANDCONF 114
Dutch/European fashion retailer
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...
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 ...
Beyond that, our client wanted a bright shop that looked dark. 
Because it is urban myth that bright shops convert better ...
…on clothes…
…and on all elements. 
@PIETERJ / #BRANDCONF 121
By combining an unusual look with conventional navigation, 
the shop turned out to be both daring & down to earth.
Supertrash: independent, engaging and feminine. 
@PIETERJ / #BRANDCONF 123
Men-at-Work: Rawness an craftmenship. 
@PIETERJ / #BRANDCONF 124
Coolcat. Young and rebellious. 
And, despite the dark background, quite well converting. 
@PIETERJ / #BRANDCONF 125
Mallett, London and NY based, one of the world foremost Antiques dealer. 
They performed a major market innovation: sellin...
@PIETERJ / #BRANDCONF 127
Mix of traditional values and the oppenness required by today’s ecommerce. 
In short, we had to create “a museum where you...
Having done a lot of work in the area of heritage, this was a home match in more than one way 
@PIETERJ / #BRANDCONF 129
To underline accessablity, we designed the shop tablet first. 
Large scale controls, very little on the screen at a single...
We even crafted a custom typeface to reflect tradition and innovation at the same time. 
@PIETERJ / #BRANDCONF 131
This is about as far as we’d go in deviating from conventional interface patterns.
But… can you go overboard? 
@PIETERJ / #BRANDCONF 133
Absolutely. 
How much does this product cost? How do you select a size? 
@PIETERJ / #BRANDCONF 134
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… ...
Even big brands like Calvin Klein have a hard time balancing branding and conversion. 
@PIETERJ / #BRANDCONF 136
This plethora of boxes is almost impossible to use. 
I’m pretty sure conversion for this site is quite low. 
@PIETERJ / #B...
I’m sure you all know this pattern. 
@PIETERJ / #BRANDCONF 138
So why is this happening? 
Fakes are taking over. Because the logo is almost all they had. 
@PIETERJ / #BRANDCONF 139
Louis Vuitton goes logo free in China 
“At the risk of shocking everyone, the [rate of] 
sales growth at Louis Vuitton is ...
So they’re improving branding by removing their logo, think about it. 
What elements are you overusing that helped you in ...
✓ 
communication 
brand 
personality 
appearance 
behavior 
✓ ✓ 
@PIETERJ / #BRANDCONF 142
:) 
communication 
brand 
personality 
appearance 
behavior 
@PIETERJ / #BRANDCONF 143
The classic dilemma, at an interface level 
@PIETERJ / #BRANDCONF 144
So what if you know a four-column list page will convert better, but you think 3 colums look better? 
@PIETERJ / #BRANDCON...
What if your designer comes up with an innovative way to turn products, 
but you fear that some customers will not underst...
A/B tests. 
which test won.com 
What if you know conversion will 
increase if you show a mailing list 
lightbox, but you r...
And what about… 
@PIETERJ / #BRANDCONF 148
Nice brand videos? 
Sensational productions! Yes.. 
@PIETERJ / #BRANDCONF 149
Video is just for fans Research that the Dutch research agency Netmarketing did shows: 
Only fans will enjoy them. As long...
And what about lookbooks?
and other traditional “branding” and “inspirational” content?
“Inspiration” 
20% / +20% 
Sadly, evidence shows that only 1 out of 5 people are actually interested in them… 
@PIETERJ / ...
20% / +20% 
basket size 
“Inspiration” 
However, after looking at it, they spend 20% more! That’s actually great news :) 
...
SO… 
@PIETERJ / #BRANDCONF 155
✓ 
communication 
brand 
personality 
appearance 
behavior 
✓ ✓ 
✓ 
@PIETERJ / #BRANDCONF 156
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 s...
I hope this talk will help you find the competitive edge that really fits YOU. 
@PIETERJ / #BRANDCONF 158
brands, design & interaction 
We are investing in international business. Don’t hesitate to contact us. 
@PIETERJ / #BRAND...
Pieter Jongerius is a partner at the Dutch design agency Fabrique. 
Originally an Industrial Design Engineer, he specializ...
Upcoming SlideShare
Loading in...5
×

Fashion E-commerce - Conversion versus branding? (SXSW 2014 talk by Pieter Jongerius)

10,584

Published on

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.

Published in: Design

Transcript of "Fashion E-commerce - Conversion versus branding? (SXSW 2014 talk by Pieter Jongerius)"

  1. 1. 1 - Pieter Jongerius - FASHION E-COMMERCE CONVERSION VS. BRANDING? Survival of the fittest
  2. 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. 3. Conversion and branding go hand in hand Our challenge Conversion Branding Model Three areas of interest @PIETERJ / #BRANDCONF 3
  4. 4. At Fabrique, we specialize in Brand driven design @PIETERJ / #BRANDCONF 4
  5. 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. 6. In Fashion, as in many industries, our main way of creating a difference is through our products.
  7. 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
  8. 8. …and that they’re still continuing.
  9. 9. And they’re not the only one. @PIETERJ / #BRANDCONF 9
  10. 10. Big photo, small logo
  11. 11. Big photo, small logo
  12. 12. So for H&M, its relatively simple to associate themselves with higher-end fashion brands by doing the same.
  13. 13. Even Diesel, who recently tried a significantly different style,
  14. 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. 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. 16. …as they do in Porter, their magazine. @PIETERJ / #BRANDCONF 16
  17. 17. …but not online. Why? @PIETERJ / #BRANDCONF 17
  18. 18. BRANDING VS. CONVERSION? if you look at this, it comes as no surprise that especially in Fashion ecommerce, this paradox emerges:
  19. 19. Increasingly, patterns SEEM to be the enemy of creativity and innovation @PIETERJ / #BRANDCONF 19
  20. 20. It’s getting worse: @PIETERJ / #BRANDCONF 20
  21. 21. 2009: bold statement. @PIETERJ / #BRANDCONF 21
  22. 22. 2014: nice white website. @PIETERJ / #BRANDCONF 22
  23. 23. 2009: Clean and unique @PIETERJ / #BRANDCONF 23
  24. 24. 2014: nice white website. @PIETERJ / #BRANDCONF 24
  25. 25. Lands’ end 2009: Wonderful shopping and exploration island, with nice and big photography
  26. 26. Lands’ end 2009: Wonderful shopping and exploration island, with nice and big photography
  27. 27. 2014: nice white website. @PIETERJ / #BRANDCONF 27
  28. 28. 2014: nice white website. @PIETERJ / #BRANDCONF 28
  29. 29. And why? We can finally measure the rude and impatient behaviour of our customers. @PIETERJ / #BRANDCONF 29
  30. 30. 1 second delay in page response 7% cut in conversions 11% decline in page views 16% deduction in customer satisfaction @PIETERJ / #BRANDCONF 30
  31. 31. Conversion is king. So you will have to come to the conclusion: @PIETERJ / #BRANDCONF 31
  32. 32. ON CONVERSION The king, disected. @PIETERJ / #BRANDCONF 32
  33. 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. 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. 35 Convention. Even though you’ve probably never driven this exact type of car, because of convention you probably will be able to.
  36. 36. Conversion is convention. …boring? @PIETERJ / #BRANDCONF 36
  37. 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
  38. 38. @PIETERJ / #BRANDCONF 38
  39. 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. 40. How do our minds work? @PIETERJ / #BRANDCONF 40
  41. 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
  42. 42. Branding is creating difference …not boring! @PIETERJ / #BRANDCONF 42
  43. 43. Brands elicit passion if built up right. Brands are essential in many industries, fashion before most :)
  44. 44. Conversion may be king … … but branding is everything! @PIETERJ / #BRANDCONF 44
  45. 45. ON BRANDING What is a brand anyway? @PIETERJ / #BRANDCONF 45
  46. 46. A brand is a network of associations in people’s heads @PIETERJ / #BRANDCONF 46
  47. 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. 48. Birkigt & Stadler Let me introduce to you a very simple model by B&S that we use almost every day.
  49. 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. 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. 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.
  52. 52. So, how to begin… @PIETERJ / #BRANDCONF 52
  53. 53. PERSONALITY INSPIRES @PIETERJ / #BRANDCONF 53
  54. 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.
  55. 55. @PIETERJ / #BRANDCONF https://www.youtube.com/watch?v=ZOnMSLSNmWY 55
  56. 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
  57. 57. Personality inspires! @PIETERJ / #BRANDCONF 57
  58. 58. Back to our challenge. @PIETERJ / #BRANDCONF 58
  59. 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. 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. 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.
  62. 62. ? communication brand personality appearance behavior @PIETERJ / #BRANDCONF 62
  63. 63. Story telling @PIETERJ / #BRANDCONF 63
  64. 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. 65. Nike has traditionally focused on telling stories around new collections. @PIETERJ / #BRANDCONF 65
  66. 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
  67. 67. Persuasive design @PIETERJ / #BRANDCONF 67
  68. 68. A nice concept by three-fifty @PIETERJ / #BRANDCONF 68
  69. 69. scarcity Notice the SOLD signs? They communicate scarcity. @PIETERJ / #BRANDCONF 69
  70. 70. However, use with care: now I’m thinking all the good ones have gone! @PIETERJ / #BRANDCONF 70
  71. 71. Tone of voice & copy @PIETERJ / #BRANDCONF 71
  72. 72. This is the e-shop of Pharell Williams @PIETERJ / #BRANDCONF 72
  73. 73. Look what happens when I add something to the basket :)) @PIETERJ / #BRANDCONF 73
  74. 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. 75. ? communication brand personality appearance behavior Behavior is the most exciting one by far, Because it’s all about innovation.
  76. 76. Only dead fish go with the flow. Innovate or die. @PIETERJ / #BRANDCONF 76
  77. 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. 78. BRANDING BY ADDING VALUE · Commerce · Advice · Relation · Community · Emotion @PIETERJ / #BRANDCONF 78
  79. 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. 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. 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. 82. BRANDING BY ADDING VALUE · Commerce · Advice · Relation · Community · Emotion @PIETERJ / #BRANDCONF 82
  83. 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. 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
  85. 85. Also relatively conventional inspirational pages might be considered as being advice. @PIETERJ / #BRANDCONF 85
  86. 86. BRANDING BY ADDING VALUE · Commerce · Advice · Relation · Community · Emotion @PIETERJ / #BRANDCONF 86
  87. 87. BRANDING BY ADDING VALUE · Commerce · Advice · Relation · Community · Emotion Again, the UK startup Brandit is a great example. @PIETERJ / #BRANDCONF 87
  88. 88. BRANDING BY ADDING VALUE · Commerce · Advice · Relation · Community · Emotion They have an on-boarding process called MALE @PIETERJ / #BRANDCONF 88
  89. 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. 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. 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
  92. 92. STRATEGY FOLLOWS BRAND · Commerce · Advice · Relation · Community · Emotion @PIETERJ / #BRANDCONF 92
  93. 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
  94. 94. Besides having these unique and fun challenges… @PIETERJ / #BRANDCONF 94
  95. 95. …their shop actually conforms to the convention. @PIETERJ / #BRANDCONF 95
  96. 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
  97. 97. Co-creation. Participative design. The brand and audience that make together, stay together. @PIETERJ / #BRANDCONF 97
  98. 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. 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. 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. 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. 102. BRANDING BY ADDING VALUE · Commerce · Advice · Relation · Community · Emotion …the gorgeous calendar app… @PIETERJ / #BRANDCONF 102
  103. 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. 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. 105. BRANDING BY ADDING VALUE Commerce Advice Relation Community Emotion @PIETERJ / #BRANDCONF 105
  106. 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. 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. 108. it is however all about adopting your own color. @PIETERJ / #BRANDCONF 108
  109. 109. Some examples from our work @PIETERJ / #BRANDCONF 109
  110. 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
  111. 111. @PIETERJ / #BRANDCONF 111
  112. 112. @PIETERJ / #BRANDCONF 112
  113. 113. @PIETERJ / #BRANDCONF 113
  114. 114. @PIETERJ / #BRANDCONF 114
  115. 115. Dutch/European fashion retailer
  116. 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
  117. 117. independent, daring, down-to-earth In a couple of workshops, we formalized their brand, with these core values
  118. 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. 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…
  120. 120. …on clothes…
  121. 121. …and on all elements. @PIETERJ / #BRANDCONF 121
  122. 122. By combining an unusual look with conventional navigation, the shop turned out to be both daring & down to earth.
  123. 123. Supertrash: independent, engaging and feminine. @PIETERJ / #BRANDCONF 123
  124. 124. Men-at-Work: Rawness an craftmenship. @PIETERJ / #BRANDCONF 124
  125. 125. Coolcat. Young and rebellious. And, despite the dark background, quite well converting. @PIETERJ / #BRANDCONF 125
  126. 126. Mallett, London and NY based, one of the world foremost Antiques dealer. They performed a major market innovation: selling online. @PIETERJ / #BRANDCONF 126
  127. 127. @PIETERJ / #BRANDCONF 127
  128. 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. 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. 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. 131. We even crafted a custom typeface to reflect tradition and innovation at the same time. @PIETERJ / #BRANDCONF 131
  132. 132. This is about as far as we’d go in deviating from conventional interface patterns.
  133. 133. But… can you go overboard? @PIETERJ / #BRANDCONF 133
  134. 134. Absolutely. How much does this product cost? How do you select a size? @PIETERJ / #BRANDCONF 134
  135. 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. 136. Even big brands like Calvin Klein have a hard time balancing branding and conversion. @PIETERJ / #BRANDCONF 136
  137. 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. 138. I’m sure you all know this pattern. @PIETERJ / #BRANDCONF 138
  139. 139. So why is this happening? Fakes are taking over. Because the logo is almost all they had. @PIETERJ / #BRANDCONF 139
  140. 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. 141. So they’re improving branding by removing their logo, think about it. What elements are you overusing that helped you in the past?
  142. 142. ✓ communication brand personality appearance behavior ✓ ✓ @PIETERJ / #BRANDCONF 142
  143. 143. :) communication brand personality appearance behavior @PIETERJ / #BRANDCONF 143
  144. 144. The classic dilemma, at an interface level @PIETERJ / #BRANDCONF 144
  145. 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. 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. 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
  148. 148. And what about… @PIETERJ / #BRANDCONF 148
  149. 149. Nice brand videos? Sensational productions! Yes.. @PIETERJ / #BRANDCONF 149
  150. 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
  151. 151. And what about lookbooks?
  152. 152. and other traditional “branding” and “inspirational” content?
  153. 153. “Inspiration” 20% / +20% Sadly, evidence shows that only 1 out of 5 people are actually interested in them… @PIETERJ / #BRANDCONF 153
  154. 154. 20% / +20% basket size “Inspiration” However, after looking at it, they spend 20% more! That’s actually great news :) @PIETERJ / #BRANDCONF 154
  155. 155. SO… @PIETERJ / #BRANDCONF 155
  156. 156. ✓ communication brand personality appearance behavior ✓ ✓ ✓ @PIETERJ / #BRANDCONF 156
  157. 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. 158. I hope this talk will help you find the competitive edge that really fits YOU. @PIETERJ / #BRANDCONF 158
  159. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×