Gildas Stephant - MACIF - Mon Bureau Virtuel

Quand je rejoins le projet Mon Bureau Virtuel (MBV), l’application interne utilisée quotidiennement par des milliers de collaborateurs Macif, une demande revenait régulièrement dans les enquêtes de satisfaction :

“On veut un mode sombre.”

C’est donc la première mission que m’a confié la Lead Designer Aude Morisset.

Simple en apparence. Beaucoup moins en réalité.

MBV n’a pas de Design System. Pas de logique d’industrialisation. Pas de fondations pour décliner des thèmes. Et pour couronner le tout, l’application doit exister sous deux marques :

● Macif, avec un Design System mature pour son site web.

● Aéma, qui ne dispose que d’une charte graphique minimaliste avec quelques couleurs.

Aucune des deux marques n’ayant actuellement de versions sombres de ses couleurs.

Autre contrainte importante, les ressources en productions sont allouées principalement aux évolutions fonctionnelles et urgences de sécurité. Très peu à l’amélioration continue.

C’est dans ce contexte que je prends en charge la création d’un Design System complet pour MBV tout en sachant que ces évolutions seront mis en production après ma mission. Sur le budget temps de l’année suivante.

Comprendre avant de construire

Avant de toucher à la moindre couleur, je commence par écouter.
Je passe du temps avec le Lead Designer du Design System Macif, pour comprendre la logique existante côté Macif.
Puis avec le Développeur Front, pour aligner nos langages, nos contraintes et surtout… nos tokens.

Ces échanges posent les bases : si nous voulons un mode sombre cohérent, accessible et durable, il faut d’abord construire une architecture solide.

Prototyper pour valider la logique

Je crée ensuite des templates de pages pour tester la cohérence des variables, vérifier que la logique tient, que les couleurs se déclinent bien, que les composants réagissent correctement.
Chaque écran devient un terrain d’expérimentation pour éprouver la structure du futur Design System.

Construire un Design System… en deux versions

Une fois la logique validée, je passe à la construction.

Pour Macif
Je m’appuie sur le Design System existant pour créer collection spécifique MBV avec couleurs indexées et paramètres responsives.
bibliothèque de styles, icônes responsives, composants adaptés.

Pour Aéma
Je repars de zéro.

À partir de la simple charte web, je crée une gamme complète de couleurs indexées et toute la logique de variables associée.

Une fois cette première étape réalisée, je constitue une bibliothèque contenant :
● Un set d’icônes et pictos responsives,
● Des composants cohérents

Deux marques, deux maturités, un seul Design System.
C’était le défi — et c’est devenu la force du projet.
Pour les concepteurs, créer un nouveau composant MBV dans Figma est à présent très simple : une seule maquette déclinable en quelques clics pour tous les thèmes.

Documenter pour transmettre

Un Design System n’a de valeur que s’il est compris et utilisé.
Je rédige donc deux documentations :
● Comment utiliser les bibliothèques (styles, composants, variables).
● Comment contribuer au Design System (gouvernance, bonnes pratiques, règles de nommage).

L’objectif : rendre les équipes autonomes, et assurer la pérennité du système.

Les résultats : un produit plus cohérent, plus accessible, plus durable

Pour les équipes internes
● Le développement devient plus fluide.
● Les composants sont plus rapides à créer.
● Les déclinaisons de thèmes sont simplifiées.
● Le produit devient scalable.

Pour les utilisateurs
● Un mode sombre confortable et accessible.
● Une interface plus cohérente.
● Moins de fatigue visuelle.
● Une réduction de l’impact énergétique.

Le Design System n’a pas seulement permis de créer un mode sombre :
il a transformé la manière de concevoir du service, et l’évolution de MBV.

Ce que j’ai appris

● Construire les fondations d’un Design System demande de la méthode… et beaucoup de dialogue.
● Les tokens sont un langage commun entre design et développement.
● Le mode sombre n’est pas une palette inversée : c’est une réinterprétation complète de la couleur, du contraste et de l’usage.

Et maintenant ?

Le travail ne s’arrête pas là.

Les prochaines étapes sont déjà identifiées :

● Créer un storybook pour les développeurs.

● Acculturer les équipes à la logique des variables.

● Consolider et rationaliser les collections de variables.

● Renforcer la gouvernance du Design System.

Un chantier de fond, exigeant… mais passionnant.