Club Alpin Français
Le Club Alpin Français de Lyon créé il y a maintenant 150 ans, vise à faire découvrir la montagne sous toutes ses facettes.
Le client : Club Alpin Français • Rôle : Pilotage, UX & UI Design
Le défi
Unifier et simplifier l'accès aux sorties pour un club historique de 2 000 adhérents, en transformant une interface vieillissante en un outil de découverte fluide, accessible et optimisé pour le mobile, adapté à un public multigénérationnel.
Mesurer l'efficacité avec des indicateurs cibles :
Objectif d'augmentation de l'engagement et de l'utilisation de la plateforme
Réduction du temps de parcours pour trouver et s'inscrire à une sortie
Appliquer le Design Thinking : de l'immersion au prototype
Ce projet a été l'opportunité d'appliquer une démarche Design Thinking centrée sur les besoins réels des membres. Une fois les principaux points de friction (pain points) identifiés, l'enjeu était de cadrer la feuille de route. Dans ce contexte associatif aux ressources maîtrisées, l'utilisation d'une matrice Coût / Valeur s'est avérée particulièrement efficace : elle a permis d'isoler les quick wins et de prioriser stratégiquement les chantiers à forte valeur ajoutée.
Comprendre les véritables
frictions d'usage
Tests d'utilisabilité et focus sur les Membres
Trois types d'utilisateurs ont été identifiés : les Encadrants, les Rédacteurs, et les Membres qui participent aux sorties. L'objectif de cette phase était d'analyser le parcours des Membres dans leur recherche de sorties. Pour couvrir la diversité des âges et des usages du club, j'ai mené des tests d'utilisabilité à distance axés sur des scénarios clés.
Format du test : Tests qualitatifs modérés, réalisés à distance.
Méthodologie : Entretien d'introduction, réalisation de scénarios de tâches et questions ouvertes. Évaluation de la charge cognitive et de la pénibilité via l'échelle SEQ (Single Ease Question) et projection des besoins par la technique de la Magic Wand.
Scénarios utilisateur (Membres) :
- Tâche 1 : Trouver une nouvelle sortie dans l'agenda
- Tâche 2 : Effectuer le parcours d'inscription à une sortie sélectionnée.
- Tâche 3 : Accéder aux informations clés pour devenir adhérent du club.
Transformer la complexité
en priorités produit
Diagramme d'affinité, matrices et personas
Tous les retours utilisateurs collectés ont été structurés via un diagramme d'affinité (Affinity Mapping). Cette étape clé a fait émerger les thématiques critiques et, couplée à une matrice Coût/Valeur, a permis de définir les "Priorités 0" absolues :
- Fluidifier la recherche de sorties et l'accès à l'espace membre
- Alléger un menu de navigation jugé trop complexe.
- Repenser entièrement l'ergonomie mobile, l'usage sur smartphone étant devenu prioritaire et pénalisant.
Personas
J'ai ensuite traduit ces insights en personas vivants pour aligner toutes les parties prenantes autour des mêmes objectifs
Architecturer l'interface : la phase de Wireframing
Valider la structure et la hiérarchie avant l'habillage visuel
Avant d'aborder la direction artistique, la réalisation de wireframes a permis de structurer les nouveaux parcours clés. Cette étape a été essentielle pour tester la disposition des filtres, la hiérarchie des informations sur les fiches de sorties et le placement de la vue carte, en évitant que le choix des couleurs ou de la typographie n'interfère dans les retours d'ergonomie.
Repenser l'exploration et la découverte
Moteur de recherche repensé & Vue Carte interactive
La phase de recherche a révélé un besoin d'exploration chez les adhérents : la volonté de découvrir de nouveaux lieux et de visualiser l'emplacement géographique d'une sortie en un coup d'œil.
La refonte doit permettre de diminuer le temps nécessaire pour trouver une sortie, grâce à un nouveau parcours utilisateurs.
De la recherche depuis l'accueil à 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.
Focus sur la nouvelle interface
Mise en place d'un moteur de recherche multi-critères (discipline, niveau, date, disponibilité) permettant d'accéder à une sortie en quelques clics.
La Vue Carte Interactive
Introduction d'une fonctionnalité inédite pour le club. Elle permet aux utilisateurs d'explorer le territoire, de se repérer visuellement et de choisir leurs sorties en fonction de la destination, répondant à leur soif de découverte.
UI & Fondations du Design System
Créer un système visuel cohérent, accessible et évolutif
Pour garantir la pérennité du site et la cohérence de l'expérience, la phase de Design UI s'est appuyée sur la création des premières briques d'un Design System adapté aux enjeux d'un public multigénérationnel :
Un bouton facile à utiliser pour tous
Nos boutons respectent une taille minimale de 48px pour garantir une bonne accessibilité, notamment sur mobile et pour les personnes ayant des difficultés de dextérité. Les couleurs utilisées assurent un contraste suffisant selon les exigences de la norme WCAG AA.
Pourquoi ?
- Taille minimale de 48px pour une meilleure manipulation sur mobile et pour les personnes ayant des difficultés de dextérité.
- Contraste couleur conforme au niveau AA de la norme WCAG (≥ 4,5:1 pour le texte normal).
- Respect des recommandations WCAG (tous publics).
Avant / Après
Hiérarchisation stricte des informations (niveau technique, places restantes, localisation, dates) pour offrir une lecture rapide et réduire la charge cognitive.
Rationalisation de la charte graphique : Réduction des codes couleurs pour guider l'œil vers l'action et amélioration des contrastes typographiques (normes RGAA / accessibilité).
Prototypage augmenté :
l'IA intégrée au workflow
Gain de productivité et itérations en haute fidélité
Afin d'accélérer la phase de réalisation et d'offrir un prototype interactif réaliste, j'ai intégré des outils d'IA à mon workflow de conception.
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.
Bilan & Impact
En combinant une recherche utilisateur de terrain, une priorisation pragmatique et des innovations fonctionnelles fortes (vue carte, filtres dynamiques, cartes UI), cette refonte dote le Club Alpin Français de Lyon d'une plateforme numérique à la hauteur de son histoire.
La nouvelle interface offre une expérience fluide, accessible et inclusive, prête à accompagner plus de 2 000 membres lors de leurs prochaines sorties en montagne. Elle concrétise ainsi les ambitions fixées dès le départ : réduire de moitié le temps de recherche (-50%) et dynamiser durablement l'engagement de la communauté (+20%).