Harmoniser les composants d'interface d'un grand groupe bancaire, du web a l'application mobile Ma banque.
A noter : aucun contenu interne ne peut etre presente ici. L'illustration ci-dessous est une representation generique du travail realise.
Mission realisee via Synanto pour Credit Agricole Technologies et Services (CATS), l'entite technologique du groupe. Au sein des equipes produit et techniques, je suis intervenu sur la coherence des composants d'interface, a l'echelle du web et du mobile.
Un design system est une bibliotheque de composants partages entre designers et developpeurs : boutons, champs, couleurs, typographies. Au lieu que chaque equipe recree ses propres composants, tout le monde pioche dans la meme source. Les interfaces restent coherentes d'un produit a l'autre, et le passage du design au code est moins friction. Chez CATS, l'enjeu etait d'harmoniser les composants entre le site web CA et l'application mobile Ma banque, dans un groupe ou plusieurs equipes font evoluer leurs interfaces en parallele.
Identifier les ecarts entre les composants UI web et mobile, et les points de divergence entre equipes.
Livrer des composants Figma alignes et documentes, prets pour les equipes front-end.
Fluidifier la collaboration design/developpement et diffuser une culture design system.
Un design system centralise les composants d'interface (boutons, champs, badges, typographies, couleurs) dans une bibliotheque partage entre designers et developpeurs. Chez CATS, l'enjeu etait d'harmoniser ces composants entre le site web et l'application Ma banque, pour que les deux produits parlent le meme langage visuel.
Cartographie des ecarts entre composants web et mobiles : styles, comportements, nommage. Identification des divergences entre equipes.
Conception de composants Figma coherents et documentes, alignes entre le site web et l'app Ma banque, prets a etre integres sans friction par les developpeurs.
Ateliers avec les equipes produit et front-end pour ancrer les composants dans les pratiques et fluidifier le passage du design au code.
Une fois les ecarts identifies, j'animais des ateliers reunissant les deux equipes (web et app) autour d'un meme composant. L'objectif : trouver une solution qui satisfait les deux surfaces sans compromis. Voici un exemple concret : la carte de compte, revisitee pour fonctionner aussi bien en desktop qu'en mobile.
Un ensemble de composants harmonises, documentes et alignes entre design et developpement, qui reduit les ecarts entre le web et le mobile.
Au-dela des ecrans, la mission a fluidifie la collaboration entre design et developpement et pose des bases plus saines pour la coherence des interfaces a l'echelle du groupe.