UX
MACIF
Refonte du CRM marque
Création d’un outil SaaS de gestion de la relation clients
Rôle
UX/UI Designer
Outils
Figma
La mission
La chantier du nouveau CRM intervient dans le cadre de la refonte du SI initiée en 2019 par la DSI du groupe.
Il s'agit d'une interface de gestion transverse de la relation client en omnicanal pour laquelle nous devions intégrer des améliorations fonctionnelles et UX à la solution PEGA Customer Service pour correspondre aux usages des utilisateurs (conseillers MACIF).
La direction projet à choisi le framework Agile SAFe (Scaled Agile Framework pour les très grandes entreprises) avec une équipe pluridisciplinaire internationale d'experts PEGA. Les collaborateurs étant basés dans plusieurs pays d'Europe, les différentes cérémonies se déroulaient à distance en langue anglaise.
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.
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.
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.
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.
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.
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.
Vue 360 de la relation client avec l'outil PEGA Customer Service
Précédent
Suivant