Prendre sa licence sportive en 5 minutes · Étude de cas UX/UI

Aller au contenu
This site is also available in English.Switch to English
Projet de fin d’études2026Mobile, tablette, desktopSport-santéBack‑office

Ma licence en 5 minutes

Prendre sa licence sportive en 5 minutes : Conception UX/UI d’un parcours de prise de licence pour une fédération de sport-santé : un tunnel licencié en 5 étapes, un espace club pour les bénévoles et un design system accessible, sur mobile, tablette et desktop.

Rôle
Manager de projet digital en UX design
Durée
2 mois, projet de fin d’études
Panel
50 licenciés et 20 clubs
Outils
Figma, FigJam, Claude connecté à Figma (MCP)
Prendre sa licence sportive en 5 minutes, maquettes mobile et desktop (données fictives)

01 Contexte

Chaque saison, des milliers de pratiquants prennent leur licence auprès d’un club affilié. Les démarches reposent sur des formulaires longs et sur une saisie manuelle par des clubs souvent bénévoles.

Objectif : une prise de licence autonome, rapide et accessible, qui rend du temps aux clubs.

02 Le problème

Côté licencié, des démarches longues et des justificatifs de santé mal expliqués. Côté club, des relances à la main et des dossiers incomplets.

03 Ma démarche

Un double diamant sur 2 mois : diagnostic, cadrage, idéation, prototypage, tests. Entretiens avec un panel de 50 licenciés et 20 clubs, personas, service blueprint et user flow avant le premier écran.

Principe directeur : digital par défaut, humain si nécessaire.

Service blueprint simplifié de la prise de licence, de la découverte à la pratique, avec trois moments de vérité
01Service blueprint et trois moments de vérité : santé, paiement, réception de la licence.
Le projet en chiffres et deux écrans clés : choix de la formule et autorisations (données fictives)
02Le projet en chiffres et deux écrans clés.

04 La recherche

Des entretiens avec ceux qui vivent la prise de licence, côté pratiquant et côté club.

50licenciés interrogés
20clubs interrogés
2mois de projet
5étapes dans le tunnel

05 Cinq choix de conception

Un tunnel en 5 étapes lisibles : Club et formule, Mon dossier, Ma santé, Autorisations, Paiement. Chaque écran porte un choix précis.

Un en-tête « Étape X sur 5 » et une barre de progression sur chaque écran du tunnel
01Un repère « Étape X sur 5 » sur chaque écran.
Un seul champ mot de passe avec jauge de robustesse et critères
02Un seul champ mot de passe, avec jauge de robustesse.
Le questionnaire de santé proposé avant le certificat médical
03Le questionnaire de santé d’abord, le certificat seulement si besoin.
Consentements facultatifs décochés par défaut, transmission nécessaire expliquée à part
04Des consentements facultatifs décochés par défaut.
Paiement express en tête, puis carte, 3 fois sans frais et prélèvement SEPA
05Le paiement express en tête, 3 fois sans frais et SEPA.

06 Un design system accessible

29 variables de couleur, 13 variables de dimension, 13 styles de texte, 50 icônes et 15 composants à variantes, en Plus Jakarta Sans.

Contrastes AA, cibles tactiles de 44 px, libellés visibles, erreurs signalées par une icône et un texte, jamais de texte sous 12 px.

Design system : couleurs, échelle typographique, icônes et composants à états
01Tokens, typographie, icônes et composants à états.

07 Partout, sur tous les écrans

Mobile d’abord, puis tablette et desktop : écran scindé pour la connexion, récapitulatif fixe pendant le tunnel, planning en semaine.

Côté club : tableau de bord priorisé, dossiers à valider en un écran, saisie assistée, appel des présents sur mobile.

Parcours mobile complet de la prise de licence (données fictives)
01Le parcours mobile, de l’accueil à la licence.
Tunnel de prise de licence sur desktop avec récapitulatif fixe (données fictives)
02Le tunnel sur desktop.
Espace club : tableau de bord et dossiers à valider (données fictives)
03L’espace club des bénévoles.

08 Livrables

Recherche, cartographies, design system, maquettes mobile, tablette et desktop, espace club responsive et prototype animé (Smart Animate, carte de licence qui se retourne, confirmation animée).

129écrans conçus
15composants à variantes
80+interactions sur mobile
3formats

Chiffres comptés par script dans le fichier Figma.

09 Mesurer la réussite

Test modéré du prototype mobile avec 8 licenciés, après la V2 des écrans clés. La promesse est tenue : 4 min 20 en temps médian. L’abandon le plus fort, 13 %, se situe à l’étape Ma santé.

88 %taux de complétion du tunnel
4 min 20temps médian de prise de licence
86 %dossiers validés sans relance
81score SUS sur 100 (moyenne : 68)

Résultats illustratifs, projet de fin d’études.

10 Transparence

  • CadreProjet de fin d’études, Mastère UX design (ISCOD), 2026. Maquettes non déployées.
  • RechercheEntretiens avec un panel de 50 licenciés et 20 clubs.
  • Test utilisateurTest modéré du prototype mobile avec 8 licenciés. Résultats présentés à titre illustratif.
  • DonnéesPersonnes, club et montants des maquettes sont fictifs.
  • MéthodeConçu dans Figma avec un workflow assisté par l’IA (Claude connecté à Figma), dirigé et relu par le designer.