Harmoniser les composants d'interface d'un grand groupe bancaire, du web à l'application mobile Ma banque.
Badge rectangulaire, actions en texte plein
Pas de badge, actions abrégées
Badge pilule sur token, actions bordées, structure inchangée
Confidentialité : aucun écran du produit ne peut être publié. Les illustrations de cette page reconstituent, sur une charte neutre, les composants et les décisions de design réellement livrés.
Mission menée pour Crédit Agricole Technologies et Services (CATS), l'entité technologique du groupe. Intégré aux équipes produit et front-end, j'ai pris en charge la cohérence des composants d'interface, du web au mobile.
Le site web CA et l'application Ma banque faisaient évoluer leurs composants en parallèle : mêmes objets métier, styles et nommages divergents. Chaque écart se paie deux fois, en conception puis en intégration.
Identifier les écarts entre les composants UI web et mobile, et les points de divergence entre équipes.
Livrer des composants Figma alignés et documentés, prêts pour les équipes front-end.
Fluidifier la collaboration design/développement et diffuser une culture design system.
Le parti pris : ne pas livrer deux variantes d'un même objet. Chaque composant divergent a été ramené à une définition unique : mêmes tokens, mêmes états, même nommage, utilisable telle quelle sur le web comme sur l'app. Ce qui s'adapte au contexte se règle autour du composant, jamais dedans.
Cartographie des écarts entre composants web et mobiles : styles, comportements, nommage. Identification des divergences entre équipes.
Conception de composants Figma cohérents et documentés, alignés entre le site web et l'app Ma banque, prêts à être intégrés sans friction par les développeurs.
Ateliers avec les équipes produit et front-end pour ancrer les composants dans les pratiques et fluidifier le passage du design au code.
Une fois les écarts identifiés, j'animais des ateliers réunissant les deux équipes (web et app) autour d'un même composant. L'objectif : trouver une solution qui satisfait les deux surfaces sans compromis. Voici un exemple concret : la carte de compte, revisitée pour fonctionner aussi bien en desktop qu'en mobile.
Un ensemble de composants harmonisés, documentés et alignés entre design et développement, qui réduit les écarts entre le web et le mobile.
Deux surfaces auditées, des composants Figma documentés livrés aux équipes front-end, et un composant unique là où il y en avait deux. Pas de fork, pas d’adaptation.