L'ARTISAN DES MÉLANGES
10 jours
Bureau & Mobile
2 Designers
Design thinking
Figma
Créer un site web e-commerce complet et une image de marque pour une marque parisienne.
Résumé bref
L'Artisan des Mélanges a été créé en 2018 par Elodie et Antoine, un duo dynamique passionné par le style de vie parisien et la gastronomie. Ils ont commencé avec une petite boutique au cœur de Saint-Germain-des-Prés, où leurs thés et cafés méticuleusement sourcés ont rapidement gagné un public fidèle. Conscients de la demande croissante en cafés et thés de spécialité, ils ont lancé une page internet vitrine en 2021, ce qui leur a permis d'atteindre plus facilement un public local et international. Leur attachement à la qualité, à la durabilité et à la tradition parisienne a fait d'eux une marque appréciée des connaisseurs. Leurs objectifs commerciaux sont de développer une base de clients fidèles et engagés, d'élargir la gamme de produits avec des offres exclusives et saisonnières, ainsi que d'être à la pointe du développement durable sur le marché des thés et cafés de spécialité.
Portée du problème
Dans le cadre de mon bootcamp UX/UI chez Ironhack, mon coéquipier et moi avons été mis au défi de développer une base de clients engagés et fidèles autour de "L' Artisan des Mélanges" en concevant une solution e-commerce centrée sur l'utilisateur, reposant sur des offres de produits exclusifs, de qualité et durables sur le marché des thés et cafés spécialisés, couplée à une structure de navigation et une catégorisation intuitives pour aider les utilisateurs à trouver facilement des produits en fonction de leurs intérêts et préférences, intégrant un processus de paiement fiable.
Recherche secondaire
Notre recherche secondaire a aidé à valider nos hypothèses et à identifier les facteurs clés ainsi que les tendances actuelles du marché des thés et cafés de spécialité.
Étude de marché
Tableau comparatif des fonctionnalités
Nous avons d'abord identifié les principaux concurrents dont l'analyse de UX pouvait nous apporter des informations sur un parcours réussi pour nos utilisateurs cibles. Ensuite, nous avons réalisé un audit de leurs sites e-commerces et notamment de leurs parcours d'achat et de paiement. Nous avons listé les principales fonctionnalités sur l'axe vertical, et nos concurrents sur l'axe horizontal, puis nous avons vérifié pour chacun d'eux si leur site intégrait ou non cette fonctionnalité.
Carte de positionnement sur le marché
Nous avons déterminé le degré de durabilité et de culture parisienne comme les axes les plus révélateurs pour déterminer la distribution sur le marché du branding de nos concurrents et pour identifier les lacunes du marché. Cela nous a permis de décider de notre positionnement stratégique idéal sur le marché pour "l'Artisan des Mélanges".
Recherche Utilisateur
Pour en savoir plus sur les besoins et les points de douleur de notre public, nous avons réalisé une recherche utilisateur avec des connaisseurs de café et de thé qui apprécient beaucoup la culture parisienne.
Nos 5 entretiens ont permis de d'identifier 3 principaux axes d'amélioration :
Les consommateurs quotidiens de café et de thé ont de nombreuses frustrations lorsqu'il s'agit de respecter à la fois leurs exigences en matière de goûts, de qualité, mais aussi d'impact environnemental et sociétal.
Les consommateurs quotidiens de café et de thé ont des difficultés à trouver des informations claires sur l'origine des produits, leurs certifications ou labels écologiques, ainsi que sur les informations qualitatives.
Les consommateurs quotidiens de café et de thé ressentent le besoin d'être mieux conseillé pour se familiariser avec les différents moyens de consommation et types de mouture, les techniques d'infusion, et les meilleures associations alimentaires.
"Hervé Hyperprudent", notre persona principal
Après avoir analysé ces informations en utilisant un diagramme d'affinité, nous avons créé notre persona pour guider notre design :
Le parcours utilisateur d'Hervé
En accord avec le profil d'Hervé, nous avons créé son parcours utilisateur et identifié à chaque étape quelles étaient les principales frustrations et les principales opportunités, avant de concevoir notre solution :
Énoncé du problème
Dans cet esprit, notre énoncé de problème a été défini comme suit : "Les connaisseurs de cafés et de thés qui ont une forte appréciation de la culture parisienne doivent trouver un moyen de se sentir partie prenante de la culture parisienne et s'assurer de consommer des cafés et des thés de qualité, savoureux et sourcés de manière durable, car ils éprouvent des frustrations à combiner leur passion pour les cafés et les thés avec leurs convictions environnementales au quotidien."
Nous avons réfléchi aux solutions possibles en réalisant un Crazy 8, avant de prioriser les fonctionnalités essentielles à l'aide de la méthode Moscow.
Énoncé du MVP
Après priorisation, notre Produit Minimum Viable a été défini comme : "Une solution de commerce électronique qui soutiendra les croyances environnementales et éthiques de nos clients liées à la consommation de Cafés et de Thés" tout en offrant le meilleur service à la parisienne, en incorporant les fonctionnalités suivantes :
Une variété de produits spéciaux comprenant des cafés, des thés, des kits d'infusion et des box saisonnières.
Filtres avancés incluant des notes de provenance, des labels écologiques et des détails sur les scores de qualité afin que nos utilisateurs trouvaient facilement les produits pertinents.
Après l'inscription, une enquête permettant à nos utilisateurs de remplir leurs préférences de consommation de cafés et de thés ainsi que leur type d'équipement domestique, pour obtenir des recommandations personnalisées.
Un calendrier interactif permettant à nos utilisateurs d'en savoir plus sur la culture de la marque et les ateliers organisés autour de la dégustation de cafés et de thés et des techniques d'infusion, ainsi que de réserver leur participation.
Décisions de conception
Maquettes basse fidélité
Basé sur notre MVP, nous avons esquissé nos maquettes basse fidélité et nous avons réalisé 5 tests de concept en personne. Plusieurs axes d'amélioration ont été identifiés :
Les icônes utilisés dans l'enquête de préférences n'étaient pas assez intuitives
La mise en page du carrousel de la page d'accueil et le libellé de son appel à l'action devaient être clarifiés
Avoir les sections connexion et inscription sur la même page prêtait à confusion
Des explications devaient être intégrées pour chaque champ de texte afin d'améliorer l'accessibilité
Un système pour afficher ou masquer les filtres produits était nécessaire pour alléger la mise en page
Un icône "ajouter au panier" directement depuis les aperçus produits manquait
Les options d'abonnement aux boxes saisonnières n'étaient pas assez claires
La dimension de contrôle de l'utilisateur nécessitait d'être revue afin de permettre une option fermer, retour, ou continuer, à chaque étape)
Les dimensions du menu de navigation devait être revues pour fluidifier l'expérience
Architecture du site
Avant de commencer les phases d'itération de conception, nous avons défini l'architecture du site :
Itérations empiriques
Maquettes moyenne fidélité
Après nos tests de concept, des modifications ont été intégrées à nos maquettes de moyenne fidélité, et des tests supplémentaires ont été réalisés. Après avoir réalisé 5 tests d'utilisabilité, d'autres axes d'améliorations ont été identifiés :
Mettre en avant les sélections de thés et de cafés à travers les best-sellers et les dernières arrivées dans des sections séparées sur notre page d'accueil.
Améliorer la fonctionnalité de notre enquête sur les préférences en rendant à la fois l'icône et les labels de texte cliquables, et en permettant de choisir plusieurs options.
Incorporer des bascules offrant à l'utilisateur la possibilité de filtrer ses produits en fonction de la sélection saisonnière ou de sa réponse à l'enquête sur les préférences.
Simplifier le fonctionnement de notre calendrier et la procédure d'inscription à nos ateliers.
Attributs de marque
Maquettes haute fidélité
La fonctionnalité globale a été améliorée sur nos écrans haute fidélité, en incorporant une icône "ajouter au panier" directement depuis la page de recherche de produits, en simplifiant notre fonctionnalité de calendrier, en corrigeant les interactions de la page d'accueil et en clarifiant nos CTA.
Tout le formatage de l'interface utilisateur et des boutons a également été intégré, et nos écrans ont été enrichis de couleurs et de médias pour améliorer l'expérience utilisateur, notamment avec des carrousels interactifs sur la page d'accueil, des vidéos en lecture automatique sur les pages de détails des produits, ainsi que des micro-interactions.
Prototype
Prototype mobile
Apprentissages et prochaines étapes
Concevoir une solution de commerce électronique pour l'Artisan des Mélanges était à la fois excitant et stimulant, en raison de la quantité d'informations disponibles concernant cette industrie, ce type de produits, et la marque multifacette qui était impliquée. De plus, nous devions atteindre à la fois les objectifs commerciaux des parties prenantes et les besoins de nos utilisateurs.
Mettant tous ces aspects en perspective et en tenant compte du véritable intérêt et des retours positifs que nous avons reçus de nos sessions de tests d'utilisabilité, il semble que nous avons réussi à proposer une solution conviviale qui améliorerait réellement la navigation des utilisateurs, la culture de la marque, et l'expérience globale du produit.
Cependant, comme nous devions prioriser nos décisions de conception dans notre MVP et selon mon propre niveau d'exigence, notre prototype peut encore être amélioré en ajoutant plus de fonctionnalités afin de répondre à toutes les frustrations des amateurs de thé et de café que nous avons identifiées à chaque étape du parcours utilisateur.
Merci d'avoir lu mon étude de cas
Si vous avez des questions, n'hésitez pas à me contacter !
CV