Refonte globale d’interface – Harmonie Mutuelle
Harmonie mutuelle est une société mutualiste française basée sur Paris. Pour accéder à leurs comptes, les adhérents utilisent un espace en ligne qui doit gérer l’ensemble des besoins.
Contexte
Harmonie mutuelle cherche à moderniser son image, cela passe par sa communication, mais aussi par l’interface de ses produits. Le style de l’interface ne correspond plus à la vision de l’entreprise qui souhaite le moderniser en donnant un style plus actuel à l’interface utilisateur, tout en gardant l’esprit de la charte.
Objectifs
Avoir un espace adhérent permettant de reconnaître immédiatement la marque et qui soit agréable pour les adhérents.
Rôles et responsabilités
J’ai réalisé une mise à jour globale sur l’ensemble de l’interface UI du front client. (définition d’un nouveau style, réalisation des maquettes). J’ai également co-géré 2 designer juniors en alternance avec le lead UX.
L’environnement du projet
J’ai travaillé avec une équipe de 3 designer (2 UX-UI juniors et un lead UX), une équipe de 4 PO et une équipe de 10 développeurs.
Périmètre d’actions et contraintes
La principale problématique vient des sprints différents entre chaque équipe.
- 3 semaines pour l’équipe de développement
- 2 semaines pour l’équipe PO
- 1 semaine pour l’équipe UX
J’ai donc choisi de me baser sur le rythme des sprint UX, étant les plus courts.
Utilisateurs et audience
Le produit est utilisé par les adhérents de l’espace adhérent harmonie mutuelle. Le type d’utilisateur va varier car harmonie travaille avec toutes les catégories de profil (age, travail…).
Comment vont-ils utiliser le produit ?
Principalement pour regarder les remboursements, transmettre des documents à harmonie mutuelle et trouver des professionnelles partenaires.
Évolution de l’interface
L’ancienne interface était beaucoup trop lourde et peu agréable pour la navigation. Avec l’équipe UX nous avons enlevé les éléments perturbant la navigation comme les bandeaux de publicités en haut et sur les cotés. Le menu au dessus a disparu au profil d’un menu fixe sur le coté gauche de l’écran. Le double menu est également supprimé au profit de menu déroulant incorporé directement dans le menu de gauche. L’ensemble de la hierarchie de la page a été totalement revue et corrigée pour devenir plus aérée.
Ancienne version
Nouvelle version
Wireframes
L’ergonomie de toute les page a été modifiée, chaque page a donc été maquetée d’abord via des wireframes puis testée par l’équipe UX. Une fois l’interface validée par les tests le maquétage était réalisé.
Quelques exemple de la nouvelle interface
Interface pour l’accessibilité
Un problème récurrent est apparu tout au long de la mission c’est le sujet de la varité des profils. Harmonie mutelle assure toutes les catégories sociaux profesionnelles ainsi que tout les ages. De ce fait, il faut que l’interface soit agréable, mais aussi accessible à tous. C’est pour cette raison que l’ajout d’une option pour modifier les préférences d’affichage a été prévue.
Modifier la police d’origine
Pour facilier le confort de lecture de l’ensemble des utilisateurs, une police adapté pour les dislescique a été ajoutée. Par la suite, d’autres police seront ajoutée à l’interface (plus grasse, à empatement).
Changement de la taille de la police
L’ajout d’une option pour augmenter la taille du texte est également implémenté. Cette option est la plus problématique car elle oblige à modifier certaines interfaces car la possibilité d’augmenter la taille du texte n’avait pas été prévus.
Modification des couleurs de l’interface
Pour finir un des modes de couleurs ont été ajouté avec : Un mode contraste élevé Un dark mode
Nouvelle charte de l’interface
La nouvelle charte pour le site est plus épurée que l’ancienne. Le but étant d’obtenir une interface plus morderne et dynamique. Les couleurs utilisée dans la charte d’origine de Harmonie Mutuelle ont été respectées.
Conclusions
Que s’est-il passé à la fin ?
L’ensemble des éléments ont été remis dans un design system. Le but étant de permettre une passation facile à la prochaine équipe de designer qui prendra le relais.
Les objectifs ont-ils été atteints ?
La refonte globale de l’interface a été réalisée. Par contre l’ensemble des interfaces n’ont pas encore été mise à jour du fait que certaines fonctionnalités étaient toujours en développement.
Quelles sont les leçons apprises ?
Pendant ces 8 mois chez Harmonie j’ai beaucoup appris. J’ai découvert le fonctionnement d’un grand groupe qui doit réaliser un produit pour le plus grand nombre.
C’est dans ce contexte, que je comprend d’autant plus que désigner un produit pour une cible pas vraiment définie est un travail compliqué. Il faut prévoir les contraintes de plusieurs profils (jeunes, adultes, sénior), sans pour autant rendre l’expérience désagréable pour les autres profils. L’ajout d’un mode d’accessibilité a facilité cette transition car il a permis d’améliorer l’ergonomie globale du produit.
J’ai également eu l’opportunité de travailler avec plusieurs pôles de l’entreprise (UX, marketing, développement, commercial…). Cela m’a permis de comprendre les enjeux de chacun en lien avec ce produit. Chaque équipe a des besoins bien spécifiques qui doivent être incorporés à l’interface. Cela ajoute de nouvelles contraintes qui peuvent nuire à l’expérience utilisateurs globale. Je pense notamment au sujet d’ajout de bandeau de publicité demandé par l’équipe commerciale. Un sujet qui a été discuté durant ma mission, mais qui ne sera implémenté que plus tard.
Cette mission m’a également permis d’améliorer mes compétences en tant que lead designer. Étant considéré comme le lead UI durant cette mission j’ai en partie encadré les deux designers juniors (en alternance).
Témoignage client
Vincent a intégré l’équipe en tant que Designer UI pour une mission de 8 mois. Il a pris en charge la production des maquettes des fronts clients et collaborateurs. Il a su s’adapter au mode agile des sprints design et de réalisation. Il a réussi également son intégration au sein de l’équipe. Vincent est force de proposition et son expertise a permis une production de qualité.
Jean Jalaber
Responsable du pôle UX/UI chez Harmonie Mutuelle
