E-COMMERCE & UX #2

COMMENT CONCEVOIR
UNE IDENTITÉ VISUELLE
QUI SE DÉMARQUE ?!
Un webinar présenté par Wexperience,
agence d’ergonomie digitale !
Ce document est issu de notre
webinar du 12 avril dédié
à l’identité visuelle des sites
e-commerce B2B !
 WEBINAR PRÉSENTÉ PAR :

Olivier Sauvage
● Dans le digital depuis 20 ans
● Créateur d’entreprise @Olivier Sauvage

● Ex Capitaine-commerce.com @Olivier Sauvage

● Expert UX et e-commerce

Steve Pajot
● Passionné de sport depuis… @Steve Pajot

toujours !
● Développeur commercial acharné
● Fan des expériences digitales
inoubliables
 wexperience.fr

4 agences au service de
l’expérience et de wexit.fr
l’innovation digitale !
10 ans d’expérience & 30 collaborateurs
basés à Paris, Lille et à Lyon.
digitaleez.fr

markopolo.fr
En 2021, en moyenne, un français passe
6h/j sur les écrans !
Il y a plus de 200,000 sites de e-commerce en France selon la
FEVAD.

Notre capacité d’attention baisse.

Le mobile devient l’outil majoritaire d’accès au web (écran

moins immersif, niveau de distraction plus élevé. Exemples : les
notifications, SMS et autres)

Dans ce contexte, comment arriver à créer et à capter de

l’attention ? Comment se détacher ? Comment se faire voir ?
Dans ce contexte, il faut…
● Faire bonne impression
● Se démarquer
● Marquer l’esprit de l’utilisateur

Une bonne identité visuelle

peut vous y aider !
Qu’est-ce que l’identité
visuelle d’un site web ?

Des couleurs !
Une couleur de fond, des
couleurs de typo, des
couleurs d’éléments
d’interface, les boutons,
etc.
Qu’est-ce que
l’identité visuelle
d’un site web ?

Une typographie, une ou

plusieurs typo.
Qu’est-ce que
l’identité visuelle
d’un site web ?

Des photos !
Photos produits, photos
d’illustration, photos de
gens, d’ambiance.
Qu’est-ce que
l’identité visuelle
d’un site web ?
Des choix de mise en forme :
sobre, simpliste, chargé.
Qu’est-ce que
l’identité visuelle
d’un site web ?
Mais aussi, pour ce qui
concerne le numérique : les
animations. Sont-elles fluides,
rapides, douces, abruptes,
surprenantes, etc ?
Qu’est-ce que l’identité visuelle
d’un site web ?
L’ensemble doit former un
tout cohérent harmonieux ou
pas, mais qui doit
correspondre à l’image que
vous voulez projeter de vous
même à votre cible client.
On peut avoir plein d’images
différentes :

- Société experte
- discounter
- marque de luxe
- simple, proche et sympathique
- Arrogante et froide
- Etc.

Peu importe, les caractéristiques :

elles doivent être en accord avec
vous même et avec votre
marché/Cible de clients potentiels.
Quel rôle joue-t-elle dans l’expérience
utilisateur ?
L’aspect visuel d’une interface ne joue un rôle qu’au
début de l’expérience utilisateur, au moment de la
prise de contact, mais ensuite, elle est oubliée par
l’utilisateur qui se concentre sur ce qu’il a à faire.

Sur mobile, il est encore plus difficile de se distinguer

étant donné la taille minuscule de l’écran.
Quel rôle joue-t-elle dans l’expérience
utilisateur ?
L’utilisateur ne doit pas chercher à s’extasier sur l’interface,
sauf si c’est un but volontaire pour créer une expérience dont
il s'imprègne et qui favorisera ensuite son affinité avec la
marque.

Autrement, le design visuel du site n’a que peu d’impact sur la

conversion dans le long terme.

MAIS…
L’identité visuelle est extrêmement
importante pour la première impression !
La première impression compte énormément dans la
conversion. Comme dans la vraie vie, il faut faire une bonne
première impression.

Et c’est votre identité visuelle qui va contribuer à cela.

Tout ça pour ça ? Eh oui ! Mais c’est très important.

