Comment moderniser son produit avec une approche centrée sur l’utilisateur ?

Koban est un produit très apprécié par ses utilisateurs. Sa flexibilité et son socle robuste de fonctionnalités en font un outil solide. Cependant, entre une concurrence qui s’intensifie et une UX complexe à prendre en main pour les prospects décidant d’ouvrir un compte d’essai, Koban se devait d’investir dans la modernisation de son produit. 

L’équipe Koban nous a donc sollicité pour les accompagner dans la refonte graphique et ergonomique de leur CRM. 

Koban est une entreprise française éditrice de logiciel qui commercialise une solution CRM, Facturation et Marketing en mode SaaS.  

L’environnement projet étant contraint, nous avons commencé par utiliser l’ensemble des données que nous avions à disposition pour prioriser nos efforts afin d’être le plus efficace possible.

En même temps que ces travaux de priorisation, nous avons travaillé sur un plan de taggage et un tracking Google Analytics. L’objectif étant de nous synchroniser sur les objectifs quantitatifs à atteindre par la nouvelle expérience utilisateur (UX) du produit. 

Refondre intégralement le produit Koban n’étant pas envisageable, nous avons décidé de travailler sur un design system le plus évolutif possible. L’objectif étant de le rendre le plus simple et abordable possible, de manière à favoriser sa prise en main par l’équipe Koban. 
Que ce soit pour les développeurs ou les personnes en charge de décliner les composants sur d’autres pages et fonctionnalités de l’application, l’utilisation de la librairie de composants Vuetify était, selon nous, la solution idéale. 
En plus de sa communauté, de ses mises à jour régulières et de sa compatibilité avec Vue.JS, Vuetify nous a permis de rapidement délivrer des composants adaptés aux besoins de Koban. 

Une fois le travail de priorisation effectué, nous avons défini un backlog des éléments à traiter en UX/UI. Chaque fonctionnalité et user story étant ensuite traitées sous forme de sprints.

Cela nous a permis de planifier des tests utilisateurs une fois les écrans terminés. Ces tests nous permettant de nous assurer que le nouveau design corresponde bien aux besoins des utilisateurs et, le cas échéant, de l’ajuster en fonction de leurs retours. 

Première étape du projet : comprendre les objectifs business et utilisateurs à optimiser avec la nouvelle UX du produit. Pour cela, nous avons organisé un atelier de co-construction du plan de tracking Koban. 

Ici l’objectif était de s’assurer de comprendre l’ensemble des enjeux à atteindre pour Koban. En effet, avant de concevoir ou optimiser une nouvelle fonctionnalité, le plan de tracking nous permet de nous accorder sur les objectifs qu’elle aura à atteindre. 

Dans un premier temps, le travail a consisté à faire le listing de l’ensemble des éléments / fonctionnalités et pages de l’application Koban. Ce listing nous permettant d’obtenir un backlog complet que nous avons ensuite priorisé. 

Une fois ce backlog obtenu, nous avons utilisé les critères de priorisation suivants : 

Une fois nos Must have, Nice to have, Could have et Won’t have définis, nous avons obtenu un découpage des éléments à garder (ou sortir) du périmètre de notre intervention. Enfin, nous avons regroupé les éléments de manière à pouvoir organiser des tests utilisateurs en fin de sprint et nous assurer qu’ils soient 100% éprouvés avant de partir en développement.

Basée sur Material Design, la librairie est divisée en 3 dossiers distincts : 

Première étape ici : s’approprier les éléments de la librairie de manière à les adapter à l’image de Koban. 

Nous avons ensuite appliqué ce style à l’enveloppe du nouveau produit Koban. En plus de gagner du temps lors de la création des composants, Vuetify permet à Koban de détenir un design system complet, qu’ils peuvent ensuite adapter à leurs couleurs/identité, sans avoir besoin d’une intervention de notre part.
Notre rôle a ainsi pu se limiter au design des composants les plus stratégiques/complexes.

Une fois le travail terminé sur nos deux premiers sprints, nous avons organisé un test utilisateur portant sur les fonctionnalités les plus complexes (ou critiques). Une vingtaine de partenaires ont été invités à répondre à un questionnaire dans lequel ils étaient exposés à des prototypes des futurs écrans du produit. 

Ce test utilisateur nous a ainsi permis de remonter les éléments bloquants auxquels les utilisateurs auraient été exposés. Le test nous a également permis de remonter des points d’optimisation que nous avons pu traiter avant de livrer la version définitive du design.