En 2019, j'ai été approché par l'entreprise BBCM (organisateur d'événements B2B) pour revoir le design d'interface et d'expérience utilisateur (UI/UX) de BBCMeet, leur plateforme de rendez-vous d'affaires, développée par Tanguy Colins (agence ABSOLUM).
Processus métier
Le processus d'inscription aux rendez-vous d'affaires se fait en plusieurs temps :
- L'utilisateur s'inscrit à l'événement et saisit les informations de son entreprise.
- Dans un second temps, il renseigne ses disponibilités pour les RDV, les entreprises qu'il souhaiterait rencontrer, ainsi que sa participation aux conférences et ateliers.
- Quelques temps après, la plateforme lui propose un planning optimisé pour sa venue.
La plateforme BBCMeet lui donne accès progressivement aux différentes étapes constituant ce processus et l'utilisateur doit revenir sur son espace à plusieurs reprises sur une période assez longue.
Objectifs
À l'issue d'un travail d'audit approfondi de la plateforme existante, j'ai pu définir des recommandations à suivre pour la refonte de l'interface client de la plateforme. Les objectifs s'articulaient autour des axes suivants :
- Simplifier l'inscription des utilisateurs, alléger les processus en découpant les étapes en plusieurs écrans.
- Créer une expérience cohérente en développant un langage commun : bibliothèque de composants, icônes, structure de page.
- Améliorer l'ergonomie de la plateforme, en particulier sur mobile
- Concevoir une expérience modulable pour autoriser plus ou moins de détail en fonction des événements gérés par la plateforme.
- Faciliter la personnalisation graphique de l'interface pour suivre le branding des événements accompagnés par BBCM en marque blanche.
Approche
Architecture d'information
La structure des pages a été revue pour refléter au mieux les étapes du processus d'inscription dans le temps.
L'écran récapitulatif de fin de parcours fusionne avec la page d'accueil de l'espace personnel, pour devenir un tableau de bord modulable permettant à l'utilisateur de suivre son avancement dans le processus et d'atteindre directement les pages nécessitant son intervention.
Les différentes étapes sont ainsi présentées sous forme de modules, constitués d'une page récapitulative des informations fournies et de sous-pages de saisie, découpées pour alléger la quantité d'informations demandées dans les formulaires.
Wireframes
Le cœur du travail de design d'UX s'est situé à l'étape des wireframes : ces maquettes "basse définition" ont permis de concevoir les parcours utilisateur. Elle a permis de concrétiser les recommandations en plaçant les différents éléments sur les pages, tout en négligeant le style pour se focaliser sur les usages et tester tous les cas possibles.
J'ai ainsi réalisé tous les nouveaux écrans de la plateforme sous forme de wireframes mobile et desktop, pour en valider les usages avec les collaborateurs BBCM, au contact des utilisateurs finaux.
Ce travail itératif a permis à l'équipe de se projeter dans la nouvelle interface et d'affiner les grands principes de la navigation grâce à un prototype interactif réalisé à partir des wireframes.
Cette étape a permis de revoir certains aspects des formulaires à la présentation rigide et lourde, freinant l'engagement des utilisateurs. Par exemple, l'organisation de RDV d'affaires nécessite de structurer de manière détaillée les informations sur les entreprises participantes. Ces renseignements sont fournis notamment par la sélection de thématiques dans de longues listes de choix, organisées sur plusieurs niveaux. Il a donc fallu trouver une approche plus "digeste" pour les utilisateurs (en particulier sur mobile) tout en autorisant le même degré de détail.
Intégration & développement front
Une fois les parcours utilisateurs validés côté métier et les concepts de l'interface définis, l'intégration HTML s'est enchaînée de manière très fluide.
J'ai construit la bibliothèque d'éléments d'interface à partir d'une configuration personnalisée de Bootstrap et en créant un certain nombre de composants spécifiquement pour la plateforme.
L'intégralité des mises en pages et des composants d'interface a été développée en commençant par le rendu sur mobile puis en ajustant les tailles et dispositions pour les écrans plus larges.
Les pages livrées ont été conçues avec un langage de templating (Pug) afin de fournir à l'équipe technique la logique de création des composants générés de manière dynamique, en complément du rendu HTML final.
Le style a été créé en Sass, permettant selon les usages de générer des feuilles de style CSS personnalisées suivant le branding des événements.
Résultat
La nouvelle interface a été intégrée par Tanguy Colins et est en production pour accompagner de nombreux événements depuis 2020. Cette refonte a permis à BBCM de moderniser leur produit en s'adaptant aux usages contemporains et leur a donné de nouveaux arguments de vente pour la distribution de leur offre de matchmaking de RDV d'affaires.
