Couleurs
blue-night
#0F172Aamber
#F59E0Boff-white
#F8FAFC 80% 15% 5%
L'ambre ne dépasse jamais 5 % de la surface. Une couleur d'accent partout n'est plus un accent.
Design d'interface — conversion, rétention, système
Une app, c'est pas une photo. C'est du cinéma.
Pendant des années, j'ai conçu mes écrans comme des états figés. Un écran, une maquette. Sauf qu'un utilisateur passe rarement plus de 3 secondes sur un écran « final » — le reste du temps, il attend, il transitionne, il hésite. Voilà comment je conçois ces moments-là, et ce qu'ils rapportent.
- Conversion Inscription, achat, partage. Le timing du paywall, les defaults, la valeur avant le prix.
- Rétention Notifications qui ont du contenu, streaks qui pardonnent, boucles longues, récompenses réelles.
- Système & animation Une charte, des tokens, du light au dark. Et la 4e dimension : le temps.
7 design challenges
Des vraies apps, des vraies décisions
Chaque démo est une app que j'ai construite et livrée. Fais défiler : le problème, la décision, et ce que ça a donné.
Les démos se lancent au défilement
-
Les 3 premières secondes
L'attente est le premier rituel
Le problème
Le splashscreen est le seul écran que 100 % des utilisateurs voient. La plupart des apps y mettent un logo figé et prient pour que ça charge vite.
La décision design
L'orbe respire : inspire, expire. Le temps de chargement devient une mise en condition — pas une salle d'attente. Puis un hero animation enchaîne sur le home, sans coupure.
Le mouvement apaise. L'immobilité angoisse.
- Splash animé
- Hero animation
- Entrance en cascade
-
Activation
Vise le aha moment, pas le paywall
Le problème
Ma première version de BeeDone mettait le paywall au premier écran. Les gens le voyaient, certains payaient, la plupart partaient — et beaucoup annulaient après le trial. Ils n'avaient pas eu le temps de comprendre la valeur.
La décision design
L'onboarding pousse vers un seul geste : créer sa première routine. Horaires préremplis, jours cochés par défaut, une barre de progression, et une signature d'engagement pour clore le geste.
Sur Evolum, on a mesuré qu'un utilisateur qui fait 3 rituels reste 3 mois ou plus. On a tout recâblé l'onboarding vers ces 3 rituels.
- Defaults intelligents
- Progression visible
- Engagement actif
-
La valeur perçue
Le chiffre qui compte, en premier
Le problème
Un chauffeur VTC ouvre son app de gestion pour une seule raison : savoir combien il a gagné. Enterrer ce chiffre dans un onglet « Statistiques », c'est perdre la raison d'ouvrir l'app.
La décision design
Le revenu du mois passe en typo display, tout en haut, avant la liste des courses. Le reste — profil, abonnement, configuration — descend d'un cran. Une hiérarchie, c'est un choix de ce qu'on accepte de rendre moins visible.
From-scratch avec un CEO et un DA. Ils découvrent l'app chaque semaine sur le TestFlight.
- Hiérarchie typographique
- Un écran = une réponse
- Travail avec DA
-
Partage
Rendre l'objectif public
Le problème
Un objectif privé se négocie tout seul. On se donne des excuses, personne ne le sait, on abandonne sans coût social.
La décision design
Le feed transforme l'objectif en engagement public : photo, likes, commentaires. Le partage n'est pas un bouton en fin de parcours — c'est le cœur de la boucle produit.
30 % des utilisateurs postent leur premier objectif. 20 % de rétention à J7, au-dessus de la moyenne du social.
- Boucle sociale
- Accountability publique
- Partage natif au produit
-
Réengagement
Une notification qui a quelque chose à dire
Le problème
« Tu n'as pas ouvert l'app depuis 3 jours. » Ça, ce n'est pas une notification, c'est un reproche. Ça se désactive en une semaine.
La décision design
Un coach IA lit le contexte de l'utilisateur et propose une action précise, maintenant. La notification porte le contenu, pas le rappel — l'app a une raison d'écrire, pas juste une envie d'être ouverte.
91 % d'engagement sur les 8 coachs IA. Les images générées ont fait +40 % d'ouvertures d'app.
- Notification contextuelle
- Contenu > rappel
- Funnel adapté au user
-
La boucle longue
Un streak a besoin d'une saison
Le problème
J'ai utilisé une app de focus qui faisait pousser une forêt virtuelle. Je regardais mon jardin et je me disais : « mais à quoi ça sert, ce truc ? » Un streak qui ne mène nulle part finit en décoration.
La décision design
Les saisons se relancent automatiquement, avec une compétition et une fin datée. Un streak cassé n'efface pas tout : la saison suivante redonne une porte d'entrée. Et les points vont vers des récompenses réelles — ciné, resto, week-end — pas vers des badges.
D7 à 14,29 %, au-dessus du 75e percentile. Grown-ups crave play too.
- Saison auto
- Réinitialisation qui pardonne
- Récompenses réelles
-
Le système
Le dark mode n'est pas un thème, c'est un contrat
Le problème
Le plus gros problème des apps designées par des devs, ce n'est pas la laideur. C'est l'incohérence. Un dark mode bricolé après coup, c'est là que ça se voit : contrastes cassés, gris inventés écran par écran.
La décision design
Chaque couleur est un token sémantique — surface, texte, accent — pas une valeur hex posée dans un widget. Les deux thèmes sortent du même fichier, donc un écran ne peut pas dériver tout seul.
Les utilisateurs ne savent pas pourquoi une app « fait pro ». Mais leur cerveau détecte la cohérence, ou son absence.
- Tokens sémantiques
- Light + dark d'un seul fichier
- Widgetbook
La charte
Une seule charte, du site à l'app
Les couleurs, la typo et les durées ci-dessous ne sont pas une illustration : ce sont les tokens réels de ce site, lus depuis le même fichier que celui qui habille mes apps. C'est le principe — un fichier fait autorité, tout le reste s'y réfère.
Typographie
- Space Grotesk
display · 600/700 - Inter
corps · 400/500 - JetBrains Mono
métriques · 400
Trois familles, trois rôles. Le mono est réservé aux chiffres et au code — il signale « donnée », pas « décoration ».
Formes & durées
8 12 16 20
120ms
200ms
280ms
400ms
200-400 ms, ease-out, toujours. Jamais de bounce ni d'elastic — on est en 2026, pas en 2014.
La méthode
Un design system en 2-3 heures
Sans Figma. Sans designer. Sans trois semaines d'exploration créative. Le vrai problème n'a jamais été le talent artistique — c'est l'absence de référence cohérente.
- 01
Le feeling en 3 mots
« Premium, calme, confiance » ne mène pas au même endroit que « fun, énergique, jeune ». On tranche avant d'ouvrir un outil.
- 02
Explorer hors de ta niche
Copier la meilleure app de ton secteur donne un clone. 30 minutes dans de vraies apps installées — pas des shots Dribbble qui n'ont jamais eu à gérer un état vide.
- 03
Extraire les constantes
4-5 couleurs, la typo et son échelle, les espacements récurrents, les radius, les états de composants. C'est ça, le design system — pas une bibliothèque de 200 écrans.
- 04
Adapter, pas copier
Ce qu'on emprunte, ce sont les principes : espacement, hiérarchie, densité. Pas les pixels. Et on prend un modèle à sa taille — le système de Spotify marche parce qu'ils ont 200 designers.
La 4e dimension
Le temps mort est une opportunité
L'objectif n'est pas que l'utilisateur remarque les animations. C'est qu'il les ressente sans les voir — comme la musique de film : si tu la remarques, elle a échoué.
- 1 Vide Aucune donnée. L'écran doit expliquer et proposer.
- 2 Chargement Shimmer ciblé, progress brandé. Jamais un spinner nu.
- 3 Transition Hero animation. L'élément voyage, l'utilisateur suit.
- 4 Interactif Le seul état que la plupart des apps designent.
- 5 Feedback Le geste a été reçu. Sinon on le refait deux fois.
La plupart des apps designent l'état 4 et subissent les quatre autres.
Ce que je fais
280ms · ease-out Ce que je ne fais plus
600ms · elastic Chargement
shimmer ciblé Le circular progress dit « ça travaille ». Le shimmer dit « ça arrive ». Le hero dit « tu es au bon endroit ».
La boîte à outils
Ce que j'applique, concrètement
Conversion
- La valeur avant le prix : product-led, le produit se vend lui-même
- Le paywall au premier aha moment — pas avant, pas trois écrans plus tard
- Defaults préremplis : chaque champ vide est une occasion d'abandonner
- Un seul CTA par écran, et il dit ce qui va se passer
- La preuve sociale au moment du doute, pas sur la home
- Le partage dans la boucle produit, pas en fin de parcours
Rétention
- La notification porte un contenu, jamais un reproche
- Le streak a une porte de sortie — sinon la première casse est la dernière
- Des saisons qui se relancent seules : une boucle longue au-dessus des boucles courtes
- Récompenses réelles plutôt que badges décoratifs
- Le test de la semaine 2 : une feature pas utilisée à J+14 ne le sera jamais
- « Ça juste marche » retient 3 mois. « Trop cool » retient 3 jours.
Honnêtement
Ce que je ne vends pas
Je ne suis pas directeur artistique
Je ne pars pas d'une page blanche esthétique. Je pars d'une app modèle, j'en extrais un système, et je le tiens. Quand il y a un DA dans l'équipe — comme sur UpDrive — je travaille avec lui, je ne le remplace pas.
« Less is more » m'a coûté du MRR
J'ai coupé des features peu utilisées sur BeeDone. Le MRR est descendu. Certaines features ne servent pas à être utilisées, elles servent à prouver que l'app est complète. Ne pas confondre usage et valeur perçue.
La rétention n'est pas toujours la bonne métrique
Dans le produit : rétention d'abord. Dans le dashboard, tant que tu ne payes pas ton acquisition : le MRR. Traquer la rétention sans budget ads, c'est optimiser l'aérodynamique d'une voiture qui n'a pas encore de moteur.
Ton app mérite mieux qu'un écran figé
Conversion, rétention, design system : on regarde ton produit ensemble et je te dis où sont les points de fuite.