En France, au moment où j’ai démarré ce chantier, le Design System n’existait pas encore comme pratique établie. Les équipes travaillaient avec des chartes graphiques papier. Pas de composants partagés, pas de source de vérité, pas d’alignement dev–design.
Introduire l’Atomic Design était d’abord comme outil personnel pour gagner en efficacité, puis progressivement industrialisé avec les développeurs, adoptié par l’équipe, validé par la direction. Deux DS distincts maintenus sur le périmètre B2C (e.quilibre) et B2B (iBoard), sur une même base de charte EDF.
Design system
Atomic Design
Sketch
Figma
Formation
Charte EDF
Leadership
Besoins
Le Design System n’était pas encore une pratique courante en France. EDF disposait d’une charte graphique ,principalement papier, mais aucune traduction numérique structurée.
Les conséquences sans DS :
Composants recréés à chaque nouvelle maquette
Incohérences visuelles entre produits et entre équipes
Friction constante entre designers et développeurs sur les specs
Impossibilité de tester des hypothèses rapidement
Approche
Construction d'un UI Kit en atomic design (atomes, molécules, organismes à partir de la charte graphique EDF et du site institutionnel (typographies, couleurs, boutons, grilles, photos).
Suite à la fusion Edelia + Netseenergy en Datanumia, deux DS coexistaient.
La question d’une unification a été posé et tranchée : trop coûteux en contexte de projets en cours. J’ai maintenu et fait évoluer les deux DS distincts, chacun cohérent sur son périmètre.
Objectifs
✅ Créer une source de vérité unique pour les équipes design et dev.
✅ Garantir la cohérence visuelle sur tous les produits du groupe.
✅ Accélérer la production de maquettes et de prototypes.
✅ Réduire la friction entre designers et développeurs.
✅ Évangéliser la direction sur la valeur stratégique d’un DS.
01 - Découverte & UI Kit personnel
Découverte de l’Atomic Design une méthodologie encore inconnue en France à l’époque. Construction d’un UI Kit personnel sous Sketch à partir de la charte EDF : typo, couleurs, icônes, boutons, grilles, composants récurrents.
Objectif immédiat : répondre plus vite aux demandes de maquette.
02- Partage équipe & standardisation
Extension du kit à l’équipe design.
Définition des règles d’usage, de nommage, de versioning.
Les designers gagnent en autonomie et en cohérence.
On élimine les refontes à zéro à chaque nouvelle demande.
03 - Industrialisation avec les développeurs
Intégration des développeurs dans la démarche. Le DS devient une source de vérité partagée design + code. Formation de certains devs à l’usage correct des composants. Pour le périmètre B2B (ex-Netseenergy), les devs ont été inclus dès la construction du DS.
04 - Deux DS maintenus sur un socle commun
Suite à la fusion Edelia + Netseenergy, arbitrage stratégique : maintien de deux DS distincts (B2C e.quilibre / B2B iBoard) sur une base de charte EDF commune. Maintenance et évolution des deux périmètres en parallèle avec l’équipe.
05 - Évangélisation direction & migration Figma
Construction d’un dossier de conviction pour la direction :
Pourquoi un DS, ce qu’on y gagne (temps, cohérence, image de marque, vélocité).
En parallèle, dossier de migration outillage : abandon du trio Sketch + Zeplin + InVision au profit de Figma uniquement.
Résultat : licences réduites, bugs d’export éliminés, collaboration design–dev unifiée.
06 - Utilisation du Design System dans différents POC ou Appelle d'offre
Avec ce Design Système, moi et mon équipe on a pu très rapidement crée des prototypes, des poc ou des appelle d'offres avec l'image de marque EDF. Un gain de temps non négligable sur la course des marchés de l'énergie
« Un Design System, ce n’est pas un livrable. C’est une culture à installer dans les outils, dans les habitudes, et dans la tête de la direction. »
