Un besoin de faire évoluer l’UX/UI des interfaces pour fidéliser sa clientèle et limiter son churn. 

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 en quelques mots : 

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

Client

Durée

5 mois

Nombre de sprints

5

Librairie de composants

Notre approche : prioriser les efforts sur les fonctionnalités à forte valeur ajoutée et définir un design system évolutif, simple à prendre en main et adapté au framework Vue.JS.

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. 

Nos expertises

Direction artistique, UX/UI Designer, Consultant UX et Produit, Data analytics 

Bravo pour cet exercice pas évident de repenser entièrement un programme qui fonctionne déjà à merveille. Maintenant le plus dur pour moi va être l’attente avant sa sortie.. 🙂

Un extrait de témoignage de testeur
01

Déroulé du projet

Définition des objectifs quanti (KPI) et des critères de priorisation

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

02

Définition de la roadmap

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 : 

  • Trafic / Taux d’utilisation de la fonctionnalité 
  • Effort en ergonomie / UX : les plus faibles efforts pouvant être traités par l’équipe interne de Koban
  • Facilité à traiter en dev : Vue.JS étant un nouveau framework à appréhender par l’équipe technique, nous avons préféré commencer par des sprints abordables sans ouvrir tout de suite la boîte de Pandore
  • Taux d’apparition des composants utilisés dans la fonctionnalité 

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.

03

Prise en main de Vuetify 

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

  • Le style guide 
  • Les icônes 
  • Les composants 

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.

04

Les tests utilisateurs

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.

Les outils :

Monday, Figma, Miro, Maze, Google Analytics

Site web :

Un projet à nous présenter ?

D'autres idées de format ou de sujets sur lesquels vous aimeriez être formés ? Parlons-en et construisons ensemble une expérience adaptée à vos besoins !
Contactez-nous
Une conversation est plus simple que 1.000 mots