Comment lire ses données d'un coup d'œil et rester motivé ?
Contexte
SportSee est une application web de suivi et d'analyse des performances en course à pied, conçue pour les coureurs. Le problème à résoudre : comment lire ses données d'un coup d'œil et rester motivé ? Le périmètre couvre la connexion, le tableau de bord et le profil, sur mobile, tablette et desktop.
Rôle et durée
Réalisation en solo, en une cinquantaine d'heures, de la recherche visuelle au design system et aux maquettes.
Recherche
Ce travail s'est appuyé sur un benchmark visuel (Garmin Connect, Strava, Bevel), suivi de la création d'un moodboard représentant la tendance visuelle de l'interface .
- Rendre les objectifs motivantsJauges de progression, visualisation de l'avancée des objectifs
- Rendre l'activité lisible dans le tempsUtilisation d'histogrammes, de jauges et de métriques claires
- Valoriser l'effortAffichage des records personnels et de la charge d'entrainement
- Éviter la surcharge d'informationsInterface épurée, prédominance des chiffres dans les métriques
Processus de conception
- Prototypage multi-plateformesMaquettes réalisées en adaptant la structure et la disposition des composants pour optimiser la navigation et la lecture quel que soit le device utilisé (mobile, tablette et desktop).
- Donner une identité motivante sans surchargerPalette de quatre couleurs, choisies d'abord pour leur lisibilité : un rouge motivant, un bleu valorisant, un bleu nuit bienveillant et un vert menthe ludique, réservé au décor. Typographie Manrope privilégiée pour la lecture des valeurs chiffrées.
- Garantir la pérennité du design systemDesign system intégralement documenté dans Zeroheight, synchronisée avec la bibliothèque Figma
Solutions de design
- Résumé de la dernière séance en un coup d'oeilTrois métriques principales agrandies en réduisant les métriques secondaires.
- Rester motivé par rapport à ses objectifsJauges d'objectifs hebdomadaires
- Suivre son évolution sans multiplier les graphiquesSélecteur de période et un seul graphique avec bascule
- Se situer par rapport à la période précédentePastilles avec flèche, pour ne pas dépendre de la couleur seule
- Valoriser les meilleurs résultatsTrophée sur les records
Résultats et impact
- Les objectifs du projet atteintsUn design system structuré et documenté
- Trois écrans déclinés en trois formats
- Une accessibilité visée au niveau WCAG 2.1 AA
Réflexion critique
Aucun des choix faits sur le tableau de bord n'a encore été testé auprès d'utilisateurs, et l'ordre des blocs est le point à remettre en question en premier. Sur desktop et tablette, le choix a été d'afficher d'abord le graphique, puis les cards de suivi des performances, au dessus des blocs « Total progression » et « Records ». Ce choix devra être validé par des tests utilisateurs. Placer le graphique sous les différentes cards pourrait aussi être judicieux, car cela garderait en début de page les éléments motivants (progression et records).
Cette option ne serait en revanche pas forcément adaptée au mobile. Comme l'ensemble des informations n'y est pas affiché sur une même page, la présence du graphique juste en dessous du sélecteur de période semble rester le meilleur choix sur ce format. Là encore, cela reste à confirmer avec des tests utilisateurs.
