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.
Retour
Expertises© Copyright 2024 Agence Limpide
Koban
Comment moderniser son produit avec une approche centrée sur l’utilisateur ?
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
Koban
Durée
5 mois
Nombre de sprints
5
Librairie de composants
Vuetify
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
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.
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 :
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.
Prise en main de Vuetify
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.
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 :
www.koban.cloud.com
Praesens
Construire un univers digital pour Praesens, agence de création de supports de présentation
Agri-PDB
Renforcer la visibilité, attirer de nouvelles banques et centraliser les ressources et actualités
The People
Maintenir et faire évoluer le site The People pour atteindre les objectifs de développement de la marque
beIN REGIE
Valoriser le site de beIN REGIE avec une conception moderne et épurée
ADM Value
Pour diffuser sa nouvelle identité de marque, ADM Value investit dans un nouveau site web
FNADEPA
Moderniser le site multicibles de la FNADEPA & concevoir des espaces personnalisés
Olfeo
Créer un site internet pour accompagner la nouvelle stratégie marketing SAAS d’Olfeo
SpecialChem
Comment incarner le nouveau positionnement de SpecialChem ?
Grospiron Mobility Solutions
Accompagner le plan de transformation digitale de Grospiron Mobility Solutions en concevant son nouveau site web
Bureau Métier
Concevoir un site vitrine et un espace connecté dédié à des professionnels du réseau des missions locales
Un projet à nous présenter ?