Une plateforme
de yoga repensée
pour inspirer
confiance
Un produit qui marchait, mais qui n'inspirait pas encore confiance
Yogspace met en relation des élèves avec des professeurs de yoga certifiés, pour des cours particuliers en direct, dans la tradition des grandes lignées indiennes. Je ne partais pas d'une page blanche : le produit était déjà construit et en ligne.
Ce que Yogspace vendait, c'était de la crédibilité. Un certificat vérifié, une vraie lignée, un professeur qui vaut qu'on paie plutôt que de suivre une vidéo YouTube gratuite. Visuellement, le site n'en disait rien. Des boutons en forme de pilule, une typo épaisse et ronde, des aplats crème sans relief : on se serait cru dans une app pour enfants, alors que la plateforme demande de confier sa pratique à un inconnu. Je n'inventais pas une marque à partir de rien. Il fallait que le site ait enfin l'air aussi sérieux que le service qu'il propose.
Typographie, couleurs, composants d'interface
Badges de confiance & frise des certifications
Une bibliothèque de composants Figma complète
Tout au long du développement en Next.js
Quatre choix pour la refonte
La typo d'origine, ronde et massive, donnait un côté ludique à une plateforme de certification. J'ai passé les titres en EB Garamond, associée à Karla pour les textes d'interface. Le rendu évoque un hôtel haut de gamme plus qu'une app de fitness.
Apprendre le yoga à sa source.
EB Garamond / Karla
Toutes les apps de yoga piochent dans le même vert sauge ou le même bleu spa. J'ai choisi une terre cuite chaude, qui tire vers le safran, un clin d'œil discret au drapeau indien et aux lignées dans lesquelles ces professeurs se sont vraiment formés. Posée sur du crème, avec un bleu nuit presque noir pour structurer l'interface, elle évoque une marque de voyage ou d'hôtellerie soignée bien plus qu'un template.
« Certifié », écrit simplement dans un paragraphe, ne voulait rien dire. J'ai dessiné une petite série de badges sur mesure (Top professeur, Certifié, Spécialiste) et j'ai transformé l'historique de certification de chaque professeur en vraie frise chronologique. Le diplôme devient quelque chose qu'on voit.
Je voulais que ces pages soient douces et qu'elles respirent, les deux choses qu'un professeur de yoga vous demande sur le tapis. La douceur, c'était abandonner les bordures dures au profit d'ombres aux tons chauds, qui séparent les blocs sans arête franche. La respiration, c'était des blocs moins nombreux et plus grands, avec de larges espacements, là où l'original enchaînait des pilules toutes identiques. Le but est de rassurer : une interface calme inspire plus facilement confiance.
Le résultat : une vraie bibliothèque de composants
Navigation, boutons, champs de formulaire, cartes de connexion, icônes : tout est généré et rangé dans le fichier que l'équipe ouvre tous les jours.
Deux pages, avant et après la refonte
La page d'accueil est passée d'un mur vert compact, sans hiérarchie visuelle, à des sections aérées : une barre de recherche bien visible en haut, puis les garanties et les professeurs, chacun avec assez d'espace pour être lu.
Sur le profil professeur, la liste de tarifs est désormais accompagnée de trois badges de confiance que j'ai dessinés à la main (Top professeur, Certifié, Spécialiste) et d'une vraie frise de certifications à la place d'une liste à puces. Le diplôme, sur lequel repose toute la plateforme, est la première chose que l'on voit.
Un nouveau parcours d'inscription pour les professeurs
Avant qu'un professeur puisse recevoir ses premières réservations, il faut recueillir beaucoup d'informations : certifications, tarifs, planning de la semaine, vidéo. Tout l'enjeu était dans le formulaire : organiser ces informations pour que chaque professeur avance à son rythme, car personne n'a toutes les réponses sous la main du premier coup.
Qui est le professeur : photo, nom, titre court et quelques mots de présentation
Les formations et diplômes que les élèves voient sur le profil
Les styles de yoga et les cours proposés
Le prix d'une séance et sa durée
Les disponibilités du professeur chaque semaine, jour par jour
Une vidéo pour présenter le professeur aux élèves
Ci-dessous, les étapes 1 et 5.
