Image principale du projet KM0

KM0

Le copilote digital des ultra-traileurs.

Rôle Product Designer Client KMO Stack Figma, Illustrator
Un écran, 0,5 seconde pour lire.

Le défi : Designer pour un utilisateur en situation extrême. KMO est une solution complète de suivi pour les traileurs. Le challenge n'était pas seulement esthétique, mais ergonomique : comment afficher une densité critique d'informations (dénivelé, nutrition, barrières horaires) sur un écran mobile, consultable par un coureur fatigué, en mouvement, et sous une météo changeante ?

Avant de tracer le moindre trait, j'ai dû comprendre la réalité du terrain. À travers la définition de personas précis (d'« Isabelle la prudente » à « Loïc le performeur »), nous avons isolé les fonctionnalités vitales.

Cette phase de tri a permis d'éliminer le superflu pour se concentrer sur l'essentiel : la charge cognitive. Un coureur en plein effort a une « bande passante » mentale réduite. L'interface devait donc agir comme un copilote silencieux : donner la bonne info, au bon moment, sans interaction complexe.

KM0 – recherche utilisateur
KM0 – stratégie et préparation

Le moodboard a fixé l'univers visuel et l'ambiance de la marque. Le tri des fonctionnalités a suivi : à partir des personas et des parcours, nous avons priorisé ce qui devait apparaître à l'écran et ce qui pouvait rester en second plan. Chaque écran a été pensé pour une lecture en moins de 0,5 seconde.

L'atome du design

Palette & tokens

Palette & tokens

Typographie

Typographie

Composants

Composants

Le Dark Mode et le code couleur sémantique pour guider l'effort.

La Réponse UI

J'ai développé un Design System modulaire basé sur le contraste et la lisibilité immédiate :

  • Dark Mode natif : un choix technique pour économiser la batterie sur les courses longues (Ultra-trail) et éviter l'éblouissement nocturne.
  • Code couleur sémantique : les couleurs ne sont pas décoratives. Elles indiquent l'état de l'effort (Vert = Zone de confort, Rouge = Alerte).
  • Cards détachées : chaque bloc d'information est isolé visuellement pour permettre une lecture en moins de 0,5 seconde.
Écran de connexion
Tableau de bord
Vue d'ensemble d'un événement
Création d'événement

Recherche utilisateur

Personas et parcours pour orienter chaque décision de design, sans supposer à la place des utilisateurs.

Identité visuelle

Moodboard et design system (couleurs, typo, composants) qui reflètent l'univers montagnard et la marque.

Maquettes livrées

Écrans d'authentification, tableau de bord, gestion d'événements et postes de secours, prêts pour le développement.