BNP Paribas

A Design Language System to industrialize without standardizing

BNP Paribas

A Design Language System to industrialize without standardizing

Multiple screens of the My Accounts BNPP application

BNP Paribas

A Design Language System to industrialize without standardizing

A Design Language System to industrialize without standardizing

Challenge

How to boost the adoption and impact of a Design Language System?

In 2022, as the BNP Paribas and Hello Bank! applications embarked on an in-depth revamp, the Group made a strategic choice: to unify design and development around a multi-brand, multi-platform Design Language System (DLS).

Our challenge was to lay the foundations of a robust system (nomenclature, tokens, components, etc.) while accompanying a major cultural change. Because a good DLS is only as good as its adoption, we had to get all the teams involved on board, defend strong choices, and maximize concrete benefits in terms of productivity, consistency and collaboration.

About BNP Paribas

8M

Individual and professional clients

No. 1

Banking groups in Europe

About BNP Paribas

8M

Individual and professional clients

No. 1

Banking groups in Europe

About BNP Paribas

8M

Individual and professional clients

No. 1

Banking groups in Europe

About BNP Paribas

8M

Individual and professional clients

No. 1

Banking groups in Europe

BNP Paribas is Europe's leading banking group, with over 8 million customers in France.

Since 2015, we have been supporting its teams in their digital and organizational transformation: large-scale deployment of design, acculturation to user-centric approaches, continuous improvement of employee and customer journeys.

Cover and pages of a book representing the Design Foundations of BNPP
Cover and pages of a book representing the Design Foundations of BNPP
Cover and pages of a book representing the Design Foundations of BNPP
BNPP My Accounts Application Home
BNPP My Accounts Application Home
BNPP My Accounts Application Home
Approach

Code as the source of truth: we have centered our method on code, the only language truly shared by designers and developers, to guarantee the system's reliability, portability and maintainability.

Allowing a high degree of freedom of brand expression: the DLS was designed to allow differentiated visual expression between brands, while maintaining a shared technical and design base.

Supporting a cultural change: by collaborating on a daily basis with production squads, we brought product, tech and design teams on board around common methods: cross-review, joint specification, documentation, transverse governance.

Anatomy of the Donut component of the BNP Paribas Design System: structure, styles, and associated tokens
Anatomy of the Donut component of the BNP Paribas Design System: structure, styles, and associated tokens
Anatomy of the Donut component of the BNP Paribas Design System: structure, styles, and associated tokens
Anatomy of the Donut component of the BNP Paribas Design System: structure, styles, and associated tokens
Documentation of the component creation process with the BNPP Design Language System, using a Code First approach.
Documentation of the component creation process with the BNPP Design Language System, using a Code First approach.
Documentation of the component creation process with the BNPP Design Language System, using a Code First approach.
Documentation of the component creation process with the BNPP Design Language System, using a Code First approach.
Key solutions
  • Multi-brand, multi-platform DLS, compatible with SwiftUI and Jetpack Compose

  • A modular token structure (+4400 tokens), designed for scalability

  • Automated synchronization pipeline (Google Sheets → GitHub → Figma) via GitHub Actions

  • A custom Figma plugin, to instantly switch an interface from iOS to Android, and vice versa

  • A documented collaboration mode: benchmark, spec, recipe, design/dev integration, publication

Results

48%

48%

48%

48%

Time-saving in screen design

96%

96%

96%

96%

Of the team believe that DLS improves the quality of project delivery

57%

57%

57%

57%

Time-saving in developing a multi-brand view

93%

93%

93%

93%

Satisfaction among teams using the DLS

Schema illustrating how Design Tokens managed in a spreadsheet are transformed and synchronized to other destinations such as Figma or Github.
Schema illustrating how Design Tokens managed in a spreadsheet are transformed and synchronized to other destinations like Figma or Github.
Schema illustrating how Design Tokens managed in a spreadsheet are transformed and synchronized to other destinations such as Figma or Github.
Schema illustrating how Design Tokens managed in a spreadsheet are transformed and synchronized to other destinations such as Figma or Github.
Got a project in mind?

Talk to an expert for 30 minutes.

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

We’ll get back to you shortly.

Got a project in mind?

Talk to an expert for 30 minutes.

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

We’ll get back to you shortly.

Got a project in mind?

Talk to an expert for 30 minutes.

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

We’ll get back to you shortly.

Got a project in mind?

Talk to an expert for 30 minutes.

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

We’ll get back to you shortly.