WORK
> UI
> MAIF.FR
Rôle : UI | DA | Web
Client : Maif
Lorsque l'agence Axance a remporté le budget pour la refonte du site, j'ai été missionné pour rejoindre une équipe de designer au siège social de la MAIF, en échange direct avec les équipes internes du projet et de développement.
J'ai commencé en duo avec un autre directeur artistique puis repris entièrement le sujet, accompagné de 3 UX Designer. La mission s'est poursuivie à temps plein sur une période de 12 mois.
En parallèle de l'application de la nouvelle charte, l'objectif majeur était de transitionner l'ensemble du site vers un système responsive pour s'adapter à la forte augmentation des consultations mobiles.
Le site comprenant des centaines de pages individuelles, aussi bien pour du marketing, du e-commerce, que de l'éditorial, nous avons commencé le chantier par la création d'une bibliothèque de composants et modules responsives et dynamiques. Ainsi nous avons pu assurer une déclinaison rapide tout en facilitant la charge de dev et en assurant une autonomie pour l'ajout de futures pages respectueuses de l'identité et ergonomie du site.
Un autre chantier a été le remaniement complet du système de simulation des offres. Les simulateurs existants étant considérés comme complexes, chargés, répétitifs, illisibles, voire nécessitant un contact par email avant d'obtenir le résultat, un gros travail de fond a été fait en collaboration avec l'équipe UX.
Nous avons retravaillé leur parcours, les types de composants, l'affichage des résultats et la hiérarchie visuelle globale pour simplifier la compréhension et l'engagement de l'utilisateur. L'ensemble du travail a été ponctué de tests utilisateurs pour confirmer notre démarche.
Ayant réussi à boucler en avance le scope budgété, malgré une team réduite, nous avons proposé de remanier l'ensemble des emailings transactionnels. L'objectif était de rendre les emailings lisibles également sur mobile, et d'assurer la cohérence de bout en bout du parcours.
Ayant de bonnes connaissances du code utilisé pour les emailings et leurs limites, j'ai échangé en direct avec un développeur externe depuis la phase de création à la fin de la production. Nous avons ainsi pu fournir un résultat fidèle au site, responsive tout en conservant un contenu dynamique.
Pour redonner de la proximité à travers ces emailings, j'ai décidé d'y inclure le personnage filaire de la MAIF, souvent présent en dialogue direct avec l'audience. J'ai agrémenté l'ensemble des headers de visuels évoluant en fonction de la situation. Par exemple, pour un type d'offre (assurance voiture, habitation...) la simulation est représentée par la réflexion, le devis montre l'étape menant à la situation finale, et la souscription montre son utilisation.
En poussant le design émotionnel, j'ai voulu rajouter des micros animations GIF. Mais malgré l'intérêt porté, la proposition n'a pas été retenue à cause de la difficulté pour en produire de nouvelles par le client en autonomie.
La mission s'est terminée à la fin de la création et du dev de l'ensemble des 60 emailings transactionnels du site.
Simple au départ, le document de charte s'est transformé en référentiel au cours de la mission. A l'image d'un embryon de design system, la charte est devenue un document complet rassemblant et spécifiant l'ensemble des composants et gabarits créés pendant la mission.
J'ai accompagné le document de fichiers, en PSD seulement à cette époque, regroupant l'ensemble des composants pour les designers. Le tout en collaboration avec l'équipe de développement pour maintenir une bibliothèque commune synchronisée et prête à être utilisée côté dev.
