Comment mixer design de l'identité visuelle et UX efficace ?

Chapitres

Octobre editions

Habillement

13 minutes

Contenu réservé aux membres PREMIUM

Inscrivez-vous pour accéder aux ressources premium

S'inscrire maintenant

Aujourd’hui, une petite étude de cas qui concerne la home page d’un e-commerce.

Celui de la marque Octobre Editions.

▷ Notre avis sur la marque Octobre Editions | Comme un camion

Sachant que beaucoup sont en vacances, cette édition est assez concise.

On va essayer de ne pas trop aller en profondeur.

Problématique fréquente chez les e-commerces

Pour beaucoup d’e-commerces, améliorer l’UX veut dire rendre le site plus efficace mais moins beau.

J’ai déjà eu de nombreuses discussions avec des commerçants m’expliquant qu’ils voulaient optimiser les conversions, tout en gardant leur identité visuelle.

Le site d’Octobre est un bon exemple pour illustrer cette problématique.

Ici, on a un design très moderne, avec une image de qualité, comme sur beaucoup de sites de vêtement.

Le problème : un manque de lisibilité qui freine l’UX.

Le texte blanc sur un background image n’est pas une bonne pratique en termes d’accessibilité.

Allons encore plus loin, voici la home page d’Octobre :

Ici, on pourrait souligner plusieurs choses qui pourraient être améliorées :

  • Un carrousel qui défile automatiquement
  • Manque de présentation des catégories de produit
  • Manque de preuve sociale
  • Manque de proposition de valeur (livraison gratuite, retours disponibles, etc.)
  • Liens des réseaux sociaux qui ajoutent de la distraction

Ces erreurs ne sont pas forcément involontaires de la part des marques.

Par exemple, beaucoup de marques de luxes évitent de mettre en avant leurs avis clients, voulant se reposer uniquement sur leur nom de marque pour la crédibilité.

Autre exemple, Octobre utilise des images en plein écran pour mettre en valeur leur produit et parce que cela correspond à leur identité de marque.

Ils le font, même si cela donne une accessibilité peu optimisée.

Bref, on se retrouve donc avec une problématique qui concerne surtout les marques avec une identité forte, ou les marques de luxe par exemple.

Regarde le site de Balmain, je pourrais te citer au moins une dizaine de standards UX non respectés, rien que sur la home page.

Ils savent très bien que l’UX n’est pas optimisé, mais leur branding passe avant tout.

Refonte de la home page de Octobre

Certes, les sites de marques comme Balmain ou Octobre ont un design très classe.

Mais on a vu qu’en termes d’UX, ça n’était pas top, le taux de conversion pourrait donc être amélioré.

Néanmoins, le côté “élégant” et “design” et également important pour le taux de conversion.

Car cela reflète indirectement une renommée de la marque et une certaine crédibilité.

Alors comment mixer les deux ?

Design de l’identité visuelle ET UX/efficacité.

ziggy-etude-de-cas.jpeg

Le tout est de trouver des compromis.

  • On a gardé l’image en background mais on a ajouté un petit fond en noir pour améliorer la lisibilité du texte blanc.
  • De la preuve sociale a été ajoutée de façon discrète. Pas de grosses étoiles jaunes, de logo Truspilot qui pourraient être inadaptées au ton de la marque.
  • L’invitation à la newsletter et les liens vers les réseaux sociaux n’apportent rien, mis à part de la distraction.
  • Le texte “haut” permet de faire comprendre aux utilisateurs que la page peut être scrollée et qu’on peut accéder à un aperçu des produits proposés.

Ça reste sobre et épuré.

Tu vois qu’on a laissé le titre principal qui renvoie vers la nouvelle collection.

Pas besoin d’une proposition de valeur à la manière d’une landing page, car les visiteurs qui viennent sur la home page de ce genre d’e-commerce connaissent déjà la marque et ce qu’elle propose.

Présenter un aperçu des catégories de produit sur la home page est une OBLIGATION.

Un peu plus bas sur la page, le même procédé a été utilisé.

  • On utilise les photos avec une grande taille d’image.
  • On donne un fond noir transparent pour rendre le texte plus lisible.
  • On utilise les carrousels pour présenter les catégories de produit dans un espace réduit, pour donner un côté “sophistiqué” et moderne au site.
  • On laisse apercevoir la photo du second slide, à droite, pour faire comprendre à l’utilisateur qu’il agit d’un carrousel et qu’il peut scroller.

Tout en bas de la page, on a ajouté des informations présentes sur les pages produits.

Ce sont des éléments qui viennent renforcer la proposition de valeur globale de la marque ainsi que de la clarté.

Contenu réservé aux membres

Pour accéder au contenu, inscrivez-vous gratuitement et accédez à +100 ressources CRO

S'inscrire maintenant

Une question ?

Je réponds dans les 24h.

Passez

+12h de formation vidéo

+50 études de cas CRO/UX

+30 check-lists, templates, audits...

Accéder maintenant

+100 inscrits

Documents liés

Besoin d'auditer votre e-commerce ? Recevez un redesign de vos pages, une analyse vidéo et une liste de recos.