Refonte Zeno
- Rôle
- UX design, UI Kit, logo
- Durée
- 7 semaines
- Outils
- Figma ; HTML, CSS, JavaScript
- Contexte
- Projet personnel
Brief : Refondre entièrement HabitsTracker, un suivi d'habitudes fonctionnel mais dense, pour en faire une application plus lisible et plus agréable à ouvrir chaque jour.
Objectif : Réduire l'effort de la validation quotidienne et rendre la progression visible d'un coup d'œil.
Livrables : Nouvelle identité (logo et déclinaisons), UI Kit clair et sombre, refonte de cinq écrans, exercices de respiration.
Constat : tout est affiché, rien n'est hiérarchisé
La première version d'HabitsTracker fonctionnait, mais elle ressemblait à un tableau de bord : fond sombre, petites cartes, textes en police monospace et treize objectifs présentés d'un bloc. L'information était là, sans que l'œil sache par où commencer. Pour un outil que l'on ouvre chaque jour, cette densité demandait trop d'attention.
Parti pris : un chiffre, une couleur, un geste
La refonte remplace la densité par un repère unique : le nombre d'habitudes faites, affiché en grand (« 4/7 »). Chaque habitude a sa carte et sa couleur, et une rangée de pastilles résume la journée. Une fois validée, la carte passe en couleur pleine et affiche « accompli ! ». La navigation devient une pilule flottante en bas de l'écran, à portée de pouce.
De HabitsTracker à Zeno : une identité à part entière
Le nom descriptif laisse la place à un nom court. Le logo s'appuie sur une typographie très grasse, noire, doublée d'une ombre décalée jaune, et existe en version horizontale et en version carrée « ZE / NO ». Cette signature se retrouve dans l'interface : titres condensés et épais, boutons à l'ombre décalée, cartes aux couleurs franches (jaune, violet, orange, bleu, vert).
Clair par défaut, sombre en option
L'ancienne version n'existait qu'en sombre. Zeno adopte un thème clair, plus net et plus chaleureux, et conserve un mode sombre activable depuis l'espace compte. Les couleurs ne servent plus à décorer : elles identifient chaque habitude et signalent ce qui est accompli.
Des statistiques qui se lisent
Le radar des taux de réussite sur trente jours et la courbe mensuelle de l'ancienne version demandaient de l'interprétation. L'espace rapport de Zeno part de quatre chiffres clés (série en cours, taux de complétion, habitudes accomplies, journées parfaites), suivis d'un histogramme de la semaine et d'une courbe de complétion sur plusieurs mois, avec un sélecteur de période.
Des succès plus lisibles, un ressenti plus nuancé
Les succès sont désormais regroupés par thème (niveaux, journées parfaites, autres). Un succès obtenu prend une couleur pleine et une coche, un succès à débloquer reste en pointillés. Pour l'humeur, le simple choix d'un émoji laisse la place à une sélection libre de sentiments (heureux, fier, reconnaissant, motivé…), plus proche de ce que l'on ressent vraiment.
Respirer entre deux habitudes
Zeno ajoute un espace de respiration guidée avec trois rythmes : Box 4-4-4-4, 4-7-8 et Calm 5-2-5. Un cercle violet qui gonfle et se vide accompagne chaque phase, avec le décompte au centre et le nombre de cycles accomplis. Une façon d'élargir le suivi d'habitudes à ce qui aide à les tenir.
Ce que j'en retiens
La refonte a moins consisté à ajouter qu'à choisir ce que l'on montre. Un grand chiffre, une couleur par habitude et des célébrations réservées aux moments d'accomplissement : l'interface reste calme le reste du temps, ce qui est essentiel pour une application ouverte tous les jours.
