CampEasy
Rôle
Concepteur UX
Recherche d'utilisateurs
Concepteur d'interface utilisateur
Durée
Février 2025
Durée
Projet solo
Outils utilisés
Figma
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.
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 :
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.
De plus, pour affiner davantage l’orientation de la conception, j’ai créé un personnage basé sur des informations de recherche et développé un storyboard pour visualiser les moments clés de frustration et les opportunités d’amélioration.
Personas
Emily – Première Campeuse27, Assistante Marketing, Lyon
Objectifs : trouver du matériel abordable et adapté aux débutants ainsi que des conseils clairs.
Points faibles : submergé par les choix ; recommandations peu claires ; options budgétaires difficiles à trouver.
Daniel – Campeur expérimenté et papa occupé42, ingénieur, Bordeaux
Objectifs : Trouver rapidement du matériel durable et fiable.
Points faibles : perte de temps à parcourir des produits non pertinents ; filtrage médiocre ; applications lentes.
Storyboard : La frustration d'Emily
Scène 1 : Excité mais perdu parmi trop d'options de produits.
Scène 2 : Je ne sais pas quel équipement est essentiel pour les débutants.
Scène 3 : Confus par les filtres ; impossible de rechercher par niveau d'expérience.
Scène 4 : Soit il achète les mauvais articles, soit il abandonne les achats.
Scène 5 : (Futur) Solution idéale : Kits de démarrage transparents et filtres pour débutants.
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 une expérience mobile et Web transparente qui…
✔️ Réduit la fatigue décisionnelle en organisant les recommandations ?
✔️ Simplifie la navigation avec un filtrage intelligent et des catégories claires ?
✔️ Optimise la convivialité mobile pour une expérience d'achat sans friction ?
Processus de conception:
idéation et prototypage
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.
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.
1ère tentative Page d'accueil
Avec une structure de base en place, j'ai créé un prototypage interactif basse fidélité, permettant aux utilisateurs de naviguer à travers :
La page d'accueil
La section des conseils pour les débutants
Le système de recherche et de filtrage avancé
Filtre avancé
Section des astuces
Barre de recherche
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é.
Sur la base des wireframes établis, j'ai développé des maquettes haute fidélité.
Logo
Le logo CampEasy allie simplicité et symbolisme. Son design arrondi et minimaliste évoque une tente et une épingle , renforçant l'idée de voyage et de séjours en plein air. La typographie épurée évoque la confiance et la simplicité d'utilisation, valeurs fondamentales de la marque.
Palette de couleurs
Le vert a été choisi comme couleur principale pour évoquer la nature, le calme et le respect de l'environnement. Il connecte instantanément les utilisateurs au thème du camping tout en instaurant la confiance. Les gris neutres favorisent la lisibilité et créent une interface épurée et moderne. Une couleur d'accent chaude comme l'orange peut être utilisée pour souligner les actions clés et évoquer l'aventure.
Typographie et interface utilisateur
Une police sans empattement moderne assure clarté et accessibilité sur tous les appareils. Des formes arrondies , une hiérarchie visuelle claire et des espaces généreux contribuent à une expérience de réservation conviviale et sans stress. Pour une meilleure ergonomie, j'ai intégré des icônes de navigation claires et étiquetées , garantissant un accès aisé aux sections clés, même pour les personnes peu familiarisées avec la plateforme.
Pour s'adapter à différents appareils, j'ai conçu des maquettes pour mobile, tablette et ordinateur de bureau, garantissant une expérience fluide et cohérente sur toutes les tailles d'écran.
Durant cette phase, j'ai également introduit une fonctionnalité « Conseils favoris », permettant aux utilisateurs de sauvegarder des conseils de camping essentiels pour y accéder facilement ultérieurement. Cette fonctionnalité s'est avérée particulièrement utile pour les débutants qui souhaitaient consulter des informations clés sans avoir à les rechercher à nouveau.
Conseils préférés
Page d'accueil
Barre de recherche
Section des astuces
Filtre avancé
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.