20 identités de
sites qui se
démarquent
Regardons ça à travers 20 exemples
et 8 bonnes pratiques !
● 20 sites notés
● commentés
● captures d’écran en
vidéo
● Site du monde entier,
sauf France
 Soyez…

SIMPLE !
Resbite : un réseau social pour le
monde réel
● Esprit de bienveillance
● Couleur douce et un peu
institutionnelle
● Simplicité
● Saynètes animées censés
traduire le concept
Regardons de plus près !

Cliquez sur l’image pour visionner la vidéo.

 Ma note : 1,75

Originalité

Audace

Séduction

Clarté
Potion : emails vidéos

● Design extrêmement
épuré
● Interactions funs
● Une couleur forte
● Pour un impact maximal
● Utilisation d’un
personnage animé au
centre de la page
Regardons de plus près !

Cliquez sur l’image pour visionner la vidéo.

 Ma note : 4,25

Originalité

Audace

Séduction

Clarté
 UN CLIENT WEXPERIENCE

Agence WAM : agence SEO

● Sérieux
● Austérité
● Direct
Avant : néo banque

● Une couleur
● Une image
● Un texte
● Un CTA
 Ma note : 2,25
Avant : Neobanque

Originalité

Audace

Séduction

Clarté
 Soyez…

LÉGER !
Asana : outils de gestion de projets
● Parfait canon du monde des startups
avec offre en Saas
● Photos de jeunes trentenaires dans le
monde de la tech
● Diversité
● Screenshots d’écran
● Apparente complexité dans les schémas,
censé traduire aussi la richesse
fonctionnelle du produit
● MAIS également textes courts pour
capter l’attention et engager
Regardons de plus près !

Cliquez sur l’image pour visionner la vidéo.

 Ma note : 1,75

Originalité

Audace

Séduction

Clarté
Hifly : location d’avions
● Envolez moi !
● Élégance et pureté
● Navigation balade
● Beaucoup d’interactivité
Regardons de plus près !

Cliquez sur l’image pour visionner la vidéo.

Originalité

Audace

Séduction

Clarté

Ma note : 4,5
Blockchains : service d’authentification
utilisant la …
● Utilisation extensive de la 3D rappelant
l’univers du gaming
● Interface épurée, sobre, mais interactive
(gaming encore)
● Animations “fortes” qui créent de l’
émerveillement → engagement ==
promesse technique (ça sera magique)
● Pureté : côté un peu clinique du design,
rappelant un labo (promesse high tech)
Regardons de plus près !

Cliquez sur l’image pour visionner la vidéo.

 Ma note : 2,75
Originalité

Audace

Séduction

Clarté
 Moneylion : une néobanque
● Esprit startup
● Mise en avant de l’app avec de la 3D
● Cible jeune
● Couleur institutionnelle (malgré
tout)
● Aspect un peu jeu vidéo
● Promesse de facilité par la légèreté
visuelle des contenus (textes très
courts, beaucoup d’espacements)
Regardons de plus près !

Cliquez sur l’image pour visionner la vidéo.

 Ma note : 3

Originalité

Audace

Séduction

Clarté
 Soyez…
SYMPATHIQUE !
Culture Convenience Club :
chaîne vidéos et livres
● Convivialité
● Sophistiqué
● Urbain
Encore le
Culture
Convenience
Club !
Regardons de plus près !

Cliquez sur l’image pour visionner la vidéo.

 Ma note : 4

Originalité

Audace

Séduction

Clarté
 ITI : ESN
● On comprend clairement que ITI place
l’individu, le collaborateur au centre de son
concept.
● Encore une fois, page simple et forte, par
l’emploi d’un grand visuel, fond clair et
vide et un énorme titre.
● Couleurs douces (pour humaniser ?)
● On retrouve le vert turquoise ou émeraude
qu’on a beaucoup chez autres sites
high-tech = couleur tendance ?
● Animations très fluides et simples
Regardons de plus près !

Cliquez sur l’image pour visionner la vidéo.

 Ma note : 3,25

Originalité

Audace

Séduction

Clarté
Zoey : outil collaboratif d’entreprises

● Accent mis sur les humains

● Couleurs chaudes et formes
géométriques reliants les personnes
(métaphore de l’outil ?)
● Simplicité du fond de page
● Textes courts
● Engageant ?
 Ma note : 3

