Composants de l'interface finale
HARMONIE MUTUELLE
Refonte d’une interface CRM pour réduire de 40 % le temps de traitement des demandes d'adhérents
La refonte portait sur la page de consultation d'une demande adhérent sur le CRM, utilisée quotidiennement par 5+ profils métiers différents. L’objectif : réorganiser et simplifier l’affichage des informations pour améliorer la lisibilité, en s’appuyant sur une recherche utilisateur afin de répondre aux besoins spécifiques de chaque profil et réduire le temps de traitement.
Timeline
8 mois
Fev - Sep 2025
Equipe
Solo UX/UI Designer
Mon rôle
Recherche utilisateur
Redesign UX et UI
Tests utilisateurs
Interlocuteurs
Conseillers CRM
Gestionnaires
Product Owner
Business Analyst
Développeurs
Lead UX/UI Designer
Challenges
Multi-profils utilisateurs
Multi-profils utilisateurs
Multi-profils utilisateurs
Multi-profils utilisateurs
Manque de vocabulaire métier
Manque de vocabulaire métier
Manque de vocabulaire métier
Manque de vocabulaire métier
Limites de l’architecture existante
Limites de l’architecture existante
Limites de l’architecture existante
Limites de l’architecture existante
Objectifs visés
de gain de rapidité d’accès à l’information
de réduction du temps de traitement
de diminution des erreurs de saisie
Avant / Après
Exemple de page de consultation d'une demande — aucune donnée réelle n’est affichée.
LE PROBLÈME
LE PROBLÈME
Hiérarchie confuse, ergonomie faible : un frein au traitement rapide des demandes
Hiérarchie confuse, ergonomie faible : un frein au traitement rapide des demandes
Initialement motivée par des contraintes techniques, la refonte de la page de consultation d’une demande adhérent a rapidement mis en lumière des enjeux d’usage. Pour identifier les irritants côté utilisateurs, j’ai mené une première vague de 10 entretiens avec différents profils métiers (conseillers, assistants technico commercial, chargés d'affaires…).
Face à une forte habituation à l’interface de ces profils, j'ai ensuite mené 5 entretiens supplémentaires avec des nouveaux arrivants, dont le regard neuf a permis de faire émerger des problèmes ignorés par les utilisateurs expérimentés, et impactant grandement l'efficacité et la qualité du traitement des demandes.
Enfin, sur conseil de ma Lead Designer, j'ai mené une troisième vague de 5 entretiens avec des profils gestionnaires, afin de confronter les premiers enseignements aux usages les plus intensifs et de valider leur impact sur le traitement quotidien des demandes à fort volume.
Ces entretiens ont permis de confirmer 3 irritants majeurs :
Initialement motivée par des contraintes techniques, la refonte de la page de consultation d’une demande adhérent a rapidement mis en lumière des enjeux d’usage. Pour identifier les irritants côté utilisateurs, j’ai mené une première vague de 10 entretiens avec différents profils métiers (conseillers, assistants technico commercial, chargés d'affaires…).
Face à une forte habituation à l’interface de ces profils, j'ai ensuite mené 5 entretiens supplémentaires avec des nouveaux arrivants, dont le regard neuf a permis de faire émerger des problèmes ignorés par les utilisateurs expérimentés, et impactant grandement l'efficacité et la qualité du traitement des demandes.
Enfin, sur conseil de ma Lead Designer, j'ai mené une troisième vague de 5 entretiens avec des profils gestionnaires, afin de confronter les premiers enseignements aux usages les plus intensifs et de valider leur impact sur le traitement quotidien des demandes à fort volume.
Ces entretiens ont permis de confirmer 3 irritants majeurs :
Exemple de page de consultation d'une demande
01
Bloc Informations Générales
Manque de hiérarchisation et de visibilité des informations les plus importantes.
02
Bloc Demande / Réponse
Problèmes d'utilisabilité et de lecture liés au format du bloc.
03
Bloc Documents
Inconfort d'usage et manipulations chronophages liés à l'emplacement du bloc tout en bas de la page.
CHANGEMENT DESIGN N°1
CHANGEMENT DESIGN N°1
Optimiser la hiérarchisation et lisibilité des informations pour accéder plus vite à l'essentiel
Optimiser la hiérarchisation et lisibilité des informations pour accéder plus vite à l'essentiel
Lors des entretiens utilisateurs, j’ai utilisé la méthode du tri de cartes pour demander aux utilisateurs de hiérarchiser les informations présentes sur la page selon leur utilité perçue.
Lors des entretiens utilisateurs, j’ai utilisé la méthode du tri de cartes pour demander aux utilisateurs de hiérarchiser les informations présentes sur la page selon leur utilité perçue.
Interface de l'outil utilisé pour le tri de cartes
À l'issue des entretiens, j'ai obtenu une matrice de résultats, avec les informations classées des plus utiles aux moins utiles :
À l'issue des entretiens, j'ai obtenu une matrice de résultats, avec les informations classées des plus utiles aux moins utiles :
J’ai ensuite retravaillé le bloc des informations principales pour faire remonter, en priorité, les données considérées comme ‘très utiles’ par la majorité des profils :
J’ai ensuite retravaillé le bloc des informations principales pour faire remonter, en priorité, les données considérées comme ‘très utiles’ par la majorité des profils :
Option A
Option B
Ecartée
Bloc unique exhaustif
Toutes les infos sont visibles par défaut
Vue complète en un seul endroit
Aucun contenu masqué
Lecture continue pour profils experts
Densité élevée
Repérage de l’essentiel plus lent
Option A
Option B
Ecartée
Bloc unique exhaustif
Toutes les infos sont visibles par défaut
Vue complète en un seul endroit
Aucun contenu masqué
Lecture continue pour profils experts
Densité élevée
Repérage de l’essentiel plus lent
Option A
Option B
Ecartée
Bloc unique exhaustif
Toutes les infos sont visibles par défaut
Vue complète en un seul endroit
Aucun contenu masqué
Lecture continue pour profils experts
Densité élevée
Repérage de l’essentiel plus lent
Option A
Option B
Ecartée
Bloc unique exhaustif
Toutes les infos sont visibles par défaut
Vue complète en un seul endroit
Aucun contenu masqué
Lecture continue pour profils experts
Densité élevée
Repérage de l’essentiel plus lent
Le choix final
L’option B a été privilégiée car elle permet un accès plus rapide aux informations clés, tout en restant compatible avec les usages experts via des blocs dédiés.
Le choix final
L’option B a été privilégiée car elle permet un accès plus rapide aux informations clés, tout en restant compatible avec les usages experts via des blocs dédiés.
Le choix final
L’option B a été privilégiée car elle permet un accès plus rapide aux informations clés, tout en restant compatible avec les usages experts via des blocs dédiés.
Le choix final
L’option B a été privilégiée car elle permet un accès plus rapide aux informations clés, tout en restant compatible avec les usages experts via des blocs dédiés.
CHANGEMENT DESIGN N°2
CHANGEMENT DESIGN N°2
Une structure bento pour repérer plus vite les informations clés / pour faciliter l'accès à l'information
Une structure bento pour repérer plus vite les informations clés / pour faciliter l'accès à l'information
J’ai ensuite repensé la structure de la page en m’inspirant d’un modèle déjà utilisé sur une autre page du CRM, et ayant reçu des retours utilisateurs positifs : le design bento.
J’ai ensuite repensé la structure de la page en m’inspirant d’un modèle déjà utilisé sur une autre page du CRM, et ayant reçu des retours utilisateurs positifs : le design bento.
Inspiré par les boîtes bento japonaises, ce concept propose une organisation compartimentée de l'interface. Chaque "compartiment" a un rôle bien défini, ce qui facilite la navigation et l'accès à l'information.
L’objectif
Offrir une vue d’ensemble immédiate sur les blocs les plus consultés de la page de consultation d'une demande, sans besoin de scroller.
L’objectif
Offrir une vue d’ensemble immédiate sur les blocs les plus consultés de la page de consultation d'une demande, sans besoin de scroller.
L’objectif
Offrir une vue d’ensemble immédiate sur les blocs les plus consultés de la page de consultation d'une demande, sans besoin de scroller.
L’objectif
Offrir une vue d’ensemble immédiate sur les blocs les plus consultés de la page de consultation d'une demande, sans besoin de scroller.
Propositions pour la structure de la page
Itération n°1
N°2
N°3
Structure verticale
Lecture simple et familière
Implémentation rapide
Forte dépendance au scroll
Infos clés dispersées
Itération n°1
N°2
N°3
Structure verticale
Lecture simple et familière
Implémentation rapide
Forte dépendance au scroll
Infos clés dispersées
Itération n°1
N°2
N°3
Structure verticale
Lecture simple et familière
Implémentation rapide
Forte dépendance au scroll
Infos clés dispersées
Itération n°1
N°2
N°3
Structure verticale
Lecture simple et familière
Implémentation rapide
Forte dépendance au scroll
Infos clés dispersées
J’ai également fusionné les blocs “Demande/Réponse” et “Documents” afin de limiter les scrolls répétitifs mentionnés par les utilisateurs (50+ par jour), et ainsi améliorer le confort d’usage au quotidien.
J’ai également fusionné les blocs “Demande/Réponse” et “Documents” afin de limiter les scrolls répétitifs mentionnés par les utilisateurs (50+ par jour), et ainsi améliorer le confort d’usage au quotidien.
Le choix final
L'itération n°3 a été retenue car elle offre la meilleure vue d’ensemble sans besoin de scoller, répondant directement aux irritants identifiés en recherche.
Le choix final
L'itération n°3 a été retenue car elle offre la meilleure vue d’ensemble sans besoin de scoller, répondant directement aux irritants identifiés en recherche.
Le choix final
L'itération n°3 a été retenue car elle offre la meilleure vue d’ensemble sans besoin de scoller, répondant directement aux irritants identifiés en recherche.
Le choix final
L'itération n°3 a été retenue car elle offre la meilleure vue d’ensemble sans besoin de scoller, répondant directement aux irritants identifiés en recherche.
"Je préfère largement cette structure en blocs, qui fait gagner du temps, plutôt que dérouler toute la page, aller de haut en bas…"
Sylvie, Conseillère en agence
"Je préfère largement cette structure en blocs, qui fait gagner du temps, plutôt que dérouler toute la page, aller de haut en bas…"
Sylvie, Conseillère en agence
"Je préfère largement cette structure en blocs, qui fait gagner du temps, plutôt que dérouler toute la page, aller de haut en bas…"
Sylvie, Conseillère en agence
"Je préfère largement cette structure en blocs, qui fait gagner du temps, plutôt que dérouler toute la page, aller de haut en bas…"
Sylvie, Conseillère en agence
CHANGEMENT DESIGN N°3
CHANGEMENT DESIGN N°3
Un format messagerie pour simplifier les échanges et faciliter leur suivi
Un format messagerie pour simplifier les échanges et faciliter leur suivi
Lors des entretiens, les utilisateurs évoquaient tous les mêmes irritants concernant le bloc Demande/Réponse : trop de clics, gestes fatigants, et messages tronqués.
Lors des entretiens, les utilisateurs évoquaient tous les mêmes irritants concernant le bloc Demande/Réponse : trop de clics, gestes fatigants, et messages tronqués.
Une hauteur limitée masque une partie des échanges et oblige à scroller ou redimensionner le bloc pour accéder au contenu complet.
"Quand je colle mon texte il apparaît tronqué. Je suis obligé d'étirer le bloc à chaque fois et ça me fait perdre du temps."
Emeline, Conseillère en Agence
"Quand je colle mon texte il apparaît tronqué. Je suis obligé d'étirer le bloc à chaque fois et ça me fait perdre du temps."
Emeline, Conseillère en Agence
"Quand je colle mon texte il apparaît tronqué. Je suis obligé d'étirer le bloc à chaque fois et ça me fait perdre du temps."
Emeline, Conseillère en Agence
"Quand je colle mon texte il apparaît tronqué. Je suis obligé d'étirer le bloc à chaque fois et ça me fait perdre du temps."
Emeline, Conseillère en Agence
"À la fin de la journée, le poignet qui a fait plein de cliqués glissés est très fatigué."
Michaël, Gestionnaire Santé Prestation
"À la fin de la journée, le poignet qui a fait plein de cliqués glissés est très fatigué."
Michaël, Gestionnaire Santé Prestation
"À la fin de la journée, le poignet qui a fait plein de cliqués glissés est très fatigué."
Michaël, Gestionnaire Santé Prestation
"À la fin de la journée, le poignet qui a fait plein de cliqués glissés est très fatigué."
Michaël, Gestionnaire Santé Prestation
"Je dois cliquer en permanence pour ouvrir le bloc et voir l’ensemble des échanges… J’ai peur de rater des infos importantes."
Cédric, Chargé d'Affaires
"Je dois cliquer en permanence pour ouvrir le bloc et voir l’ensemble des échanges… J’ai peur de rater des infos importantes."
Cédric, Chargé d'Affaires
"Je dois cliquer en permanence pour ouvrir le bloc et voir l’ensemble des échanges… J’ai peur de rater des infos importantes."
Cédric, Chargé d'Affaires
"Je dois cliquer en permanence pour ouvrir le bloc et voir l’ensemble des échanges… J’ai peur de rater des infos importantes."
Cédric, Chargé d'Affaires
J'ai donc exploré une piste d'affichage radicalement différente : un format messagerie.
Lors des explorations, j’ai choisi de m’inspirer du format messagerie tel qu’on le retrouve dans des applications largement utilisées comme WhatsApp. Ce modèle est déjà bien connu des utilisateurs, fonctionne intuitivement et facilite la lecture des échanges.
L’idée était donc de transposer cette expérience familière au bloc Demande / Réponse, pour obtenir les bénéfices suivants :
Plus besoin d’étirer manuellement les blocs pour tout lire.
Un meilleur suivi des échanges au fil de l’eau.
Une expérience plus fluide, aussi bien pour rédiger que pour lire une réponse.
J'ai donc exploré une piste d'affichage radicalement différente : un format messagerie.
Lors des explorations, j’ai choisi de m’inspirer du format messagerie tel qu’on le retrouve dans des applications largement utilisées comme WhatsApp. Ce modèle est déjà bien connu des utilisateurs, fonctionne intuitivement et facilite la lecture des échanges.
L’idée était donc de transposer cette expérience familière au bloc Demande / Réponse, pour obtenir les bénéfices suivants :
Plus besoin d’étirer manuellement les blocs pour tout lire.
Un meilleur suivi des échanges au fil de l’eau.
Une expérience plus fluide, aussi bien pour rédiger que pour lire une réponse.
Cependant, un obstacle technique est apparu.
Difficulté rencontrée
Le Datahub, qui gère la structure des demandes, n’était pas conçu pour fonctionner en format “conversationnel”. Ajouter plusieurs réponses signifiait repenser entièrement l’architecture des données. Techniquement, c’était quasi impossible à court terme.
Difficulté rencontrée
Le Datahub, qui gère la structure des demandes, n’était pas conçu pour fonctionner en format “conversationnel”. Ajouter plusieurs réponses signifiait repenser entièrement l’architecture des données. Techniquement, c’était quasi impossible à court terme.
Difficulté rencontrée
Le Datahub, qui gère la structure des demandes, n’était pas conçu pour fonctionner en format “conversationnel”. Ajouter plusieurs réponses signifiait repenser entièrement l’architecture des données. Techniquement, c’était quasi impossible à court terme.
Difficulté rencontrée
Le Datahub, qui gère la structure des demandes, n’était pas conçu pour fonctionner en format “conversationnel”. Ajouter plusieurs réponses signifiait repenser entièrement l’architecture des données. Techniquement, c’était quasi impossible à court terme.
Plutôt que d’abandonner l’idée du format messagerie, j'ai échangé avec le Product Owner et une Développeuse pour trouver un compromis viable :
Plutôt que d’abandonner l’idée du format messagerie, j'ai échangé avec le Product Owner et une Développeuse pour trouver un compromis viable :
Option A
Option B
La vision utilisateur idéale (long terme)
Format messagerie.
Lecture continue et complète des échanges
Expérience familière et intuitive
Répond à tous les irritants utilisateurs
Nécessite une évolution de la structure du Datahub
Implémentation complexe
Option A
Option B
La vision utilisateur idéale (long terme)
Format messagerie.
Lecture continue et complète des échanges
Expérience familière et intuitive
Répond à tous les irritants utilisateurs
Nécessite une évolution de la structure du Datahub
Implémentation complexe
Option A
Option B
La vision utilisateur idéale (long terme)
Format messagerie.
Lecture continue et complète des échanges
Expérience familière et intuitive
Répond à tous les irritants utilisateurs
Nécessite une évolution de la structure du Datahub
Implémentation complexe
Option A
Option B
La vision utilisateur idéale (long terme)
Format messagerie.
Lecture continue et complète des échanges
Expérience familière et intuitive
Répond à tous les irritants utilisateurs
Nécessite une évolution de la structure du Datahub
Implémentation complexe
Le compromis trouvé ne couvre pas 100 % des attentes utilisateurs, mais il répond déjà à leurs besoins essentiels : ne rien manquer, mieux suivre les échanges et répondre plus facilement.
À court terme, cette solution permet une amélioration significative de l’expérience sans remise en cause de l’existant.
Le compromis trouvé ne couvre pas 100 % des attentes utilisateurs, mais il répond déjà à leurs besoins essentiels : ne rien manquer, mieux suivre les échanges et répondre plus facilement.
À court terme, cette solution permet une amélioration significative de l’expérience sans remise en cause de l’existant.
Le choix final
À plus long terme, nous avons toutefois recommandé aux équipes techniques l'option A, solution la plus performante pour les utilisateurs et pour l’efficacité métier.
Le choix final
À plus long terme, nous avons toutefois recommandé aux équipes techniques l'option A, solution la plus performante pour les utilisateurs et pour l’efficacité métier.
Le choix final
À plus long terme, nous avons toutefois recommandé aux équipes techniques l'option A, solution la plus performante pour les utilisateurs et pour l’efficacité métier.
Le choix final
À plus long terme, nous avons toutefois recommandé aux équipes techniques l'option A, solution la plus performante pour les utilisateurs et pour l’efficacité métier.
RÉTROSPECTIVE
RÉTROSPECTIVE
Plus de clarté, moins de clics : une expérience adaptée aux usages réels
Plus de clarté, moins de clics : une expérience adaptée aux usages réels
Ce que la refonte pourrait améliorer
Mon alternance s’est terminée avant que les maquettes puissent être testées et intégrées au CRM, ce qui explique l’absence de métriques réelles post-lancement.
Néanmoins, au vu de la refonte proposée et des retours récoltés en amont, j’ai formulé plusieurs hypothèses d’impact :
Mon alternance s’est terminée avant que les maquettes puissent être testées et intégrées au CRM, ce qui explique l’absence de métriques réelles post-lancement.
Néanmoins, au vu de la refonte proposée et des retours récoltés en amont, j’ai formulé plusieurs hypothèses d’impact :
de gain de rapidité d’accès aux informations clés
de gain de rapidité d’accès aux informations clés
de gain de rapidité d’accès aux informations clés
Infos trouvées rapidement
-> Traitement express
de réduction du temps de traitement d'une demande
de réduction du temps de traitement d'une demande
de réduction du temps de traitement d'une demande
Manipulations plus rapides
-> Productivité accrue
de diminution des erreurs de saisie
de diminution des erreurs de saisie
de diminution des erreurs de saisie
Saisies plus fiables
-> Moins de corrections
Ce que j'ai appris
Composer avec des contraintes techniques fortes
Trouver des solutions réalistes, adaptées à la fois aux utilisateurs, aux métiers et aux équipes techniques, sans sacrifier la qualité de l'expérience.
Concevoir pour plusieurs profils simultanément
Proposer des solutions communes qui correspondent aux besoins et usages de plusieurs profils utilisateurs différents.
Mon impact sur…
Le produit (CRM)
J'ai créé une page plus claire, plus rapide à parcourir et mieux alignée avec les usages terrain, facilitant le travail quotidien des conseillers.
Les processus de design & dev
J’ai créé un template de page de consultation qui accélère la conception pour l’équipe UX et réduit l’effort d’intégration côté développeurs.
