Bouygues Telecom Business Distribution

Allô, qui est à l'appareil ?!

Un design system pour quatre marques, zéro doublon

Expertises

  • Design System
  • UI

Date

Juillet 2023 à août 2024
Des mains de femme qui tiennent un téléphone

E-commerce multi-marques

Contexte

Bouygues Telecom Business Distribution est une filiale de Bouygues Telecom qui commercialise des forfaits et des téléphones en marque blanche. J'ai accompagné leurs équipes sur la conception des parcours de souscription et la création d'un design system commun à leurs quatre marques.

Unifier pour mieux régner

Conception multi-marques

Quatre marques, quatre identités, un seul design system. L'objectif était d'industrialiser la conception et de simplifier la maintenance, sans que chaque marque perde son identité visuelle.

Logo de NRJ Mobile

NRJ Mobile

Logo de Cdiscount Mobile

Cdiscount Mobile

Logo d'Auchan télécom

Auchan télécom

Logo de btbd

btbd

Jeu de variables, partie 1

Design tokens de référence

Les variables Figma permettent de changer l'identité d'une marque en quelques clics. Pour y arriver, j'ai défini les tokens de référence de chaque marque, qui alimentent ensuite les tokens de système et de composant du design system commun.

Screenshot des variables dans Figma

Exemple de design tokens de référence pour la marque Auchan télécom

Jeu de variables, partie 2

Design tokens de système et de composant

Définir les tokens de système et de composant demande de la rigueur : chaque token créé doit se justifier. J'ai souvent dû arbitrer entre mutualiser un composant dans le design system commun ou le conserver dans le design kit d'une marque spécifique, pour éviter de faire exploser la complexité.

Screenshot des variables dans Figma

Les design tokens de système et de composant

Jeu de variables, partie 3

Mise en pratique

Zone 1 (image ci-dessous)

Les composants sont flexibles et paramétrables. On peut changer leurs états, afficher ou masquer des icônes, modifier le label. Un seul composant couvre tous les usages de chaque marque.

Zone 2 (image ci-dessous)

Les tokens de système et de composant font le reste. L’identité graphique de chaque marque s’applique à la volée, sans retoucher un seul composant.

Screenshot du composant Button dans Figma. La zone 1 permet de paramétré le composant. La zone 2 permet d'appliquer l'identité de marque d'un client.

Exemple d’utilisation d’un composant et du style automatique via les variables Figma.

Fin de partie

Utilisation des design tokens à l’infini

Plus le design system couvre de composants, plus le gain est important. En pratique, changer de marque devient une question de secondes, ce qui libère du temps pour ce qui compte vraiment : concevoir de bonnes expériences.

Composants d'Auchan

Auchan télécom

Composants de NRJ Mobile

NRJ Mobile

Composants de Cdiscount Mobile

Cdiscount Mobile

Composants de btbd

btbd