Étude de cas (2026)

Design System

Pilotage et déploiement du design system web BfotBank

Télécharger mon portfolio >

Introduction Actions Principes Analyses Applications

Clients

BforBank

Habilité

Design System

Période

2023-2026

L'alliance de la performance et de la cohérence visuelle

Ce retour d’expérience détaille mon intervention au sein de BforBank, où j’ai accompagné la transformation des interfaces web à travers une méthodologie rigoureuse de visual design et de direction artistique.

Mon rôle s’est articulé autour d’une collaboration étroite avec le responsable du design system, sous la supervision du Head of design et du directeur Marketing. Cette synergie a permis de garantir une parfaite harmonie entre les enjeux technologiques et l’identité de l’entreprise.

Lotus Design System

Le Design system en quelques chiffres

0 Designers

1 lead DS (web/app) + 1 designer DS (web) + 2 leads UX + 14 product designers + designers brand

0 Environnements

1 design system pour l’application et 1 design system pour le web (Site public et espace client)

0 Equipes

Consommation coté marketing par les squads web, portail, Brand et coté produit pour webview,

Intention

L’ambition première de ce projet consistait à bâtir une bibliothèque de composants cohérente, commune au site public et à l’espace client, afin de solidifier les bases du design system.

Le défi majeur résidait dans l’établissement d’une transition imperceptible entre l’application mobile et les interfaces web, garantissant ainsi une qualité de visual design constante et rassurante pour l’utilisateur.

Cet effort de structuration a abouti à une autonomie totale dans le pilotage des éléments destinés à l’outil d’administration des contenus, optimisant durablement la fluidité de la production en UI design.

DS

Un processus structuré en trois phases clés

I

Conception et pilotage de la bibliothèque web

Dès le lancement, j’ai travaillé de concert avec le designer principal pour élaborer une base solide de composants. En réutilisant intelligemment les ressources de l’environnement mobile, nous avons pu livrer rapidement une première version fonctionnelle. Ce travail en amont a permis aux équipes de développement de débuter l’intégration de l’espace connecté sans retard.

II

Industrialisation et création de modèles transverses

Une fois le projet arrivé à maturité, mon action s’est portée sur l’accélération de la production de maquettes. J’ai conçu des modèles de pages réutilisables offrant de multiples options de mise en page. Pour favoriser l’adoption globale, j’ai également mis en place des bibliothèques annexes dédiées au content design, facilitant ainsi le travail des rédacteurs et des designers de marque.

III

Audit, optimisation et pérennisation

Afin de garantir la légèreté et la rapidité de chargement du design system, j’ai mené un audit complet des usages. Cette phase de rationalisation a permis de supprimer les éléments superflus et de mutualiser les composants redondants, optimisant ainsi la maintenance à long terme.

Une architecture pensée pour l’agilité

Le principe fondamental de ma démarche repose sur la synchronisation absolue : chaque élément de l’interface est relié à une bibliothèque centrale. Ce découpage précis facilite les mises à jour, qu’il s’agisse de micro-interactions ou de changements structurels majeurs.

ARCHITECTURE DS WEB

Indicateurs clés de réussite

Outils d’analyse figma

+ 0 Templates crées

Accélération de la production

+ 0 Pages crées sur web et mobile

Cohérence globale Web & Mobile

+ 0 Composants utilisés dans les maquettes

Rationalisation des ressources

Mise en application

Après trois années de perfectionnement continu, ce design system a permis d’aligner l’intégralité du design et des messages, du site institutionnel jusqu’au catalogue de l’application. Cette approche rigoureuse en ux design garantit aujourd’hui une expérience fluide et rassurante pour l’utilisateur final, quel que soit son point de contact avec la marque.