L'app des coachs, des participants et des entreprises clientes d'un service de sport en entreprise haut de gamme.
Rôle : Product Designer & Design System · Lion Coach · 2023 - 2026
Rôle
Product Designer, seul designer
Équipe
3 devs, 1 chargée de com, 1 manager
Durée
4 ans, 2022 à 2026
Plateforme
Webapp mobile et back-office
5
profils d'utilisateurs dans un seul produit
190+
écrans et états mobiles conçus
96
composants, dont 43 avec variantes
1
typo et 56 styles de texte, là où il n'y avait aucune règle
À mon arrivée, l'app avait été lancée par un freelance externe puis complétée par les développeurs, sans base commune. Chaque nouveau besoin de l'entreprise ajoutait un écran, un style, une logique. Le résultat : un parcours d'inscription aux séances peu lisible, plusieurs typos sans règles, et une app qui ne ressemblait pas au service premium que Lion Coach vend à ses clients.
Comment faire d'une app construite par morceaux un produit cohérent, à la hauteur d'une marque haut de gamme, sans arrêter de livrer de nouvelles fonctionnalités ?
Ancienne version
Refonte
Lion Coach intervient dans les entreprises avec des cours collectifs, et propose aussi des séances individuelles aux dirigeants. Une seule app devait servir tout ce monde.
Un produit, cinq profils
Une seule app pour des besoins très différents
Coach
Retrouver l'adresse, l'horaire et surtout la liste des participants pour préparer sa séance
Participant
S'inscrire aux séances, gérer sa fiche santé et ses absences
Référent
Suivre la participation de son entreprise avec des statistiques dédiées
Particulier
Un espace à part pour les séances individuelles des dirigeants
Admin
Piloter le remplissage des séances, relancer certificats médicaux et cotisations
L'ancien formulaire mélangeait tous les cas sur un seul écran dense : récurrence, dates, jours, horaires, sans distinguer une indisponibilité ponctuelle d'une récurrente. Les coachs remplissaient des champs qui ne les concernaient pas.
Un parcours en étapes
Le coach ne voit que les champs qui le concernent
Un seul écran dense
Un parcours guidé
1. Renseigner l'essentiel
2. Vérifier et confirmer
3. C'est terminé !
J'ai découpé le parcours en étapes : le coach choisit d'abord le type d'indisponibilité, puis ne voit que les champs utiles. Chaque étape se termine par une confirmation claire, et la modification comme la suppression sont pensées comme des parcours à part entière.
Sur l'ancien accueil, des actions rares comme contacter l'admin ou déclarer un retard prenaient autant de place que le planning, alors que c'est lui que le coach consulte tous les jours. Et tout passait par un menu hamburger.
L'accueil suit l'usage réel
La prochaine séance d'abord, le reste à portée de main
Menu hamburger, tout au même niveau
Priorités claires et tab bar
J'ai réorganisé l'écran selon l'usage : la prochaine séance et les séances à valider d'abord, les démarches administratives visibles sans dominer, le contact déplacé dans le menu. Et j'ai ajouté une tab bar pour un accès direct à l'accueil, au planning, à la messagerie et aux indisponibilités.
Le référent, c’est la personne qui gère le programme sport côté entreprise cliente. Il doit savoir si les séances fonctionnent, comment évolue le bien-être des équipes, et où en sont les cotisations. Les données existaient, mais brutes, impossibles à exploiter telles quelles.
Fréquentation des séances
Baromètre
Suivi des cotisations
J’ai conçu trois vues, chacune pensée pour une décision précise : La fréquentation, pour savoir si un créneau marche. Pour chaque cours, trois indicateurs côte à côte : inscrits à l’année, moyenne des présents et participants uniques. Un écart entre inscrits et présents se voit immédiatement. Le baromètre, pour suivre le bien-être des équipes dans le temps. Forme physique, fatigue, stress, sommeil ou ambiance d’équipe, comparés d’une année sur l’autre. Quand un indicateur se lit à l’envers, comme la fatigue, un avertissement l’indique pour éviter les contresens. Les cotisations, pour gérer l’administratif sans relances manuelles. Les paiements sont classés par état, et les attestations se téléchargent ou s’envoient en un seul envoi groupé.
Il n'existait aucun système. J'ai redéfini l'identité visuelle de l'app, puis construit la bibliothèque complète sur laquelle reposent tous les écrans : couleurs, typographie, espacements, icônes et composants. Les nouvelles fonctionnalités, jusqu'à la vidéo à la demande ajoutée en fin de projet, s'intègrent sans recréer d'incohérence.
Un design system pour tout le produit
Construit de zéro, sur une identité visuelle redéfinie
Bleu Lion Coach
Bleu doux
Bleu clair
Bleu canard
Cyan
Or
Jaune
typo, Montserrat, et 56 styles de texte
49
variables de couleur, avec un mode clair et un mode sombre prêt à être activé
16
variables d'espacement
composants, dont 43 avec variantes, pour 223 variantes au total
Un système avant les écrans. Avec cinq profils et des besoins qui évoluaient en permanence, chaque écran conçu sans base commune créait une nouvelle incohérence. Le design system n'était pas un livrable de plus, c'était la condition pour que le produit tienne.
Le premium commence avant le premier écran. L'app était une webapp, et pour l'installer sur son téléphone il fallait suivre un tutoriel. Une étape qui cassait la promesse haut de gamme dès la première minute. Depuis, je considère le choix de la plateforme et l'installation comme une partie de l'expérience, c'est aussi pour ça que je pousse le passage en natif sur RPGFitness.
Concevoir pour un produit qui grandit. La refonte a été livrée aux développeurs et son développement avait démarré à mon départ. Elle a été pensée pour absorber de nouveaux usages, et la vidéo à la demande en est la preuve.
Louis Picard, Product Designer