19 bis Côté Cour
Prototype d’une e-boutique de cosmétiques naturels
Le projet
J’ai testé un nouveau salon de coiffure éco-responsable installé près de Nantes et sa responsable Manon n’a pas encore de site web. Nous parlons de ses projets de développement et, celle-ci a pour objectif de mettre en ligne une e-boutique dans les prochains mois.
Manon tombe à point nommé car je recherche alors activement un projet pour ma soutenance finale de formation en UX/UI Design. Même si Manon n’est pas pressée, mon organisme de formation m’impose un délai de 2 semaines pour mener à bien cette mission.
Le brief est clair : j’ai 14 jours pour créer les maquettes d’un site web qui permettra aux clients de Manon d’acheter des produits capillaires en ligne.
Device cible : Ordinateur.
L’objectif est de proposer un prototype animé sur la base d’un user flow.
Je propose à mon collègue de formation Aimen Zenasni de faire équipe avec moi, et nous travaillerons main dans la main avec Manon, la responsable du salon, tout au long de ce projet.
Pour le mener à bien, nous suivrons les grandes étapes de la méthodologie du Design Thinking.
A propos du salon
Le “19bis Côté Cour” se distingue de ses concurrents sur plusieurs points :
Tous les produits utilisés et vendus sont naturels et made in France.
Manon a opté pour une gestion éco-responsable de son salon, que ce soit par les choix de ses fournisseurs ou la gestion de ses déchets par exemple.
Les produits et services proposés sont unisexes.
Plusieurs salons de coiffure opèrent dans sa zone de chalandise, mais aucun ne s’est positionné sur le naturel, et très peu possèdent des boutiques en ligne.
Etude de marché
Que sait-on ?
Après avoir longuement interviewé Manon pour comprendre l’histoire de son salon, son fonctionnement et sa clientèle, ses besoins et ses objectifs, nous commençons par créer une matrice CSD, qui nous permet de lister nos certitudes, doutes et suppositions.
Cette matrice évoluera tout au long de notre phase de recherche, l’objectif étant de parvenir à un maximum de certitudes, et de réduire la liste de nos doutes et suppositions.
Le marché des cosmétiques naturels
Sans surprise, le marché des cosmétiques suit la tendance du naturel qui conquis progressivement d’autres secteurs depuis plusieurs années, tels que celui de l’alimentation.
Quelques chiffres clés :
Le marché français des cosmétiques bio et naturels enregistre une hausse annuelle de 7% depuis 2013.
En 2025, le chiffre d’affaires prévisionnel du marché des cosmétiques bio et naturels en France devrait atteindre 378,8 millions d’euros.
Source : statista.com
De plus en plus de consommateurs passent au crible la liste des ingrédients qui composent leurs cosmétiques. Pour quelles raisons ?
Des études ont prouvé que nos produits cosmétiques du quotidien contiennent des substances nocives pour la santé, telles que les perturbateurs endocriniens.
Source : radiofrance.fr
Les consommateurs, devenus plus curieux, mieux informés et soucieux de leur santé, sont davantage enclins à modifier leurs habitudes d’achat.
Les 3 principaux critères d’achat de produits cosmétiques sont dorénavant :
Le rapport qualité / prix ;
La qualité des produits ;
La composition naturelle / bio des produits.
Source : spincontrol.fr
Source : maboxaunaturel.com
Sondages & Interviews
Pour mieux comprendre notre cible, nous choisissons de combiner des données quantitatives obtenues grâce à un sondage en ligne, à des données qualitatives issues d’interviews clients.
En nous aidant du Lean Survey Canva, nous préparons et distribuons un sondage aux clients et aux abonnés Instagram du salon de coiffure.
Pour compléter les informations recueillies, nous interviewons 5 clientes, ce qui nous permettra de mieux comprendre les habitudes de consommation et les critères d’achat de notre cible.
Persona
Toutes ces données sont ensuite compilées dans un diagramme d'affinités, qui donnera naissance à Virginie, notre persona (ou cliente type). Celle-ci nous guidera dans nos réflexions, tout au long de notre projet.
Problématique utilisateur
Nous devons permettre aux clients d’acheter en toute confiance les produits commercialisés par le salon, sans avoir à se déplacer.
Problématique business
Nous devons encourager l’achat de produits naturels vendus par le salon de coiffure via un site web fiable, facile à administrer, et pensé pour fidéliser les clients.
Idéation
L’idéation est l’une de mes étapes favorites de la méthodologie du Design Thinking : le moment est venu de laisser libre cours à notre imagination et, en nous appuyant sur le diagramme d’affinités, de penser à toutes les fonctionnalités que pourrait proposer notre site. Nous organisons ensuite toutes nos idées grâce à la méthode MoSCoW.
Cette méthode nous permet de répartir les fonctionnalités dans 4 catégories : les “must-have” (fonctionnalités indispensables), les “should-have” (celles qu’il serait de bon ton d’embarquer dans nos maquettes), les “could-have” (les bonus non indispensables) et les “won’t-have” (celles qui resteront sur le banc de touche).
Nous décidons d’inclure tous les “must-have” et “should-have” dans nos maquettes, ainsi que quelques “could-have” qui nous semblent facile à intégrer.
Ensuite, nous définissons un user flow (ou parcours utilisateur) qui nous permet de retracer le parcours d’achat type d’un consommateur.
Architecture de l’information
En nous appuyant sur les informations et fonctionnalités choisies, nous construisons ensuite le “sitemap”, qui sera le squelette de notre futur site web.
Concept Design
Notre site web s’appuiera sur 3 grands principes :
La transparence : sur la composition et l’origine des produits, ainsi que sur le fonctionnement du site.
La fidélisation : grâce à un contenu personnalisé et à des avantages réservés aux clients.
La réassurance : grâce aux conseils de Manon et aux avis clients.
En termes d’identité visuelle, nous nous inspirons grandement de la charte graphique et du moodboard créés par la graphiste de Manon, afin de garder une cohérence dans sa communication. Nous ajoutons simplement un brin de luminosité à la palette de couleurs, pour que celle-ci soit plus adaptée à l’usage web.
Nous avons à présent tout ce qu’il nous faut pour démarrer les maquettes !
Maquettes
Low-fi & Mid-Fi
Nous commençons par utiliser la célèbre méthode des Crazy 8 pour dessiner une première version de nos écrans. Après avoir mutualisé et comparé nos travaux, nous élaborons un premier lot de maquettes lo-fi sur Figma.
Nous procédons ensuite à un test de concept auprès de 5 clients, afin de valider la clarté de l’architecture du site et la pertinence du parcours utilisateur. Un test qui s’avèrera être une réussite et qui nous donnera pleinement confiance pour passer à l’étape suivante.
Nous passons donc aux maquettes mid-fi, et procédons à 5 tests d'utilisabilité. Ces derniers nous encouragent à modifier l’ordre de certains blocs au sein de nos pages, et à ajouter quelques fonctionnalités indispensables (fil d’ariane, suppression de panier…).
Hi-fi & Prototype
Nous passons les derniers jours du projet à construire nos maquettes haute fidélité et le guide de style ; nous ajoutons également quelques micro-intéractions et animations, et paramétrons le responsive desktop.
Nous accordons une attention plus particulière aux contrastes, couleurs, typographies et espacements, afin d’optimiser l’accessibilité de notre site web.
Nous prenons le temps d’effectuer une dernière itération suite à 4 tests d’utilisabilité, et de diffuser un test de désirabilité. 9 clients ont pu avoir accès au prototype et ont choisi les adjectifs qui qualifient le mieux notre futur site.
Les gagnants ? Professionnel, complet, esthétique et accueillant.
Style Guide
Prochaines étapes
Ce projet s’est déroulé dans des conditions qu’on pourrait qualifier de parfaites ! Le défi s’est révélé passionnant, notre cliente nous a fait entièrement confiance et s’est pleinement impliquée dans le projet.
Nous avons souhaité proposer un prototype qui reflète aussi bien les valeurs du salon que son identité visuelle, et grâce à la méthodologie du Design Thinking, nous avons abouti à un résultat qui a convaincu Manon et sa clientèle.
Ce qui m’a particulièrement marquée dans ce projet, c’est l’évidence, presque la simplicité, avec laquelle sont nées nos maquettes. Nous avons choisi de prendre le temps nécessaire pour mener à bien une recherche UX approfondie et comprendre aussi bien les attentes de Manon que les besoins des utilisateurs. Toutes les informations recueillies durant cette phase ont posé les rails qui nous ont guidés lors des étapes de création des maquettes.
Pour la suite ? Notre cliente souhaite confier à sa graphiste & webdesigner attitrée le développement du site. Celui-ci sera mis en ligne fin 2023, et nous devrions donc avoir le plaisir de voir prochainement ces maquettes prendre vie !
Et si on donnait vie à vos idées ?
Pour échanger autour de vos projets, écrivez-moi
et proposez-moi vos dispos pour échanger de vive voix !
Pas encore de projet ?
Restons en contact sur les réseaux !