Club Alpin Français
Challenge : Découvrir les points de frustration du site actuel et fournir les solutions pour améliorer l'expérience utilisateur.
Livrables : Strategie | Rapport de recherches utilisateurs | Personas | Task flows | Wireframe | UI | Prototype.
Role : Product Designer
Avec + 2000 adhérents, Le Club Alpin Français de Lyon créé il y a maintenant 150 ans, vise à faire découvrir la montagne sous toutes ses facettes.
Challenge
Le défi consiste à comprendre la réaction des utilisateurs face à l'interface actuelle, à identifier les points faibles "pain points" et à proposer une solution pour améliorer leur expérience.
Process
Pour la phase initiale de recherche utilisateur, j'ai mené des tests d'utilisabilité afin de cerner les problèmes existants. Lors de la phase de synthèse, j'ai utilisé la méthode "Diagramme d'affinité" pour analyser les points de friction et déterminer les priorités. J'ai ensuite généré des flux de tâches pour identifier les étapes du processus où les utilisateurs rencontraient des difficultés, puis créé wireframes et enfin, j'ai pu tester les outils IA durant ce projet pour générer un prototype haute fidélité. Le projet a duré deux mois. Examinons maintenant chaque étape plus en détail.
RECHERCHES
Interview utilisateurs
L'objectif de cette phase est de comprendre l'éco-système, les utilisateurs et leurs besoins réels. Afin de m'imprégner du projet j'ai commencé par une analyse du site actuel afin d'identifier d'où nous partions. J'ai également fait le point avec les membres actifs gérant le site. Le but a été de recueillir les mails et retours physique déjà remontés depuis que le site a été lancé.
Le point important a été d'identifier les principaux utilisateurs de l'interface.
3 types d'utilisateurs ont été identifiés : les Encadrants, les Rédacteurs, et les Membres qui participent aux sorties. Afin de prioriser le besoin, le premier chantier d'amélioration portera sur le profil "Encadrant". J'ai donc réalisé mes entretiens utilisateurs auprès de ce public cible, en leur demandant les tâches suivantes :
Type de test : Recherches qualitatives modérées, à distance. Contenu : Une première phase de présentation, puis réalisation de tâches et questions ouvertes (type SEQ sur les tâches et Magic Wand)
- Tâche 1 : En tant qu'encadrant, veuillez poster une nouvelle sortie.
- Tâche 2 : Modifie une sortie existante pour rajouter des informations.
- Tâche 3 : En tant qu'encadrant, recherche une sortie pour le mois prochain.
SYNTHESE
Affinity Mapping
Afin de dégager les principaux axes d'améliorations, j'ai réuni tout les retours dans un diagramme d'affinité (Affinity mapping). Une fois tout les éléments réunis, des thématiques sont naturellement ressorties. Un système de notation, appuyer par une Matrice Coût/Valeur nous a permis de prioriser et d'identifier les Quick Wins
Basé sur les résultats voici les points qui ont été définis comme priorité 0 :
- Difficulté à trouver une sortie
- Difficulté à se connecter à son espace Membre
- Lisibilité de l'interface et des éléments d'intéraction de manière générale
- Menu de navigation principal jugé "compliqué"
- Utilisation du smartphone pénible car interface non optimisée/responsive
Personas
J'ai créée des personas pour faciliter la communication des informations recueillies sur les utilisateurs au cours des recherches :
IDEATION
Flux utilisateur
J'ai créé des "task flows" pour la tâche courante : "Création d'une sortie"
Wireframe
Réalisation des premières maquettes "basse fidélité" sur la base des "pain points" utilisateurs. J'ai testé de multiples variantes, sur les tâches clés des utilisateurs : le processus de création de sortie, la recherche et l'inscription à une sortie.
PROTOTYPE
Architecture de l'information
Le menu d'origine proposait trop de liens et de pages orphelines sans valeur ajoutée. L'objectif a été la refonte du menu de navigation avec un niveau 1 correspondant aux actions principales et aux contenus attendus. Cela est donc passé par le regroupement des pages en thème et un naming approprié, plus simple.
Design et outils IA
Ce projet a été l'occasion de tester les outils IA tel que Rocket.new et Figma Make.
Bien que Rocket.new ai proposé des idées intéressantes, c'est Figma qui a été utilisé pour mener à bien ce projet.
ll m'a fallu + 97 prompts et itérations pour arriver à une solution satisfaisante.
KPI
Mesurer l'efficacité de la nouvel interface avec des indicateurs concrets :
Diminution du temps pour trouver et s'inscrire à une sortie
Augmentation du taux d'utilisation du site
Retour à l'essentiel
Depuis sa création, le menu de navigation et l'accueil on subit des modifications qui ont rendu l'expérience difficile : beaucoup de liens, trop de couleurs , des typographies de taille et graisse différentes... Une surchage cognitive qui entâche l'expérience de navigation et l'image du CAF au global. j'ai décidé de tout remettre à plat et de reprendre les bases, avec toujours en ligne de mire, les besoins utilisateurs.
Augmenter la valeur
J'ai priorisé les actions demandant le minimum d'effort et ayant un fort impact, tant pour le CAF que les utilisateurs finaux.
Prioriser et hiérarchiser
Mise en avant des actions et des contenus clés pour répondre vraiment aux besoins utilisateurs
Créer le Design System
Mise en place des premières briques d'un Design System, pour offrir un design simple, évolutif et consistent.
Revisiter l'expérience de recherche de Sortie
La refonte a permis de diminuer le temps nécessaire pour trouver une sortie, grâce à un nouveau parcours utilisateurs.
En effet cette fonction est LA fonction principale du site.
De la recherche depuis l'accueil ou la page de sorties, à l'inscription, l'objectif a été de transmettre toutes les informations nécessaires au bon moment et de mettre les éléments d'action clairement en avant.
Augmenter la satisfaction et l'engagement
J'ai choisi d'enrichir l'expérience de recherche grâce à une toute nouvelle vue Carte pour localiser le lieu de sortie. Fan d'expérience en plein air, la localisation de la sortie permet la découverte d'un nouveau massif ce qui est un élément clef des attentes des adhérents du CAF.
Présentation du Design System
La mise en place des premières briques de ce design system permet de partager les éléments avec les équipes de développement, centraliser les éléments de design, et permet au CAF qui mutualise son interface avec d'autres CAF, de proposer une expérience de navigation consistente, cohérente, et évolutive dans le temps.