Originalité

Audace

Séduction

Clarté
Florida Dairy Farmers : groupe
de producteurs laitiers

● Convivialité
● Sophistiqué
● Urbain
Regardons de plus près !

Cliquez sur l’image pour visionner la vidéo.

 Ma note : 4,5

Originalité

Audace

Séduction

Clarté
 Soyez…
ENJOUÉ !
Zebrand : outils de création de marque
● On est dans la créativité : utiliser de gros blocs colorés qui peuvent
rappeler des jouets pour enfants (briques en bois ou briques de lego
qui permettent de composer des ensembles plus complexes)
● Mais on reste dans la simplicité
● Animation de départ : métaphore de la créativité. A partir d’une forme,
je fais plein de formes
● Grosse typo captant toute l’attention pour délivrer un message.
● Malgré tout : austérité, car pas de visuel == sérieux ???
Regardons de plus près !

Cliquez sur l’image pour visionner la vidéo.

 Ma note : 3,5
Originalité

Audace

Séduction

Clarté
 Soyez…
PUISSANT !
Rocka : outil collaboratif pour groupe de travail
Positionnement très original : futur du travail, mais imagerie antique.
On ne peut pas dénier un design très disruptif, mais très en dehors des
clous par rapport au monde de la tech.--> bonne ou mauvaise idée ?
MAIS les images (à ma connaissance) n’ont rien à voir avec les textes.
Identité très forte :
- Approche colorée très segmentante
- Utilisation d’une iconographie antique et classique → tradition ?
Immuabilité ? Il y a un côté prétentieux qui peut plaire
Design simple et épuré qui renforce la force de l’image, animations
superfluides.
Regardons de plus près !

Cliquez sur l’image pour visionner la vidéo.

 Ma note : 4,5

Originalité

Audace

Séduction

Clarté
Umatex : producteur de fibre de carbone
(industrie)
● Technicité
● C’est du lourd
● On veut impressionner par la puissance : grosses
typos, visuel en plan très large montrant les
installations <- destiné à impressionner
● Gros plan sur pièces détachées
● Images filaire (l’avion) = ingéniérie high-tech
● Couleur bleu : couleur typique de la high-tech
Regardons de plus près !

Cliquez sur l’image pour visionner la vidéo.

 Ma note : 2,5

Originalité

Audace

Séduction

Clarté
 Soyez…
VERTICAL !
Pienso : IA

● Bauhausien
● Rare utilisation du noir : côté obscur
de la force, mais le noir a ses
adorateurs. Ajouter un côté “techno”
aux frontières des courants majeurs,
ça peut être valorisant.
● Schéma classique fond uniforme,
titres énormes en capitale, design
graphique très géométrique
Regardons de plus près !

Cliquez sur l’image pour visionner la vidéo.

 Ma note : 3,25

Originalité

Audace

Séduction

Clarté
 Soyez…
TECHNO !
Torus kit : trousse à outil pour
développeur
● Apparence classique
● Utilisation du bleu pour l’apparenter au
monde de la technologie
● Beaucoup de captures d’écran
● Aspect très techno : les lignes de code sont
utilisés comme éléments esthétiques
● Animations = démonstration en live du
produit
Regardons de plus près !

Cliquez sur l’image pour visionner la vidéo.

 Ma note : 2,5

Originalité

Audace

Séduction

Clarté
 UN CLIENT WEXPERIENCE

Omniseal
solutions :
industriel haute
technologie.
Blue Horizon : Finance verte

● Énormes typos
● Look techno et carré
● Animations horizontales et
verticales
Regardons de plus près !

Cliquez sur l’image pour visionner la vidéo.

 Ma note : 3,5

Originalité

Audace

Séduction

Clarté
 Soyez…
SÉRIEUX !
GGZ : pourvoyeur de bien être

● Pas d’images. Est-ce un bon

choix ?
● Uniquement des formes
géométriques
● Austérité bien flamande
Regardons de plus près !

Cliquez sur l’image pour visionner la vidéo.

Originalité

Audace
Ma note : 3,75
Séduction

Clarté
Comment concevoir
l’identité graphique
d’un site ?
Par quoi on commence ?
Définir l’identité graphique peut être assez long, mais cela
dépend d’où vous partez.

