Rockeez — PWA de Coaching Mental Gamifiée

Le contexte

Rockeez est une application web progressive imaginée pour Stéphanie Chenal, coach en préparation mentale, afin d’accompagner les jeunes sportifs dans le développement de leurs compétences mentales.

L’objectif était de dépasser le format classique du coaching et de proposer une expérience numérique capable de prolonger l’accompagnement entre les séances.

Confiance, concentration, gestion de la pression, fixation d’objectifs ou encore connaissance de soi deviennent ainsi des compétences que les jeunes peuvent travailler à travers une plateforme interactive, ludique et adaptée à leurs usages.

Le projet a progressivement évolué vers un véritable écosystème pédagogique gamifié, accessible directement depuis le navigateur et installable comme une application grâce à son fonctionnement en PWA.

Le défi

Le principal enjeu était de réussir à parler de préparation mentale à un public jeune sans donner l’impression d’utiliser un outil scolaire, médical ou institutionnel.

L’expérience devait être suffisamment ludique pour donner envie de revenir régulièrement, tout en restant crédible et professionnelle pour accompagner un véritable travail de coaching.

Il fallait notamment concevoir une plateforme capable de :

• rendre les contenus pédagogiques simples et engageants ;
• accompagner progressivement chaque sportif ;
• valoriser les efforts plutôt que uniquement les résultats ;
• intégrer des mécaniques de jeu sans détourner l’objectif pédagogique ;
• proposer une expérience très visuelle et identifiable ;
• fonctionner parfaitement sur ordinateur, tablette et smartphone ;
• permettre à la coach d’administrer elle-même les contenus et les élèves ;
• conserver une architecture suffisamment robuste pour faire évoluer le produit dans le temps.

Notre approche

Rockeez a été développé comme une véritable application SaaS e-learning sur-mesure avec Next.js et TypeScript.

L’architecture technique a été pensée dès le départ pour séparer proprement les interfaces, les règles métier, les accès aux données et les fonctionnalités pédagogiques.

La plateforme s’appuie notamment sur :

• Next.js avec App Router ;
• TypeScript en mode strict ;
• Tailwind CSS et shadcn/ui pour le système d’interface ;
• Better Auth pour l’authentification ;
• Prisma avec PostgreSQL pour les données ;
• une architecture modulaire permettant de faire évoluer indépendamment les différentes fonctionnalités ;
• une expérience responsive pensée dès la conception pour desktop, tablette et mobile ;
• une installation possible sur mobile grâce au fonctionnement PWA.

Une expérience pensée comme un parcours

L’apprentissage est organisé autour de modules, eux-mêmes découpés en chapitres comprenant différents types de contenus.

Chaque parcours peut combiner :

• contenus pédagogiques ;
• illustrations et scènes interactives ;
• exercices personnels ;
• questionnaires ;
• quiz ;
• vidéos et contenus multimédias ;
• outils de préparation mentale ;
• suivis de progression.

Les modules se débloquent progressivement afin de guider le jeune sportif sans le confronter immédiatement à une quantité importante de contenu.

L’objectif est de créer une sensation de progression permanente tout en conservant une véritable cohérence pédagogique.

Une gamification au service de l'apprentissage

Une part importante du travail a porté sur la gamification de l’expérience.

Rockeez intègre progressivement différents mécanismes permettant d'encourager l'engagement :

• points d’expérience ;
• niveaux ;
• badges et médailles ;
• titres ;
• récompenses ;
• objectifs à atteindre ;
• progression détaillée ;
• déblocage progressif des modules et outils ;
• système de vies associé aux quiz.

L’utilisateur dispose notamment de trois vies quotidiennes.

Une erreur lors d’un quiz entraîne la perte d’une vie. Lorsque toutes les vies sont utilisées, les quiz deviennent temporairement indisponibles jusqu’à leur réinitialisation.

Cette mécanique introduit une dimension ludique tout en encourageant le sportif à prendre le temps de réfléchir à ses réponses.

Une direction artistique forte

Rockeez possède une identité graphique développée spécifiquement pour le projet.

L’objectif était d’éviter les codes traditionnels des plateformes de formation pour construire une expérience beaucoup plus proche d’une application destinée aux nouvelles générations.

L’interface mélange notamment :

• univers sombre et lumineux ;
• dégradés violets, roses et cyan ;
• illustrations personnalisées ;
• personnages récurrents ;
• cartes très visuelles ;
• effets lumineux ;
• animations ;
• grandes typographies ;
• progression visuelle ;
• compositions adaptées aux différents sports.

Un travail important a également été réalisé sur les illustrations pédagogiques afin qu’elles ne servent pas uniquement de décoration mais participent directement à la compréhension des situations présentées.

Un parcours adapté aux jeunes sportifs

L’interface membre permet au sportif de retrouver rapidement :

• son niveau ;
• son expérience ;
• ses vies restantes ;
• sa progression générale ;
• son module en cours ;
• les prochains objectifs ;
• ses récompenses ;
• les outils débloqués ;
• ses compétences acquises.

Chaque écran cherche à limiter la charge cognitive et à mettre en avant une prochaine action claire.

Sur mobile, l’expérience a été particulièrement travaillée afin que Rockeez puisse réellement être utilisée comme une application au quotidien et pas simplement comme la version réduite d’un site desktop.

Un backoffice dédié à la coach

Un espace d’administration complète la plateforme afin de permettre à Stéphanie de gérer son accompagnement sans intervention technique.

Le backoffice permet notamment de gérer progressivement :

• les élèves ;
• les accès ;
• les modules ;
• les chapitres ;
• les contenus ;
• les exercices ;
• les quiz ;
• les récompenses ;
• les outils ;
• la progression individuelle.

Les comptes élèves sont administrés depuis cet espace afin de conserver un environnement privé et maîtrisé.

La coach peut ainsi adapter les parcours, consulter l’avancement d’un jeune et débloquer manuellement certains contenus lorsque son accompagnement le nécessite.

Une architecture métier évolutive

Le projet a été pensé pour dépasser largement le stade du prototype.

Les règles importantes comme la progression, les vies, les récompenses, l’expérience ou les droits d’accès sont gérées côté serveur afin de garantir leur cohérence.

Une attention particulière est portée à la séparation entre :

• interface utilisateur ;
• actions serveur ;
• accès aux données ;
• règles métier ;
• validation ;
• administration.

Cette architecture permet de faire évoluer progressivement Rockeez sans transformer l’application en un ensemble difficile à maintenir.

Résultat

Rockeez est devenu une expérience numérique située à la frontière entre plateforme de coaching, application e-learning et jeu de progression.

Le produit permet de prolonger le travail réalisé avec la coach en donnant aux jeunes sportifs un espace qu’ils peuvent retrouver régulièrement pour apprendre, expérimenter et visualiser leur évolution.

Le soin apporté à la direction artistique, aux interactions et aux illustrations permet également de donner au projet une véritable identité, loin des interfaces génériques habituellement associées aux plateformes de formation.

Plus qu’un simple support pédagogique, Rockeez transforme la préparation mentale en une expérience interactive, progressive et engageante, pensée spécifiquement pour les jeunes sportifs.