Repenser une grande vitrinedu vin en France
Grande entreprise e-commerce bordelaise proposant un large catalogue de vins, champagnes et spiritueux, Wineandco souhaitait repenser son site pour être plus aligné sur les attentes de leurs utilisateurs.
Partir sur de bonnes bases 👌
Pour une refonte de cette envergure, la démarche UX est capitale. L’objectif n’étant pas simplement de rafraîchir la façade du site de Wineandco, mais réellement d’améliorer l’expérience de navigation et d’achats des utilisateurs de la plateforme et d'aider Wineandco à se démarquer face à une forte concurrence sur son marché.
Et ça : c’est notre UX Designer Romain qui s’en charge et il a sa méthode bien à lui. Ça commence par un audit ergonomique du site existant et un benchmark des sites concurrents pour comprendre l'univers, le marché mais aussi rapidement identifier les bonnes et mauvaises pratiques (à ne pas reproduire).
Audit ergonomique : Recherche d’un vin rouge
Le visuel de la bouteille permet à l’utilisateur de mettre une image sur le produit et de mieux l’identifier
L’utilisateur est limité dans ses actions car le CTA d’ajout au panier est absent de la page
Permettre à l’utilisateur d’ajouter le produit au panier plus rapidement
Dîtes-moi ce que vous buvez et je vous dirais qui vous êtes 🍷
Qui dit UX dit utilisateur ! C'est donc dès ce début de projet que nous avons embarqué des utilisateurs du site et clients de Wineandco dans le cycle de conception. Pourquoi ? Pour les connaître et les comprendre ! Les premiers tests et entretiens utilisateurs nous ont permis de continuer à identifier les forces et faiblesses de la plateforme actuelle au travers de grandes thématiques, tout en mettant en lumière des catégories d’utilisateurs aux besoins et attentes très variés.
De l’amateur éclairé au passionné de vin en passant par les plus novices, chaque typologie d’utilisateur recherche, achète et consomme son vin différemment. Considérez ces données comme la découverte d'un véritable trésor : la base de toutes nos futures décisions et de la réussite du projet.
Synthèse des tests utilisateurs
Personas : Amateur // Passionné // Néo-consommateur
Sur la page d’accueil, on a l’impression de ne voir que du Bordeaux alors que l’on veut découvrir d’autres vins
“Beaucoup de Bordeaux, gros biais mais du coup j’ai l’impression que ça ne me correspond pas du tout !”
Graphiquement, c'est bien lisible, notamment sur les ventes privées. C'est clean et épuré, ça fait simple et pas de surenchère. Optimisation possible mais bonne expérience
Le nombre de critères est trop important
"Cherche les appelations", "Meilleures ventes et meilleures notes top", "Le millésime est important mais il n'est pas visible", "Pas possible de filtrer par les meilleures notes et j'aime voir que ça"
Certains codes promotionnels se sont pas cumulables mais le système ne l'indique pas
"Codes promotionnels ne fonctionnent pas et on ne peut pas les cumuler avec les poins cumulés (pas toujours)"
Les filtres additionnels accessibles amènent sur une page vide sans résultat
"Quand on rentre sur le moteur et qu'on rajoute des filtres ça ne fonctionne pas", "Les critères de sélection sont sur le côté mais ne marchent pas", "Par moment ça fonctionne pour certains critères mais pas pour d'autres", "Les temps de réponses sont mauvais", "A l'usage, sur une recherche sur Vinatis, la réponse est immédiate"
Les différents vendeurs ne sont pas bien identifiés
"Je verrai bien des colonnes différentes par vendeurs ou paniers mais graphiquement je ferai tout pour différencier les 2 commandes pour pas créer de confusion", "Pas terrible la gestion du double panier", "Pas simple car prix de livraison différent par vendeurs, le nombre de panier n'est pas clair"
Les frais de livraisons sont anticipés et ne forcent pas l'utilisateur a passer l'étape suivante pour les découvrir
"Top de voir le prix de la livraison avant de passer dans le tunnel, ça je déteste quand c'est pas le cas", "Les frais de livraisons sont anticipés c'est vraiment bien, pas besoin de se connecter ou autre"
Les primeurs sont identifiables via le menu
"Une fois que j'ai regardé les ventes privées, je regarde souvent les primeurs pour voir ce qui est sorti ou si il y a du re-stock", "Si il n'y a pas le stock je regarde sur d'autres sites", "Mais je regarde tous les 2 ou 3 jours , c'est le jeu du primeur il faut être au taquet"
Les recommandations ne se basent sur aucune expertise
"Les recommandations sont hasardeuses j'ai l'impression car pas de lien avec ma recherche"
Je cherche Saint Peray et il me propose des vins différents dans les solutions
"Le moteur de recherche est un désastre. Je tape Saint peray pour une AOP et il me sort 2 vins qui n'ont rien a voir"
Il est parfois compliqué de communiquer rapidement avec les équipes de Wineandco
"Le chatbot est top car ça peut répondre instantanément à plusieurs problèmes, on peut les accompagner sur des étapes spécifiques", "On a des réponses par mail 24h à 48h après", "Via le bot il y avait trop de retours de clients qui avaient des bugs techniques, problèmes de site, ce n'était pas évident"
Non identification des filtres sélectionnés de manière avec la suppression possible car la barre de recherche et désolidarisée des filtres
"Suppression de filtre ne marche pas terrible et pas bien mis en avant", "On ne sait pas si les filtres sont cumulatifs ou pas, c'est assez décourageant comme problème"
Un parcours utilisateur revu et optimisé
Un des points majeurs retenu des tests utilisateurs était la complexité de la navigation. Un gros travail a donc été réalisé pour améliorer le parcours des utilisateurs en fonction des différents points d’entrée sur le site et des attentes de chaque utilisateur. Nous avons beaucoup appris sur la façon de rechercher un vin par les utilisateurs, les critères de décision d'achat et les contextes de recherche d'un vin.
Toutes ces données ont soulevé de nombreuses idées. Afin d'y répondre de la meilleure des façons, nous avons réalisé des ateliers de co-conception avec les équipes de Wineandco pour concevoir les parcours utilisateurs et identifier les meilleures solutions à chaque étape.
Une vitrine modernisée
Vint (👀) ensuite le moment de s’attaquer à la partie visuelle de la plateforme. Comme dans un vieux magasin, on dépoussière les étagères et on change la déco. On travaille sur quelque chose de plus clair, plus moderne et sur une interface efficace et engageante. C’est aussi le moment où on s’attarde sur toutes les micro-interactions en détails pour s’assurer que l’expérience des utilisateurs soit la meilleure possible en toute circonstance.
01. Typographie
Vins rouges
Bitter, Semibold // Titres et communications brandées
Nos meilleures ventes
DM Sans, Medium // Titres de second niveaux
Toujours pressés par le temps qui manque, les amateurs négligent souvent de décanter.
DM Sans, Regular // Paragraphes
02. Iconographie inspirée du monde du vin
 1.svg)
 1.svg)
 1.svg)
 1.svg)
 1.svg)
 1.svg)
