Lutherie Esprit Bois
Rôle
Durée
Concepteur UI/UX
Recherche d'utilisateurs
Développeur front-end
Février 2025
Durée
Projet solo
Outils utilisés
Figma
CSS
HTML
CampEasy est une application de fournitures de camping et un site Web réactif qui aide les utilisateurs à explorer, à découvrir et à acheter facilement du matériel de camping.
TL;TR
Le problème
Les campeurs débutants et expérimentés sont confrontés à des options écrasantes, à un manque de conseils et à une navigation inefficace sur les applications d'achat existantes.
La solution
Une application conviviale et un site Web réactif qui simplifie le processus de découverte, d'apprentissage et d'achat de fournitures de camping avec une expérience d'achat agréable et efficace.
Les résultats
Un prototype haute fidélité basé sur la solution, prêt à être testé pour mesurer la convivialité, l'efficacité et la satisfaction des utilisateurs.
rECHERCHE:
cOMPRENDRE LES UTILISATEURS
Context
Dans le cadre de ma certification Google UX Design, j'ai entrepris de créer ma première étude de cas UX : un projet fictif, mais basé sur la recherche, pour mettre en pratique et perfectionner mes compétences. Je souhaitais explorer un domaine alliant e-commerce, amour de la nature et aventure en plein air, ce qui m'a conduit à concevoir une boutique de matériel de camping.
Context
Pour mieux définir le problème, j’ai mené des recherches concurrentielles sur des sites Web et des applications similaires, analysé les avis des utilisateurs et parlé avec des campeurs de différents niveaux d’expérience.
J'ai découvert deux groupes d'utilisateurs distincts :
-
Les débutants qui ont du mal à choisir le bon équipement et qui ont besoin de recommandations abordables et bien organisées
-
Campeurs expérimentés , qui privilégient la durabilité et l'efficacité mais qui manquent des bons outils pour trouver rapidement des produits de haute qualité.
J'ai découvert plusieurs points douloureux :
Navigation inefficace
1
Manque de conseils pour les débutants
Les nouveaux campeurs ont du mal à s’y retrouver parmi un choix de produits écrasant sans recommandations claires ni conseils adaptés à leurs besoins.
2
Navigation inefficace
Les utilisateurs ont du mal à localiser et à filtrer rapidement les produits en raison de mises en page confuses et encombrées, ce qui entraîne de la frustration et une perte de temps.
3
Mauvaise optimisation mobile et problèmes techniques
De nombreuses applications mobiles rencontrent des bugs et ne sont pas optimisées pour une expérience d'achat fluide sur différents appareils, perturbant ainsi le parcours utilisateur.
Context
Pour mieux définir le problème, j’ai mené des recherches concurrentielles sur des sites Web et des applications similaires, analysé les avis des utilisateurs et parlé avec des campeurs de différents niveaux d’expérience.
J'ai découvert deux groupes d'utilisateurs distincts :
-
Les débutants qui ont du mal à choisir le bon équipement et qui ont besoin de recommandations abordables et bien organisées
-
Campeurs expérimentés , qui privilégient la durabilité et l'efficacité mais qui manquent des bons outils pour trouver rapidement des produits de haute qualité.
J'ai découvert plusieurs points douloureux :
Lucas – Musicien débutant 22, Étudiant en musique, Lyon
Objectifs : Trouver une première guitare abordable avec des conseils d'experts et un soutien pour l'apprentissage.
Points faibles : submergé par les options en ligne, besoin de conseils personnalisés, budget limité, souhaite garantir un bon rapport qualité-prix.
Sophie – Musicienne professionnelle 35 ans, Guitariste de studio, Paris
Objectifs : Découvrir des instruments uniques et de haute qualité qui se démarquent dans les milieux professionnels.
Points faibles : Temps limité pour la recherche, besoin d'instruments fiables pour les performances, privilégie l'artisanat et la qualité sonore au prix.
Pierre – Collectionneur et passionné de guitares 52, ingénieur et amateur, Bordeaux
Objectifs : Trouver des instruments authentiques, fabriqués de manière artisanale, avec des histoires intéressantes et des détails d'artisanat.
Points faibles : Recherche des instruments véritablement fabriqués à la main, souhaite soutenir les artisans locaux, valorise la tradition et l'authenticité plutôt que les tendances.
Suite à cette recherche, j'ai identifié une direction claire :
Le problème
Actuellement, la plupart des boutiques en ligne de matériel de camping souffrent d'une expérience utilisateur médiocre : interfaces surchargées, navigation confuse et manque de recommandations personnalisées. Les débutants ont besoin de conseils, tandis que les utilisateurs expérimentés recherchent l'efficacité. Or, les plateformes actuelles ne répondent pas à ces besoins spécifiques.
L'objectif
L'objectif de ce projet est de créer une plateforme conviviale qui rend l'achat de matériel de camping sans stress et agréable, s'adressant aux campeurs débutants et expérimentés avec une expérience intelligente et personnalisée.
Cela soulève des questions importantes :
Comment pourrions-nous concevoir un site Web qui…
✔️ Crée une confiance immédiate et met en valeur la qualité de l'artisanat ?
✔️ Présente clairement les services sans submerger les utilisateurs ?
✔️ Crée un lien émotionnel avec l'histoire de l'artisan ?
Processus de conception:
idéation et prototypage
Processus de conception:
idéation et prototypage
Context
Afin de garantir une navigation logique et efficace, j'ai commencé par concevoir le plan du site et le parcours utilisateur . L'objectif était de créer une architecture d'information simplifiant la navigation, permettant aux débutants comme aux campeurs expérimentés de trouver facilement ce dont ils ont besoin.
J'ai commencé par des wireframes papier , en utilisant des croquis rapides pour explorer différentes idées de mise en page. Cela m'a permis de générer rapidement des variantes pour les écrans clés avant de sélectionner et d'affiner les designs les plus efficaces pour en faire des wireframes numériques basse fidélité sur Figma.
Afin de garantir une navigation logique et efficace, j'ai commencé par concevoir le plan du site et le parcours utilisateur . L'objectif était de créer une architecture d'information simplifiant la navigation, permettant aux débutants comme aux campeurs expérimentés de trouver facilement ce dont ils ont besoin.
J'ai commencé par des wireframes papier , en utilisant des croquis rapides pour explorer différentes idées de mise en page. Cela m'a permis de générer rapidement des variantes pour les écrans clés avant de sélectionner et d'affiner les designs les plus efficaces pour en faire des wireframes numériques basse fidélité sur Figma.
Context
Afin de garantir une navigation logique et efficace, j'ai commencé par concevoir le plan du site et le parcours utilisateur . L'objectif était de créer une architecture d'information simplifiant la navigation, permettant aux débutants comme aux campeurs expérimentés de trouver facilement ce dont ils ont besoin.
J'ai commencé par des wireframes papier , en utilisant des croquis rapides pour explorer différentes idées de mise en page. Cela m'a permis de générer rapidement des variantes pour les écrans clés avant de sélectionner et d'affiner les designs les plus efficaces pour en faire des wireframes numériques basse fidélité sur Figma.
Afin de garantir une navigation logique et efficace, j'ai commencé par concevoir le plan du site et le parcours utilisateur . L'objectif était de créer une architecture d'information simplifiant la navigation, permettant aux débutants comme aux campeurs expérimentés de trouver facilement ce dont ils ont besoin.
J'ai commencé par des wireframes papier , en utilisant des croquis rapides pour explorer différentes idées de mise en page. Cela m'a permis de générer rapidement des variantes pour les écrans clés avant de sélectionner et d'affiner les designs les plus efficaces pour en faire des wireframes numériques basse fidélité sur Figma.
Principes clés UX/UI pour cette phase :
Loi de Jacob
Les utilisateurs s'attendent à des modèles familiers (par exemple, des barres de recherche, des catalogues basés sur une grille, des icônes de panier).
Solution : Suivre les normes de conception de commerce électronique établies pour maintenir la convivialité.
Seuil de Doherty
Les systèmes qui fournissent un retour d’information instantané et des temps de réponse rapides améliorent l’engagement.
Solution : interactions optimisées pour plus de rapidité, réduisant les temps d’attente et les étapes inutiles dans l’expérience de navigation.
Effet Von Restorff
Les éléments qui ressortent visuellement sont plus faciles à trouver et à mémoriser.
Solution : Concevez l'élément actuellement sélectionné et les actions clés (par exemple, « Ajouter au panier ») avec des couleurs à contraste élevé et des tailles plus grandes pour améliorer la visibilité.
Context
Sur la base des wireframes établis, j'ai fait quelques tests sur des maquettes , et j'ai fini par suivre ce système de conception :
Logo et image de marque
Typographie épurée et professionnelle "Lutherie EB" qui suggère l'artisanat et la tradition tout en restant moderne et accessible.
Palette de couleurs
Bruns chauds (#684F3E, #bc6c25) pour évoquer le bois et l'artisanat
Crème (#fefae0) pour l'élégance et la lisibilité
Accents dorés (#dda15e) pour une sensation premium et des appels à l'action
Typographie et interface utilisateur
Présentoir Playfair pour les titres (élégant, traditionnel)
Roboto pour le corps du texte (propre, lisible)
Hiérarchie claire garantissant l'accessibilité sur tous les appareils
Philosophie de conception
« L'authenticité du savoir-faire rencontre l'accessibilité moderne. » Le langage visuel allie l'héritage traditionnel de la lutherie aux standards web contemporains pour instaurer la confiance et mettre en avant la qualité.
Context
Principales fonctionnalités mises en œuvre
Conception réactive Approche mobile d'abord garantissant une expérience parfaite sur tous les appareils, cruciale pour les utilisateurs Web modernes.
Carrousel d'images Présentant l'atmosphère de l'atelier et les détails de la guitare pour communiquer immédiatement la qualité et la passion.
Présentation claire du service Trois cartes de service distinctes (ventes, réparations, travail personnalisé) avec des descriptions claires et des appels à l'action.
Éléments de confiance
Photographie professionnelle
Descriptions détaillées des services
Coordonnées claires
Localisation de l'atelier avec plan
Garanties de savoir-faire
Éléments interactifs
Navigation à défilement fluide
Effets de survol sur les cartes de service
Arrière-plan du héros Parallax
Barre flottante de médias sociaux
Conception finale
Expérience de bureau
Mise en page claire et professionnelle, avec une grande image principale illustrant l'atmosphère de l'atelier. Les services sont présentés dans une grille organisée, avec des images et des descriptions claires. La section « À propos » permet de créer un lien personnel avec l'histoire du luthier.
Expérience mobile
Design entièrement réactif préservant la hiérarchie visuelle et les fonctionnalités sur les petits écrans. Des boutons tactiles et une taille d'image optimisée garantissent une interaction mobile fluide.
CONSIDÉRATIONS D'ACCESSIBILITÉ
Avant la conception finale, j'ai privilégié l'accessibilité pour garantir l'inclusivité :
Hiérarchie visuelle claire
Pourquoi ? Une hiérarchie claire permet aux utilisateurs de parcourir rapidement le contenu, améliorant ainsi la navigation et réduisant la confusion.
Mise en œuvre:
-
Utilisez des titres distincts et en gras pour les sections et les sous-titres pour plus de clarté.
-
Organisez le contenu en sections numérisables avec des puces.
-
Donnez la priorité aux catégories importantes avec un texte bien visible.
Icônes très lisibles
Pourquoi ? Les icônes avec des étiquettes textuelles améliorent l'accessibilité, en particulier pour les utilisateurs souffrant de déficiences cognitives ou visuelles.
Mise en œuvre:
-
Associez toutes les icônes à des étiquettes de texte descriptives pour plus de clarté.
-
Choisissez des icônes intuitives qui s’alignent sur les modèles de conception courants.
-
Maintenez la cohérence dans les styles d’icônes pour une reconnaissance facile.
Fort contraste de couleurs
Pourquoi ? Un contraste élevé garantit la lisibilité pour les utilisateurs souffrant de déficiences visuelles, comme le daltonisme.
Mise en œuvre:
-
Adhérez aux normes WCAG AA pour le contraste entre le texte et l'arrière-plan.
-
Utilisez des couleurs à contraste élevé pour les éléments interactifs (par exemple, les boutons, les CTA).
-
Proposez un mode sombre ou des options de contraste personnalisables pour les utilisateurs malvoyants.
RÉFLEXION :
PRINCIPAUX POINTS À RETENIR
Concevoir CampEasy, ma première étude de cas UX, m'a appris l'importance d'une navigation claire, de l'accessibilité et d'un design réactif. Trouver l'équilibre entre simplicité pour les débutants et efficacité pour les campeurs expérimentés était un défi majeur. J'ai appris que de petites modifications de conception peuvent grandement améliorer l'ergonomie, ce qui façonnera mon approche pour mes futurs projets.
Prochaines étapes
Effectuer des tests d'utilisabilité
Comme il s’agissait de ma première étude de cas, mon prochain objectif est de tester mon prototype haute fidélité avec de vrais utilisateurs pour mesurer la convivialité, l’efficacité et la satisfaction.
Affiner les fonctionnalités de personnalisation
J'aimerais explorer des moyens de personnaliser encore plus les recommandations, permettant aux utilisateurs d'obtenir des suggestions d'équipement personnalisées en fonction de leurs achats passés et de leur niveau d'expérience.
Améliorer l'accessibilité
L'accessibilité est une priorité pour mes futurs projets. Pour ce projet, j'ai privilégié des couleurs contrastées et une typographie lisible, mais j'aimerais approfondir les directives WCAG et tester des designs avec des technologies d'assistance.