- UX
- Design System
- React
PayGreen
Refondre l'UX d'un provider de paiement et poser son premier vrai design system.
- Client
- PayGreen
- Rôle
- UX, design system, React
- Stack
- Figma · Design tokens · Storybook · React
- Site
- paygreen.io
Contexte
Une identité datée et un design system fait maison.
À mon arrivée, PayGreen avait une identité visuelle vieillissante, en décalage avec son ambition de fintech. L'équipe voulait refondre son design system, mais l'existant était développé sur mesure, sans s'appuyer sur aucune librairie : chaque composant était à maintenir à la main et les écarts entre les écrans se multipliaient. En parallèle, le back-office, l'interface où les marchands suivent leurs paiements, devait être entièrement revu en Next.js. Il fallait donc refondre le design system en même temps que le produit qui allait s'en servir.
Approche
Du token Figma au composant Storybook.
Plutôt que de corriger l'existant, nous avons en équipe reconstruit le design system de zéro sur Chakra UI. La librairie apportait l'accessibilité, le theming et une base de composants éprouvée ; il restait à y poser l'identité de PayGreen et parfaire la librairie de composants afin de répondre aux attentes. J'ai défini les fondations dans Figma (couleurs, typographie, espacements, design tokens), puis j'ai construit moi-même les composants avant de les développer en React. Chacun était documenté dans Storybook, avec ses variantes et ses états.
Résultat
Un système partagé, des features livrées dessus.
Le design system est devenu la base commune du nouveau back-office : une seule source de vérité, de la maquette Figma au composant documenté dans Storybook. Je ne me suis pas arrêté aux fondations : j'ai aussi conçu et développé des features de la plateforme en m'appuyant directement sur ces composants, ce qui en validait l'usage au quotidien. Les développeurs disposaient d'un catalogue prêt à l'emploi, et les nouveaux écrans se construisaient plus vite et restaient cohérents entre eux.
