Rôle : UI Designer
La première mission qui m'a été confié consistait à créer un mode sombre pour l’application développée en interne Mon Bureau Virtuel (MBV) pour les deux versions existantes : MAICF et AEMA (groupe
MB c'est quoi ?
Utilisé par les 12 000 collaborateurs du groupe à l’ouverture de leur poste, MBV est un véritable hub. Constitué de mosaïques profilées de widgets, il permet de remonter certaines informations des outils métiers et RSE, ou un accès rapide.
C'est également un vecteur de communication incontournable de l'entreprise vers ses salariés.
Ainsi, MBV est au coeur d’un double enjeu à la fois outil métier et relai media interne.
C'est également un vecteur de communication incontournable de l'entreprise vers ses salariés.
Ainsi, MBV est au coeur d’un double enjeu à la fois outil métier et relai media interne.
Dark mode et Design System MBV
Demandé initialement par les utilisateurs, le mode sombre s’inscrit également dans une démarche responsable d’économie d’énergie initiée par le groupe.
Pour réaliser ce mode, j’ai rapidement identifié qu’il fallait avant tout industrialiser la méthode de design.
En créant un design système multi-marques indexé sur les chartes MACIF/AEMA et une bibliothèque exhaustive de composants, la cohérence sera améliorée et le design et développement seront grandement facilités par la suite.
En créant un design système multi-marques indexé sur les chartes MACIF/AEMA et une bibliothèque exhaustive de composants, la cohérence sera améliorée et le design et développement seront grandement facilités par la suite.
Le design system MACIF étant déjà avancé côté équipe web, je me suis appuyé sur la structure de variables existante (primitives) pour créer une collection indexée cohérente. Chaque couleur sur MBV à donc son sens propre, mais si la charte des marques évolue, alors les couleurs du design system MBV hériteront de ces modifications sans travail superflu d’actualisation.
Côté AEMA il n’existe pas à l’heure actuel de design system. Simplement une charte de couleurs limitée, quelques styles et un pack d’icônes.
J’ai donc décliné ces éléments pour créer une collection complète de primitives qui m’ont servi de base pour les variables finales.
J’ai donc décliné ces éléments pour créer une collection complète de primitives qui m’ont servi de base pour les variables finales.
Le même travail a été effectué pour les styles, icônes, effets et éléments responsive des deux marques.
En résulte quatre versions de MBV : MACIF light, MACIF dark, AEMA light et AEMA dark.
Ce travail permettra d’ajouter facilement de nouvelles versions selon l’évolution du groupe dans le futur.
Extrait du système de variable MBV
Maquette MBV Dark mode Vs Light Mode