Une interface claire et cohérente
Sur une plateforme de la taille de Wineandco, la difficulté peut souvent être la cohérence visuelle et d’expérience entre les différentes parties du site. Pour conserver une qualité d’expérience sur l’entièreté du parcours des utilisateurs, nous avons soigneusement créé une série de composants d’interface pouvant être utilisés sur différents modules.
Une passation en toute tranquillité
Une fois toutes les vues validées, l’intégration a pu commencer et a été réalisée par nos équipes. Nos développeurs ont ensuite pu accompagner les équipes techniques de Wineandco - qui s’occupaient elles de toute la partie back-end du site - dans la mise en place du nouveau design pour assurer que la transition se fasse parfaitement.
Les vins par régions
Bordeaux
722 vins
Bourgogne
420 vins
Rhône
319 vins
Languedoc-Roussillon
311 vins
Autres régions
297 vins
Monde
256 vins
Un vin pour chaque occasion
Apéritifs
722 vins
De tous les jours
420 vins
Soirée romantique
311 vins
A offrir
297 vins
A garder en cave
256 vins
Repas festifs
319 vins
“Nous avions également un énorme enjeu sur la rencontre des stratégies UX et SEO ! Nous devions concevoir pour les utilisateurs et leurs besoins, apporter des solutions aux différentes problématiques, tout en respectant la mission SEO réalisée par l’agence 209, répondant aux exigences des moteurs de recherche. Deux axes différents pour un objectif commun. Ce travail main dans la main nous a apporté de nombreuses opportunités sur les choix de conception”
Romain - UX Designer