Home Maif

Suite à la refonte de la homepage, l’équipe Navigation & Structure a commencé l’autre chantier très attendu par les métiers : “Le Header principal”.

Le Header dit “principal” à la MAIF correspond au header public déconnecté (il y a 4 types des headers, chaque header a une fonction différente). Je vais donc vous parler du Header principal, ou encore Header “transverse”.

Il accueille les cibles : particuliers, enseignants, professionnels et associations et collectivités. Chaque univers a son propre contenu et des objectifs business différents.

Réduire la taille du header
Améliorer l’expérience utilisateur sur mobile
Faire comprendre les différents cibles / univers
Ajouter la prise de RDV et l’assistance sinistre

Les objectifs du projet

Les valeurs de la MAIF
Accès rapides aux offres
Performance (temps de chargement)
Concilier le business et le care/services

Être un relais de campagne media
Différents modes de contacts
Événements météorologiques et sinistres

À chaque designer,

une version différente…

L’aventure commence !

L’idée c’était de livrer différentes versions par UI designer.

Suite au brief sur les objectifs, j’ai commencé à travailler sur la structure. Je voulais trouver un design modulaire, quelque chose qui me permettrait de changer l’ordre plus facilement.

Pour la performance, j’ai opté pour un design minimaliste. Un travail typographique sur les titres, l’utilisation du blanc et des espacements et enfin des couleurs étant apportées par les images et queques éléments de la page.

Côté événements météorologiques, j’ai travaillé un élément en sticky qui pouvait s’ouvrir sur activation de la part du métier.

Next Steps :

Audit de l’existant
Benchmarck
Création de 2 concepts
Présentation

Clés de mes propositions

Création d’un système de modules

J’ai proposé un système de modules pour pouvoir changer le contenu selon le besoin. Aujourd’hui cet élément s’appelle “lame”

Mettre en avant les accès rapides aux offres

J’ai créé de nouveaux boutons avec plus de feedbacks, remontés en haut de page, une hiérarchie entre des principaux et des secondaires et enfin du relief pour plus d’affordance.

Concilier le business et le care/services

J’ai mis en avant des accès par intérêts pour le sociétaire, un accès à l’espace personnel et rappeler le filaire.

Intégration du Filaire

Je voulais rappelle le filaire car le considère qui est l’ADN MAIF. C’est l’identité forte de la marque, notamment son côté militant.

La fin d’un projet,
le début d’une nouvelle vision marque

Suite à la présentations du projet à la direction. Nous avons fait “un mix” des concepts et structures. Le projet a été un gros travail d’équipe entre : les UX, les UI, PO, scrum, les intégrateurs et développeurs. Les mois sont passés, nous avons fait également des A/B tests qui ont confirmé l’amélioration sur la lisibilité et la compréhension de structure de la page.