UI
MACIF
Mon Bureau Virtuel
MBV est au coeur d’un double enjeu ; à la fois outil et relai media interne. Utilisé par les 12 000 collaborateurs, il permet un accès rapide aux applications métiers et RSE.
Rôle
Product Designer (UI/UX)
Outils
Figma
Contexte
Le point de départ, une demande récurrente des utilisateurs :
“On veut un mode sombre”.
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, disposant d’un Design System mature pour son site web
Aéma, dont la charte graphique minimaliste ne dispose que de quelques couleurs
Aucune des deux marques n’ayant actuellement de versions sombres de ses couleurs.
Autre contrainte importante, très peu de ressources sont allouées à l’amélioration continue.
C’est dans ce contexte que je me lance dans la création d’un Design System MBV complet après avoir fait valider le principe par la Lead Designer.
Comprendre avant de construire
Avant toute chose, je commence par écouter.
J’étudie les déclinaisons de la charte et je passe du temps avec le Lead Designer du Design System Macif, pour comprendre la logique existante côté web.
J’échange également 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 une collection de variables spécifique MBV avec couleurs indexées sur le Design System de la marque, paramètres responsives, bibliothèque de styles, icônes et composants adaptés.
Pour Aéma
Je repars de zéro.
À partir de la simple charte web, je décline 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 pour tous les thèmes se fait désormais en quelques clics.
Extrait du système de variable MBV
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.
Process
01
Audit & Recherche
Dialoguer avec l’équipe Design System marque, faire l’inventaire de l’existant et s’appuyer sur une structure adaptée avec les bonnes fondations.
02
Échange avec les développeurs et parties prenantes
S’assurer que la sémantique des nouveaux tokens est compatible avec l’architecture déjà en production.
03
Prototypage & Tests
Maquetter les composants dans les différents thèmes pour s’assurer de la cohérence des choix, et en faire l’inventaire dans une bibliothèque exhaustive.
Les résultats
Un produit plus cohérent, accessible et durable
Pour les équipes internes
Fluidité du développement
Rapidité de création des composants
Simplification des déclinaisons des thèmes
Scalabilité du produit
Pour les utilisateurs
Mode sombre moins fatiguant
Interface plus cohérente
Meilleure accessibilité
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.
MBV en Light Mode pour la marque MACIF (maquette)
MBV en Dark Mode pour la marque MACIF (maquette)
MBV en Light Mode pour la marque AEMA (maquette)
MBV en Dark Mode pour la marque AEMA (maquette)
Précédent
Suivant