BeFit
L'application de coaching sportif au quotidien
- Projet fictif de licence
- UX/UI Design - Branding
- 2023
Brief
Créer une application de coaching exploitant les techniques de gamification.
Dans mon esprit, coaching rimait avec sport alors je voulais tenter de répondre à la fameuse question : comment se motiver à bouger tous les jours ?
Et bien… en ne le faisant pas seul dans son coin mais en le partageant avec ses amis.
BeFit est une application de coaching sportif quotidien. Chaque jour une notification de défi est envoyée à tous ses utilisateurs en même temps.
Une fois le défi réalisé, les utilisateurs partagent une photo d’eux à leurs amis, visibles ensuite dans le fil d’actualité.
L’utilisateur crée un profil avec des objectifs sportifs. Il réalise un programme d’entrainement sur la semaine.
Des récompenses sont attribuées après chaque défi ou entrainement, permettant de ses challenger entre amis.
Recherche utilisateur
Analyse de la cible
Pour définir l’utilisateur cible, cela passe par une étude de ses attentes, ses motivations mais aussi ce qui le freinerait dans son objectif.
Les fonctionnalités de l’application sont donc pensées pour répondre à ses motivations et réduire ses objections.
Les personas
Après l’analyse, j’ai pu dégager trois profils d’utilisateurs cible de l’application.
1.L’étudiant débordé qui a besoin de faire une pause pour bouger.
2.La lycéenne à la mode, qui veut partager avec ses amis.
3.Le jeune actif, qui veut suivre son programme de sport.
Parcours utilisateur
Le premier parcours englobe l’onboarding et la réalisation des programmes d’exercices.
Le second montre le fonctionnement de la notification quotidienne du défi et sa publication.
Wireframes
Onboarding, pages d'inscriptions
Pages principales (défi, fil d'actualité, accueil, progression, exercices)
UI Design
Onboarding
Une animation du logo à l’ouverture de l’application permet d’embarquer l’utilisateur dans le thème du sport.
Ci-dessous, les différents écrans lors de l’inscription permettent de choisir les objectifs de l’utilisateur et cerner son profil sportif.
Il peut aussi synchroniser ses contacts et se connecter à ses amis utilisant l’application.
Pages principales
L’application s’articule autour de trois pages principales : l’Accueil, la page Profil et le Fil d’actualité.
L’Accueil intègre plusieurs raccourcis vers les exercices en cours, les derniers défis postés ou encore la dernière récompense obtenue. On y retrouve aussi un compteur de pas.
La page Profil récapitule les progressions de l’utilisateur vis à vis de ses objectifs. C’est sur cette page qu’il peut voir le classement de ses amis ainsi que son tableau de récompenses.
Le Fil d’actualité regroupe les photos de défis de nos amis. Il n’est pas visible pour le moment, car le défi du jour n’a pas encore été effectué.
Les exercices
L’utilisateur peut retrouver son programme d’exercices à différents endroits de l’application. Les catégories d’exercices sont répertoriées par couleurs.
C'est l'heure du défi ! Prêts ?
Une fois la notification journalière reçue, il suffit d’effectuer le défi proposé, qui est accompagné par un tutoriel.
Chaque défi rapporte des points pour le profil utilisateur : ces points permettent de se comparer à ses amis et aussi d’accumuler des récompenses.
Après le défi, une photo de la caméra avant et arrière est prise pour prouver sa réalisation.
Le fil d’actualité est maintenant visible, avec les photos des défis de ses amis.
Design system
Logo
Le logo typographique intègre l’icône d’un haltère qui se mélange avec le « I » pour créer un contraste et le mettre en valeur.
L’haltère se décline comme icône de l’application.
Icônes et illustrations
Les illustrations colorées d’exercices et de récompenses accentuent la gamification de l’application et donnent un sentiment de jeu à l’utilisateur.
Typographies
Deux typographies sont utilisées dans l’application. Une sans-serif pour les titres et textes, l’autre manuscrite pour les textes décoratifs, permettant un contraste.
Couleurs
Les deux couleurs principales utilisées dans toute l’application reprennent celles du logo, avec le violet comme couleur de fond.
Les couleurs secondaires sont utilisées pour différencier les catégories d’exercices.
Dégradé#1
principale
#9D4AE8
principale
#FFB533
Dégradé#2
#373696
#009967
#FFCCDA
#F7723B
Prototype
Pour finir, retrouvez le prototype interactif de l’application réalisé sur Figma.
Cliquez sur le téléphone puis appuyez sur R pour le recommencer et profiter de l’animation d’entrée.