User experience (UX)
La recherche UX s’est portée sur trois points : la recherche concurrentielle sur des applications sportives directement ou indirectement en lien avec le domaine de la gymnastique, la réalisation de personas à l’aide d’un sondage adressé aux Clubs de gym en Belgique et la réalisation des parcours utilisateurs, entraîneurs et gymnastes.
User interface (UI)
La recherche UI s’est portée sur des wireframes en basse et haute définition, sur la réalisation du design système, le listing des fonctionnalités de l’application de gymnastique, la création d’une charte graphique et enfin la définition des styles de typographie.
Le logo Séquence est défini par des formes géométriques bleues. Celles-ci représentent une vue aérienne des zones de tapis où sont installés les différents agrès dans une salle de gymnastique. Le mot « Séquence » fait référence à la fonctionnalité principale de l’application : l’analyse vidéo.
1.CONSTAT
Une évidence : un environnement numérique saturé et des enjeux spécifiques à la gymnastique. Dans un contexte où l’on retrouve de nombreuses communautés de partage, j’ai constaté que le secteur de la gymnastique manquait de visibilité et d’accessibilité. La gymnastique est une discipline encore peu connue du grand public. Parallèlement, les sportifs attendent plus de visibilité, et de reconnaissance dans leur discipline. Le secteur du sport – et plus particulièrement celui de la gymnastique de haut niveau – n’échappe pas à cette tendance. Les clubs et fédérations, tels que la « Fédération francophone de Gymnastique et de Fitness (FfG), regroupant plus de 220 clubs et 35 000 membres », sont confrontés à des enjeux d’excellence, de performance et de gestion optimale de la progression de leurs athlètes.
2.PROBLEMATIQUE
Une évidence ici aussi : les limites de la communication dans la transmission des savoirs. Au cœur de la gymnastique de haut niveau, la qualité de la communication entre entraîneurs et gymnastes est un facteur déterminant de la performance. Or, une communication inefficace peut entraîner des erreurs d’interprétation, des incompréhensions et, par conséquent, un frein à la progression des sportifs. La diversité des profils, des compétences et des modes d’apprentissage accentue ces risques. Un message mal formulé ou mal compris – qu’il s’agisse d’une consigne, d’une correction ou d’un feedback – peut avoir des répercussions directes sur la qualité de l’entraînement et des résultats en compétition. Dans une discipline aussi exigeante que la gymnastique, où la rigueur technique et mentale est primordiale, optimiser la transmission de l’information est donc essentiel. Une évidence que j’ai vécue pour m’être moi-même investi dans ce sport durant plusieurs années de jeunesse.
3.OBJECTIFS
Il s’agira donc d’améliorer la transmission et le suivi des performances. Face à ce constat, l’objectif de mon projet de fin d’études est clair : c’est de de concevoir une application mobile dédiée à l’évaluation et au suivi des performances techniques, capable de proposer un feedback plus précis, une analyse détaillée de la progression ainsi qu’une collaboration renforcée entre les différents acteurs du club.
4.SOLUTIONS
Une solution s’impose donc : c’est de proposer une application sportive au service de la performance gymnique. Plutôt que de réinventer la roue, mon approche consiste à analyser les solutions existantes pour en garder les meilleures pratiques, identifier les points susceptibles d’amélioration et proposer une application qui réponde concrètement aux besoins du terrain. Cette application vise à offrir aux clubs de gymnastique un outil innovant prêt à accompagner le développement des talents, à faciliter la communication en réduisant les biais cognitifs dans la transmission des consignes. Cette application s’appuie sur une interface pensée pour l’utilisateur en proposant des fonctionnalités d’analyses vidéo adaptées au contexte sportif. Elle ambitionne d’apporter une réelle valeur ajoutée au service de la performance et de l’excellence des gymnastes. Elle repose sur trois axes pertinents : 1) l’amélioration de la visibilité médiatique de la gymnastique, 2) l’accessibilité des utilisateurs et 3) la valorisation de la culture gymnique au travers d’une communauté fidèle et engagée.
Cahier des charges
Une application sportive destinée aux gymnastes de tout niveau GAM/GAF et à leurs entraîneurs, qui a pour objectif l’analyse technique des performances, grâce à un outil d’intelligence artificielle permettant d’automatiser le système d’analyse vidéo.
Logiciels utilisés
Fonctionnalités principales
FILMER
Les fonctionnalités liées aux paramètres caméra des smartphones sont de nos jours de plus en plus qualitatives. C’est pourquoi il me semblait intéressant d’utiliser ce potentiel d’évolution pour élaborer un concept d’application sportive.
ANALYSER
Aujourd’hui, recourir aux data, en particulier les métriques d’analyse, me paraît primordial. Il se révèle par exemple très intéressant d’utiliser une technologie de type IA qui soit entraînée et automatisée. L’outil d’analyse IA permet en effet de bénéficier de rapports sportifs, de générer des plans d’entraînement adaptés au gymnaste et de structurer le tableau de bord de l’utilisateur.
STOCKER
Inclus dans un système de bibliothèque et d’historique de vidéos, le stockage permet de filtrer et de trouver rapidement et garder en mémoire toutes les vidéos analysées et enregistrées.
PARTAGER
Dans une optique de culture sportive, j’ai décidé d’inclure une plateforme de type « communauté » pour motiver et valoriser les gymnastes dans leur processus d’entraînement et les aider à mieux appréhender l’exigence dans la poursuite de leurs objectifs. Ils peuvent ainsi partager, publier, commenter et interagir avec d’autres gymnastes, experts et entraîneurs.
Analyse concurrentielle - Benchmark
Dans le cadre de mon TFE, j’ai réalisé une recherche approfondie sur les applications sportives existantes. L’objectif était avant tout de pouvoir apporter une valeur ajoutée à l’expérience utilisateur en me démarquant des avantages, inconvénients et limites des autres applications similaires.
Analyse des utilisateurs et personas
Gymnastes GAM / GAF
La/le gymnaste a besoin de comprendre son processus d’évolution pour s’entraîner dans les meilleures conditions vers l’atteinte de ses objectifs. Pour cela, l’application sportive lui propose divers outils et fonctionnalités : accès à un tableau de bord personnalisé pour visualiser l’évolution des métriques de performances, à une bibliothèque de tutoriels vidéos avec l’ historique de ses vidéos personnelles, aux rapports d’analyse automatisés par l’outil IA et aux plans d’entraînement adaptés, à une communauté de gymnastes, entraîneurs et experts pour partager, publier et commenter ses résultats.
Entraîneurs
L’entraîneur a besoin d’avoir la liste répertoriée de ses gymnastes. Il a accès aux listes mails et au chatbot pour communiquer aux parents. Il a accès aux résultats des performances, aux rapports d’analyse et aux plans d’entraînement de leurs gymnastes. Il dispose d’un tableau de bord personnalisé pour visualiser les informations pertinentes dont il a besoin pour préparer ses entrainements, sur les moyen et long termes, jusqu’aux objectifs fixés pour les compétitions.
Arborescence / architecture horizontale
Cette structure permet de s’adapter aux deux types d’utilisateurs, à savoir les gymnastes de tous niveaux et les entraîneurs. Les fonctionnalités principales ont été décomposées et catégorisées suivant un parcours logique et distinct à chaque profil type d’utilisateur.
L’ architecture est horizontale : les principaux modules et fonctionnalités sont accessibles directement depuis l’accueil, sans hiérarchie complexe, pour une navigation plus intuitive.
Wireframes basse définition
Processus de conception UI
Etape 1
Etape une : établir les bases du projet au niveau des interfaces, en les illustrant par des « esquisses simplifiées » ou « wireframes ». Pour cette phase, mon intention de départ était d’avoir suffisamment de matière à travailler qui m’aiderait à concevoir une application sportive de gymnastique. Toute la recherche UX réalisée auparavant m’a permis de rassembler toutes les ressources, informations et éléments importants dont j’avais besoin pour débuter ce projet d’application sportive. C’est pourquoi chaque phase a son importance dans le processus de conception UX/UI, de l’idée de départ, passant par les phases de recherche UX intermédiaires qui portent sur l’analyse concurrentielle, les personas, le branding et le système de conception, puis la phase de conception des wireframes en basse et haute définition, suivie de la réalisation d’un prototype, jusqu’à la version officielle de l’application.
Etape 2
Etape deux : restructurer les différentes interfaces pour trier et regrouper les parcours communs dans un même groupe. Un exemple : le parcours d’inscription du gymnaste à l’application, qui propose un tutoriel explicatif vidéo pour réaliser le test d’évaluation de son niveau technique, et qui explique comment utiliser les fonctionnalités caméra et comment se positionner correctement dans la zone de capture… Ce qui amène à définir le niveau du gymnaste avant de clôturer son inscription via le remplissage du formulaire. Nous retrouvons aussi pour le gymnaste et l’entraîneur la possibilité de se connecter à leurs profils respectifs, ou celle encore d’interagir dans leur communauté sportive.
Etape 3
Etape trois : approfondir le design de départ au niveau UI. Pour cette phase, je devais respecter les règles de conception UI (espacement des zones, règle des 8 pixels, différentes lois : regroupement, conformité, …). Ces règles obligent à plus de clarté, de contraste et de lisibilité, tout en restant simple et concentré sur l’essentiel, à savoir : maintenir une cohérence visuelle.
Etape 4
Etape quatre : revue des wireframes basse définition. Pour cette phase, j’ai pris le temps de revoir chaque parcours au niveau des interfaces et recherches. Cela m’a permis de bien observer, d’analyser, de corriger et de modifier certains éléments dans la zone des interfaces où c’était vraiment nécessaire. La conception des wireframes m’a pris du temps pour établir les bases et savoir la bonne direction à prendre. Cette étape est importante car si elle est bien pensée, elle facilitera l’étape suivante. Cette phase sans doute un peu laborieuse peut donc faire gagner ou perdre beaucoup de temps. Il est important d’aller à l’essentiel.
Transition stratégique
Pour concevoir les wireframes en haute définition, je suis passé par deux étapes importantes. Etape une : implémenter les wireframes basse définition en haute définition, c’est-à-dire que je devais intégrer à l’application toute la couche liée à l’identité de marque, qui correspond ici à l’univers de la gymnastique. Je devais aussi intégrer le système de conception des interfaces qui porte sur tous les composants à utiliser dans l’application sportive.
Je devais intégrer encore la charte graphique portant sur le logo, la typographie et le code couleurs. L’objectif principal de l’implémentation pour cette phase est d’améliorer la qualité visuelle et graphique de chaque interface.
Wireframes haute définition
Etape deux : cette phase un peu plus laborieuse était consacrée à itérer et réitérer, c’est-à-dire à créer des variantes sur base d’une mise en page d’une interface type en la déclinant de différentes façons, au niveau de la structure, des tailles et de la disposition des éléments,…Ce qui m’a permis de mieux comprendre les différents systèmes de lecture des interfaces, qui vont du simple au complexe. L’objectif principal pour cette application de gymnastique est toujours de mettre
l’utilisateur au centre du projet et donc d’adapter la conception des interfaces pour améliorer l’expérience utilisateur : il est donc important de rester sur l’essentiel, le simple et l’intuitif.
Prototypage (MVP) et axes d''amélioration
Dans le cadre de ce projet d’application sportive de gymnastique, le plus important, me semble-t-il, c’est de pouvoir le mener jusqu’à la phase de prototypage (MVP) pour être rapidement à même de tester les fonctionnalités auprès des utilisateurs cibles (gymnastes et entraîneurs). C’est pourquoi j’ai essayé de trouver des solutions alternatives en m’aidant d’outils tels que Perplexity, Claude.ia et autres outils de création d’application en nocode, pour créer un prototype de test fonctionnel. Mon objectif était de comprendre, en autodidacte, à la fois le processus d’élaboration d’un MVP au niveau UX/UI et, par essais et erreurs, le lien entre le langage de code (HTML, CSS, Javascript) et le visuel du MVP. À cet effet, j’ai utilisé le principe d’implémentation, d’itération et d’amélioration des fonctionnalités : chaque étape avait son lot de problèmes simples ou complexes. L’intention de départ dans ce prototype – qui est toujours en cours – était de récolter rapidement un feedback auprès des utilisateurs. Ce qui me permettra, après leur avoir fait tester le MVP, d’optimiser leur expérience et de valider l’application en y apportant les solutions qui répondent au mieux à leurs besoins, y compris en termes d’accessibilité.
Perspectives d'évolution / axes d''amélioration
Une fois choisi ce sujet de TFE, je me suis rapidement rendu compte que c’était un sujet ambitieux. Toutefois, dans une ère en pleine mutation où les technologies et innovations – en particulier l’IA – sont omniprésentes, cette application s’inscrit pleinement dans cette dynamique d’actualité.
Ces dernières années le domaine sportif a fait exploser les comptes en termes d’utilisateurs. C’est pourquoi tant d’applications dédiées à tous ces domaines sportifs ont pu voir le jour, dans une même vision de départ qui est de répondre aux besoins spécifiques de ces utilisateurs. Des domaines diversifiés tels que :le vélo, le football, la marche, le jogging et bien d’autres disciplines, mettent en évidence la demande croissante des utilisateurs, ce qui implique donc d’apporter de nouvelles solutions en termes de fonctionnalités, pour améliorer de manière continue l’expérience des utilisateurs.
Mon intention de départ était d’apporter une solution qui suive une approche personnelle, grâce à une analyse des progrès sportifs individuels en utilisant les technologies existantes. Cette application répond donc à des besoins de visibilité, d’accessibilité et de valorisation de l’expérience de la gymnastique, besoins que j’ai pu constater au travers de mon propre vécu gymnique. Concernant ma méthodologie de travail, j’ai dû réadapter ma façon de travailler en cours de processus. C’est pourquoi le fait de repartir de la conception des wireframes pour rédiger et poursuivre mon TFE était plus cohérent que l’inverse, c’est-à-dire en essayant de visualiser à quoi allait ressembler l’application finale, car il me manquait certaines ressources à réadapter suivant mon état d’avancement.
L’application devra-t-elle encore attendre quelques années avant de voir le jour ? Je pense qu’il serait pertinent d’attendre encore que les technologies d’IA et d’applications arrivent à maturité : ce projet reste un sujet ambitieux, mais devra être revu en partie et passera naturellement par différentes versions d’amélioration et/ou de simplification des fonctionnalités.
