Contexte et objectifs
J’ai été embauché par une ESN pour travailler en qualité d’UX/UI designer sur la refonte du portail adhérent de l’IPBP (Institut Prévoyance Banque Populaire).
Ma mission consistait à améliorer l’expérience utilisateur et homogénéiser la charte graphique du portail adhérent existant (incluant l’accès RH, et le tunnel adminstratif de demande de liquidation). Les livrables attendus étaient des maquettes graphiques sur Figma. J’étais seul designer sur le projet, et je collaborais avec l’équipe de développement.
Recherche et idéation
La problématique
🎯 L’objectif était de simplifier et fluidifier le parcours utilisateur, et homogénéiser la charte graphique, en prenant en compte les principaux points de douleurs remontés par les adhérents :
- Difficulté à créer son compte,
- Confusion entre les différents identifiants
- Informations confuses sur les natures des prestations
- Difficulté à consulter et télécharger les documents
🔎 J’ai également personnellement audité le portail actuel (assisté par l’IA) pour identifier ce qui pourrait poser problème, les causes possibles des points de douleurs, et proposer des axes d’amélioration.
La cible
Les utilisateurs du portail sont des employés du groupe Banque Populaire, proches de la retraite ou à la retraite, pour la plupart peu à l’aise avec les interfaces digitales.
J’ai créé une fiche persona, puis j’ai fait un schéma d’un parcours utilisateur optimisé.
Solution
Les pain points et mon analyse du portail existant ont en fait révélé une interface trop confuse pour le public cible, une hiérarchisation insuffisante de l’information, et des tâches trop complexes à effectuer.
J’ai donc orienté ma refonte vers une simplification de la navigation, une réorganisation des composants et des informations, en veillant à garder une cohérence visuelle, un design responsive, et des fonctionnalités utiles et intuitives.
Quelques exemples :
Page d’accueil (ci-dessus) :
- infobulle à côté de l’identifiant pour réduire la charge cognitive
- bouton de déconnexion avec icône, couleur, et texte : +37% de rapidité de repérage (selon Nielsen Norman Group)
- des CTAs plus évidents (« voir le détail »), avec une couleur d’intéraction dédiée
- une indentation des sous-items de menu pour une meilleure hiérarchie visuelle
- changement d’ordre des items dans le menu de navigation, donnant plus d’importance à « Mes documents »
- une page mieux structurée et équilibrée
Page documents (ci-dessus) :
- système d’onglets sur desktop (existant déjà sur la version mobile) pour alléger la page trop confuse
- intitulé explicite des filtres pour une meilleure affordance
- ajout d’une colonne de catégorie correspondant aux filtres
- bouton de prévisualisation des documents, et plus seulement de téléchargement, pour offrir à l’utilisateur plus de contrôle
- utilisation de notre couleur d’intéraction pour les éléments cliquables
La création de compte était un point de douleur des utilisateurs.
Ne disposant pas du temps et des moyens de faire des tests utilisateurs pour savoir si les difficultés à créer un compte étaient dûes à un problème de conception ou technique, j’ai proposé une optimisation des écrans (version mobile finale ci-dessus) pour une expérience plus fluide :
- champs de saisies plus clairs avec label + placeholder (recommandé par NN/g et Baymard Institute), à la place des floating labels déjà présents
- des instructions et textes de confirmation plus explicites
- homogénéisation de la charte graphique (notamment les couleurs d’intéractions, de bordures, de liens)
On m’a demandé une attention particulière à la page de messagerie (ci-dessus) :
- relooking adapté
- design minimalisme (8ème heuristique de Nielsen) : le système de filtrage n’était pas adapté au nombre limité de conversation anticipé, et le rafraîchissement devrait être automatique
- l’état inactif des boutons est plus pertinent pour l’affordance que leur masquage, pour signifier que la fonctionnalité n’est que temporairement indisponible (Source : Smashing Magazine)
- la page de messagerie s’ouvre sur la dernière conversation
La selection d’écrans montrée ici n’est pas exhaustive. J’ai également travaillé sur le reste des pages des accès adhérent et RH, ainsi que le processus de liquidation pour lequel j’ai suivi un cahier des charges précis.
Conclusion
Ce travail, mené avec une certaine autonomie m’a confronté à la logique métier d’un environnement administratif et son public cible spécifique.
Être seul designer sur le projet et échanger avec les développeurs m’a poussé à être rigoureux dans la justification de mes choix et à ajuster mes propositions aux contraintes techniques réelles.
Les spécificités de la mission étaient telles que je n’ai pas eu la possibilité de faire une recherche utilisateur plus poussée, néanmoins améliorer ces interfaces existantes était gratifiant et formateur.
Projet réalisé pour IPBP dans le cadre d’une mission avec Scub. Les données affichées sont fictives, à des fins de démonstration. Les visuels sont présentés à titre illustratif de mon travail de conception.
Écoworking