Dans cet article, je parle de mon processus de travail sur l'un des projets à grande échelle de refonte de l'outil interne de Probo (nous l'appelons Cerebro ) pour un meilleur support client.

Qu'est-ce que Cerebro ?

Cerebro est une source unique de vérité pour tout ce qui concerne Probo ! Il s'agit de l'outil interne de Probo qui comporte plusieurs sections, notamment la création de contenu (pour créer et envoyer du contenu à l'application), les balises (créer des balises utilisateur et attribuer une action à ces balises), le tableau de bord et les utilisateurs.

La section Détails de l'utilisateur est la base de données des utilisateurs, où l'équipe CX peut vérifier les informations concernant les plaintes des utilisateurs et revenir à l'utilisateur.

Pour cet article, vous regardez comment nous avons repensé la section des détails de l'utilisateur de Cerebro.

Le bref

Refonte de la section Détails de l'utilisateur sur Cerebro pour améliorer l'expérience utilisateur et la productivité de l'équipe de support client de Probo.

Comprendre le problème

L'équipe d'assistance utilise Cerebro pour vérifier les activités des utilisateurs effectuées sur l'application.

Pour cette tâche, j'ai d'abord identifié les principaux flux d'utilisateurs, puis j'ai recherché les problèmes UX qu'ils contenaient :

Alors que je me suis assis avec l'équipe de support pour observer leurs flux de travail et identifier les problèmes d'utilisabilité, j'ai résolu moi-même certains tickets. C'était pendant la saison IPL lorsque nous avons reçu plus de 1000 billets par exécutif communautaire, d'où leur charge de travail immense.

Les voir si déterminés à offrir la meilleure expérience d'assistance aux utilisateurs probo a touché une corde sensible en moi et m'a poussé à améliorer leur expérience quotidienne grâce à la conception.

Problèmes de base identifiés :

1. Mauvaise lisibilité des informations : le travail principal des utilisateurs consiste à obtenir des informations de Cerebro, mais en regardant à travers les tableaux, il y avait beaucoup d'effort cognitif, car ils devaient se concentrer beaucoup pour trouver les informations requises à l'écran.
2. Navigation complexe : pour certains flux d'utilisateurs, la navigation était complexe et masquée.
3. Charge cognitive accrue : la conception précédente ne s'alignait pas sur les lois de hiérarchie et de proximité de la gestalt pour réduire la charge cognitive des utilisateurs.
   De plus, avec des flux d'utilisateurs donnés, les utilisateurs devaient se souvenir des informations d'une table et passer à une autre table pour comparer, ce qui augmentait le temps nécessaire pour effectuer une tâche.
4. L' identité de la marque n'est pas alignée : l'image de marque de Probo a été repensée il y a quelques mois, la refonte de Cerebro a donc été l'occasion de s'aligner sur la nouvelle image de marque.

L'application et le site Web de Probo ont été repensés il y a quelques mois avec une nouvelle image de marque, il était grand temps qu'il en soit de même dans les outils internes.

Voyons le Avant vs Après de certaines pages :

Conceptions - Avant vs Après

Décomposons donc ces refontes une par une.

Avant vs Après - Répartition de la conception

Section de résumé de l'utilisateur :
cette section comprend les informations de base disponibles sur les utilisateurs, qui sont séparées en trois parties ; des informations similaires sont conservées ensemble.

• Les informations les plus importantes sont mises en évidence sur les fronts tels que les détails et le statut de l'utilisateur.
• Priorisation des actions : dans l'ancienne conception, trois CTA sont présents sans aucune hiérarchie pour les actions principales/secondaires.
  De plus, après analyse, j'ai appris qu'aucune d'entre elles n'était une action CTA ou principale et n'avait donc pas besoin d'être franche et concentrée sur l'écran. Les boutons d'action sont composés d'un bouton appelé 'options'.

• Barre de navigation latérale :
  dans les écrans avec des tableaux de données, l'espace horizontal est de la plus haute importance. Par conséquent, la conception de la barre de navigation latérale est repensée avec des boutons d'icônes prenant un minimum d'espace.
• Si une barre de navigation pleine grandeur est requise, l'utilisateur peut cliquer sur le logo et le développer dans la barre de navigation pleine grandeur avec des boutons Texte + Icône.
  Sans développer également, si les utilisateurs ont besoin de changer, ils peuvent survoler les icônes pour voir ce que cela signifie :

Mais comment la séparation des onglets faciliterait-elle les comparaisons de données entre les tables dans différents onglets ? Nous couvrirons cela dans un moment!

Plongeons maintenant dans quelques détails supplémentaires :

Optimiser les tables de données pour une meilleure expérience utilisateur :
les tables de données ont une tâche à accomplir : fournir rapidement les données nécessaires aux utilisateurs !
Pour que ce travail soit fait, il doit avoir une capacité de balayage rapide pour trouver des informations pertinentes.

Ce sont les conceptions Avant vs Après pour les deux tables les plus complexes - Historique de la balance et Historique des échanges

Pour faciliter et accélérer la numérisation des données, 4 points sont pris en compte en gros :

• Scannabilité rapide pour trouver des informations pertinentes grâce à un codage couleur et en ajoutant une hiérarchie et une proximité pour séparer les informations.
• Regrouper des données similaires
• Éliminer les informations répétitives
• Réorganiser les données pour une comparaison rapide

Comment ça s'est passé ?

La refonte ainsi que quelques corrections de bogues ont été planifiées pour le développement et grâce aux résultats des tests d'utilisabilité, il est prévu d'augmenter la productivité de 2x.

Comme cela est encore en cours de développement, il n'est pas possible de partager les performances finales et les KPI pour le moment, mais je mettrai à jour ici dès qu'il sera mis en ligne.

Qu'est-ce que j'ai appris ?
La plupart du travail que j'ai effectué avant ce projet était lié à l'ajout de nouvelles fonctionnalités de conception aux pages de destination de l'application ou du site Web de Probo.
Ainsi, travailler sur un ensemble de données aussi vaste était un défi en soi, j'ai beaucoup appris sur la façon dont UX est le résultat direct de la façon dont l'interface utilisateur a été implémentée.

Aussi pour les passionnés de design voici le lien vers un article sur le site du groupe NN qui m'a beaucoup aidé dans la compréhension et la conception de tableaux de données.

Ps j'ai aussi appris à documenter régulièrement le processus de conception car cette étude de cas m'a pris beaucoup trop de temps à écrire

Et après?

1. Explorer les micro-interactions ainsi que les états vides pour ajouter de petits délices entre tous les travaux qui n'ont pas été couverts pour le moment en raison d'un manque de temps.
2. Explorer les raccourcis clavier pour utiliser l'outil, à partir de maintenant, tout le monde dans l'équipe a des MacBooks (flex 101 ) donc il est efficace et facile à utiliser les trackpads pour l'instant.
3. Pour l'instant, la refonte de la seule section des détails de l'utilisateur est terminée, la prochaine phase devrait être la refonte de toutes les autres sections de Cerebro.

Un grand bravo à notre formidable équipe CX, j'ai littéralement fait irruption dans leur chambre au moins 5 fois par jour pendant ce projet, ils ont répondu à toutes mes questions et doutes de la meilleure façon possible et c'était surtout pendant la saison IPL, la plus occupée période de l'année!

Merci également à ma formidable équipe de conception ❤️ ainsi qu'à tous les propriétaires de produits qui m'ont aidé avec de précieux commentaires et suggestions tout au long.

Merci d'avoir lu! A bientôt avec une autre étude de cas

Dites bonjour à Nidhi sur LinkedIn • Instagram • Twitter