Des kilomètres qui racontent enfin une histoire.
Conception de l’identité visuelle et des maquettes haute fidélité de SportSee, une application web de suivi de performance pensée pour les coureurs amateurs et leurs objectifs personnels.
Projet mené dans le cadre de ma formation Product Designer chez OpenClassrooms, sur un brief client fourni avec ses wireframes et les retours du Product Manager.
Une application déjà pensée, mais encore muette.
SportSee existe déjà sur le plan fonctionnel. Les équipes savent ce que l’application doit faire, mais elle n’a encore aucune identité visuelle : ni couleurs, ni typographie, ni style d’interface. Les wireframes de départ existent, avec les commentaires du Product Manager à intégrer avant toute décision graphique.
L’enjeu : stabiliser une structure UX claire, puis construire une identité visuelle qui rende les données de course lisibles en un coup d’œil, sans jamais surcharger le coureur.
En comparant quatre applications de référence, j’ai retenu deux choix structurants : une hiérarchie qui place toujours l’indicateur de synthèse avant le détail, et une teinte terracotta plus mate que l’orange saturé de Strava, pour rester dans un registre calme plutôt que compétitif.
Ce qui a été écarté
- La densité du feed Strava, trop d’informations concurrentes pour une lecture rapide.
- L’orange très saturé et le ton compétitif (classements, défis), qui ne correspondent pas à un usage personnel de suivi de progression.
- Les graphiques sans titre ni unité, illisibles sans explication.
Trois écrans à concevoir, quatre applications passées au crible, un seul design system.
La donnée devient motivante quand elle est présentée comme un insight, pas comme un chiffre brut.
Trois écrans, une même logique de lecture.
Pensé pour être consulté rapidement, avant ou après une sortie, j’ai construit SportSee autour d’une hiérarchie visuelle qui met en avant l’essentiel, sans noyer le coureur sous les chiffres.
- 01DashboardLes indicateurs clés du coureur (distance, allure, zone cardiaque, calories) hiérarchisés en cartes, complétés par deux graphiques de tendance sur l’activité récente.
- 02Détail de séanceLe zoom sur une sortie précise, avec le tracé GPS, l’allure et la zone cardiaque kilomètre par kilomètre, pour comprendre une performance au-delà des chiffres globaux du dashboard.
- 03ProfilLes informations personnelles et l’objectif du coureur mis en avant, les statistiques cumulées depuis l’inscription, et les réglages de confidentialité regroupés par thème.
Le produit, en contexte.
Le design system complet, codé, et deux écrans clés de l’expérience.
Une palette terracotta calme, une typographie Helvetica Neue et des composants clairs, pour rendre chaque indicateur de course lisible en un coup d’œil.
Styliser en dernier, jamais en premier.
Stabiliser avant de styliser
Avant de toucher à la moindre couleur, j’ai figé la structure UX et pris position sur chaque commentaire du Product Manager, pour ne plus remettre en question les écrans en cours de route.
Transformer un benchmark en système
Une fois la recherche visuelle sur des dashboards sportifs posée, je l’ai traduite en décisions concrètes de palette, de typographie et de composants réutilisables.
Documenter pour une équipe, pas pour soi
Parce qu’il devait être repris par des développeurs et d’autres designers, j’ai documenté le design system sur Zeroheight, avec une mise à jour continue plutôt qu’un rendu figé en fin de projet.
Le prochain test à mener
Le brief portait sur l’identité visuelle et les maquettes, pas sur un test utilisateur : les choix de hiérarchie et de teinte n’ont pas encore été confrontés à de vrais coureurs. Un test de lisibilité du dashboard avec quelques utilisateurs resterait la suite logique avant tout développement.