Je m'appelle Jack Green, je suis UX designer chez DoiT, et je vais vous présenter aujourd'hui les choix de design réalisés lors de la refonte de l'une de nos fonctionnalités existantes : Ramp plans.
Ramp plans permet de visualiser la progression d'un client par rapport à son engagement de dépenses auprès d'AWS ou de Google Cloud, et facilite le suivi des dépenses ainsi que l'identification des ajustements nécessaires.
Afin d'exploiter pleinement le potentiel de cette fonctionnalité, l'équipe produit a décidé d'y apporter plusieurs améliorations. J'ai mené un audit de design de la version existante pour identifier les problèmes d'ergonomie et ceux liés au design visuel.
Capture d'écran de Figjam pendant la phase de recherche
Grâce à la fonctionnalité de notes de Figjam (ci-dessus), j'ai annoté les zones à discuter et identifié les axes prioritaires d'amélioration. Cela m'a servi de base pour échanger avec le product manager et le lead developer, en tenant compte de leurs retours et observations issus de leur expérience et des remontées clients.
Lors de cette session, nous avons identifié les axes clés sur lesquels nous concentrer :
- Améliorer la visibilité des informations clés
- Mettre à jour le backend pour fiabiliser les données
Grâce aux études utilisateurs et aux retours des équipes en contact avec les clients, nous savons quelles informations sont les plus pertinentes pour l'utilisateur. Nous voulions donc les présenter de façon claire et facilement assimilable.
La mise à jour du backend n'est pas une tâche UX à proprement parler, mais elle a un impact majeur sur l'expérience utilisateur de Ramp plans. Des données plus fiables inspirent confiance et démontrent immédiatement la valeur de la fonctionnalité.
Le premier axe d'amélioration que je souhaite mettre en avant concerne la liste affichée sur la page Ramp plans. Auparavant, elle se présentait sous forme de tableau.
La page d'aperçu de Ramp plans avant les modifications de design
Le format tableau n'était pas adapté à ce contexte, pour plusieurs raisons :
- Le volume de contenu sur cette page se limite à 1 ou 2 ramp plans ; la liste ne s'allonge pas
- Le contenu manque de hiérarchie, ce qui rend les détails difficiles à repérer
- Certaines informations clés sont absentes du tableau
- Il faut cliquer sur le ramp plan pour comprendre ce qui s'y passe
J'ai donc abandonné le format tableau au profit de cartes :
Ramp plans après les modifications de design
Le passage à un format en cartes a apporté les bénéfices suivants :
- Les informations clés sont plus lisibles
- Les utilisateurs n'ont plus besoin de cliquer sur le ramp plan pour accéder aux informations essentielles
- Une hiérarchie visuelle plus équilibrée et plus agréable à parcourir
Nous avons décliné ce nouveau mode de présentation des informations clés dans la vue détaillée du ramp plan.
Nous avons ajouté en haut de la page des cartes mettant en avant les éléments clés, afin de catégoriser, organiser et faire ressortir les informations pertinentes pour l'utilisateur — des informations jusque-là absentes ou difficiles à extraire de la masse de données.
La vue détaillée mise à jour de Ramp plans
Parmi les nouveautés, nous avons ajouté une boîte de dialogue présentant la répartition des dépenses totales. Elle permet à l'utilisateur d'approfondir l'analyse de ses dépenses dans un format compact, sans interrompre son parcours ni avoir à naviguer vers d'autres sections de la DoiT Console. Cette fonctionnalité nous a été suggérée par un account manager en contact quotidien avec les clients. Selon lui, elle apporte au client un niveau de détail et d'analyse particulièrement précieux.
La boîte de dialogue de répartition des dépenses totales
Comme à chaque lancement, nous suivons activement, depuis la mise en production, les comportements et usages des utilisateurs afin de détecter d'éventuels problèmes ou pistes d'amélioration.