BNP Paribas

Un Design Language System pour industrialiser, sans uniformiser

BNP Paribas

Un Design Language System pour industrialiser, sans uniformiser

Plusieurs écrans de l'application Mes Comptes BNPP

BNP Paribas

Un Design Language System pour industrialiser, sans uniformiser

Un Design Language System pour industrialiser, sans uniformiser

Challenge

Comment booster l’adoption et l’impact d’un Design Language System ?

En 2022, alors que les applications BNP Paribas et Hello Bank! entament une refonte en profondeur, le groupe fait un choix stratégique : unifier design et développement autour d’un Design Language System (DLS) multi-marque et multiplateforme.

Notre défi : poser les fondations d’un système robuste (nomenclature, tokens, composants…) tout en accompagnant un changement culturel majeur. Car un bon DLS ne vaut que s’il est adopté. Il a donc fallu embarquer l’ensemble des équipes concernées, défendre des choix forts, et maximiser les bénéfices concrets en termes de productivité, de cohérence et de collaboration.

A propos de BNP Paribas

8M

De clients particuliers et professionnels

No. 1

Des groupes bancaires en Europe

A propos de BNP Paribas

8M

De clients particuliers et professionnels

No. 1

Des groupes bancaires en Europe

A propos de BNP Paribas

8M

De clients particuliers et professionnels

No. 1

Des groupes bancaires en Europe

A propos de BNP Paribas

8M

De clients particuliers et professionnels

No. 1

Des groupes bancaires en Europe

BNP Paribas est le premier groupe bancaire en Europe, avec plus de 8 millions de clients en France.

Depuis 2015, nous accompagnons ses équipes dans leur transformation digitale et organisationnelle : déploiement du design à grande échelle, acculturation aux démarches centrées utilisateurs, amélioration continue des parcours collaborateurs et clients.

Couverture et pages d'un livre représentant les Fondation Design de BNPP
Couverture et pages d'un livre représentant les Fondation Design de BNPP
Couverture et pages d'un livre représentant les Fondation Design de BNPP
Accueil de l'application BNPP Mes Comptes
Accueil de l'application BNPP Mes Comptes
Accueil de l'application BNPP Mes Comptes
Approche

Le code comme source de vérité : nous avons centré notre méthode sur le code, seul langage réellement partagé par les designers et les développeurs, pour garantir la fiabilité, la portabilité et la maintenabilité du système.

Permettre une forte liberté d'expression de marque : le DLS a été conçu pour permettre une expression visuelle différenciée entre les marques, tout en conservant une base technique et design partagée.

Accompagner un changement de culture : en collaborant au quotidien avec les squads de production, nous avons embarqué les équipes produit, tech et design autour de méthodes communes : revue croisée, spécification conjointe, documentation, gouvernance transverse.


Anatomie du composant Donut du Design System BNP Paribas : structure, styles et tokens associés
Anatomie du composant Donut du Design System BNP Paribas : structure, styles et tokens associés
Anatomie du composant Donut du Design System BNP Paribas : structure, styles et tokens associés
Anatomie du composant Donut du Design System BNP Paribas : structure, styles et tokens associés
Documentation du process de création de composant avec le Design Language System BNPP, avec un approche Code First
Documentation du process de création de composant avec le Design Language System BNPP, avec un approche Code First
Documentation du process de création de composant avec le Design Language System BNPP, avec un approche Code First
Documentation du process de création de composant avec le Design Language System BNPP, avec un approche Code First
Solutions clés
  • Un DLS multi-marques et multi-plateformes, compatible SwiftUI et Jetpack Compose

  • Une structure de tokens modulaire (+4400 tokens), pensée pour l’évolutivité

  • Un pipeline de synchronisation automatisé (Google Sheets → GitHub → Figma) via GitHub Actions

  • Un plugin Figma sur mesure, pour basculer instantanément une interface d’iOS vers Android, et inversement

  • Un mode de collaboration documenté : benchmark, spec, recette, intégration design/dev, publication

Résultats

48%

48%

48%

48%

Temps gagné en Design (conception d'écran)

96%

96%

96%

96%

Des équipes estiment que le DLS améliore la qualité délivrée des projets

57%

57%

57%

57%

Temps gagné en Dev d'une vue multi-marque

93%

93%

93%

93%

De satisfaction auprès des équipes utilisant le DLS

Schema illustrant comment les Design Tokens gérés dans un spreadsheet sont transformés et synchronisés vers d'autres destinatation comme Figma ou Github
Schema illustrant comment les Design Tokens gérés dans un spreadsheet sont transformés et synchronisés vers d'autres destinatation comme Figma ou Github
Schema illustrant comment les Design Tokens gérés dans un spreadsheet sont transformés et synchronisés vers d'autres destinatation comme Figma ou Github
Schema illustrant comment les Design Tokens gérés dans un spreadsheet sont transformés et synchronisés vers d'autres destinatation comme Figma ou Github
Un projet en tête ?

Parlez-en 30 minutes avec un expert.

Portrait de Cédric Marteau
Portrait de Maxime Frere
portrait de Jules Bassoleil

Nous vous recontactons sous peu.

Un projet en tête ?

Parlez-en 30 minutes avec un expert.

Portrait de Cédric Marteau
Portrait de Maxime Frere
portrait de Jules Bassoleil

Nous vous recontactons sous peu.

Un projet en tête ?

Parlez-en 30 minutes avec un expert.

Portrait de Cédric Marteau
Portrait de Maxime Frere
portrait de Jules Bassoleil

Nous vous recontactons sous peu.

Un projet en tête ?

Parlez-en 30 minutes avec un expert.

Portrait de Cédric Marteau
Portrait de Maxime Frere
portrait de Jules Bassoleil

Nous vous recontactons sous peu.