Si vous avez un document de charte graphique, une plateforme

de marque : 95% du travail est déjà réalisé.

“Il suffit” de décliner la charte sur les maquettes.

Mais en réalité, c’est plutôt rare.

D’abord…
La première étape consiste à s’asseoir autour
d’une table et de discuter de votre entreprise.

- Son positionnement
- Ses valeurs
- Sa concurrence
- Sa cible
- Son ambition
Les outils…
Pour aboutir à la clarification de votre univers de marque et à la création
d’une charte graphique et éditoriale cohérente, nos équipes s’appuient
sur divers outils :

● Entretiens réalisés avec vos collaborateurs et utilisateurs

● Élaboration de plusieurs persona design
● Création de moodboards
● Études quantitatives
● Tests utilisateurs
● Méthode de l’UX Writing
 Le persona design
C’est une recherche qui permet
de définir la personnalité de
l’entreprise.
● Qui est-elle ?
● Comment parle-t-elle aux
gens ?
● Est-elle jeune, vieille ? Sage,
fougueuse ? Arrogante,
humble ?
● Promet-elle la lune ou
promet-elle de résoudre
des problèmes du
quotidien ?
Le persona design permettra aux créateurs
de se projeter
C’est pour cette raison qu’on va faire ensuite plusieurs déclinaisons
graphiques à partir d’un wireframe.

Ces propositions vont permettre de discuter de l’identité.

Dans certains cas, nous allons jusqu’à redesigner le packaging des

produits, car il peut avoir une influence sur l’identité graphique du site.
Création de moodboard

Ça donne ça… Slide suivante !

Création de moodboard
Création d’un guide de style
 UN CLIENT WEXPERIENCE

Lorsqu’un
design a été
adopté, il
pourra alors
être décliné
sur tous les
supports du
site ou de
l’app.

Déclinaisons graphiques pour le site WAM référencement.

 UN CLIENT WEXPERIENCE

Déclinaisons graphiques
pour la Mutuelle Just !
 UN CLIENT WEXPERIENCE

Déclinaisons graphiques
pour Omniseal Solutions !
4 raisons d’avoir une
belle identité
visuelle !
1 Pour vous démarquer de vos concurrents et
asseoir une image forte.

Parce que ça permet à vos utilisateurs

2 d’abord de savoir si votre positionnement

correspond à leur positionnement (“C’est
trop cher pour moi” ou “ça a l’air cheap, ce
site n’est pas pour moi”)
3 Pour créer une émotion positive dans la tête
de votre utilisateur et lui donner envie de
continuer l’aventure avec vous.

4
Pour permettre à vos visiteurs de mieux vous
mémoriser et vous reconnaître
immédiatement lors d’une prochaine visite.
CONCLUSION !
CONCLUSION !
CONCLUSION !
L’identité graphique, c’est aussi de l’UX !
C’est un moyen de rendre plus attractif votre site et
d’augmenter l’engagement.

Un moyen de décliner vos valeurs de marque rapidement

Un moyen pour l’utilisateur de s’identifier plus rapidement à

votre marque

Un moyen de vous positionner plus clairement par rapport à

vos concurrents.

Bref, c’est aussi de l’UX.

Pour en savoir plus :
Articles à lire sur notre blog :
● Une nouvelle identité graphique pour Fleurance
nature

● Syndic One choisit Wexperience pour revoir son

image de marque !

● April Moto améliore l’expérience utilisateur grâce

au persona design
Et en bonus ! Le replay de
l’un de nos précédents
webinars dédié à l’ADN de
marque mené avec Petit
BamBou.
 Les autres
prestations by
Wex !
● La refonte de site web
● La création d’identité
de marque
● Les tests utilisateurs

Cliquez sur les liens pour

découvrir nos prestations.
Notre prochain webinar !
Comment bien présenter ses pages
offres en B2B ?

On vous donne RDV le mardi 26 avril à 11H

pour un nouveau webinar dédié à la
présentation des pages offres en B2B !
On prend un café ?

Steve Pajot
06 38 14 05 37
steve@wexperience.fr

Olivier Sauvage
06 59 38 92 92
olivier@wexperience.fr