Mockup de parcours de création
Mockup de parcours de création
Logo Opteamis
Logo Opteamis

Opteamis

Faciliter la compréhension et la fluidité de la création d'un appel d'offres

DATE

Début de conception Q2 2023

Fin de conception Q3 2023

Méthodes

Analyse ergonomique, Tri de cartes, Userflow, Guerilla test, Prototypage

INTRODUCTION

Opteamis est une plateforme VMS (Vendor Management System) qui met en relation les entreprises et les prestataires de services informatiques. Les clients publient des appels d'offres, contractualisent et gèrent leurs prestations depuis la plateforme, tandis que les ESN et les consultants freelance recherchent leur prochaine mission.

Recruté en tant qu'UX designer en septembre 2021, ma mission était d'assurer la qualité de l'expérience utilisateur. Mon recrutement a permis de fonder le département Produit, au sein duquel j'ai défini les premières bases du design afin de soutenir la stratégie initié par Johan Dhennequin, Head of Product. Au quotidien, nous avons travaillé ensemble pour identifier les problèmes d'utilisation de la plateforme Opteamis.

Recruté en tant qu'UX designer en septembre 2021, ma mission était d'assurer la qualité de l'expérience utilisateur. Mon recrutement a permis de fonder le département Produit, au sein duquel j'ai défini les premières bases du design afin de soutenir la stratégie initiée par Johan Dhennequin, Head of Product. Au quotidien, nous avons travaillé ensemble pour identifier les problèmes d'utilisation de la plateforme Opteamis.

5,98 %

Des prestataires se connectent plusieurs fois par semaine sur la plateforme.

90 %

Des connexions surviennent suite à un mail apporteur d'affaires d'Opteamis.

3 problèmes ont amené à cette situation statistique : l'accès à l'information était frustrant, la prise en main de la plateforme était compliquée et l'utilisation régulière de la plateforme était difficile en raison de problèmes ergonomiques gênant sa compréhension et son utilisabilité.

Par conséquent, nous avons pris la décision de revoir les bases de notre expérience : la refonte de la navigation, de la page d'accueil et des parcours essentiels tels que la création d'appel d'offres.

problématique

Comment introduire de nouveaux parcours guidés sans qu'ils ne paraissent trop longs ou contraignants pour les utilisateurs expérimentés ?
Comment introduire de nouveaux parcours de création guidés sans qu'ils ne paraissent trop longs ou contraignants pour les utilisateurs expérimentés ?

Objectifs

Améliorer la compréhension et la facilité d’utilisation des parcours de création

Réduire le temps passé dans les parcours de création

Donner à l’utilisateur la capacité de quitter et de reprendre son parcours librement

Donner à l’utilisateur la capacité de quitter et de reprendre le parcours librement

Créer une expérience optimisée mais adaptable aux spécificités de nos clients importants avec des besoins spéciaux

Créer une expérience simple mais adaptable aux spécificités de nos clients importants avec des besoins spéciaux

highlights

Concept - Parcours de création
Concept - Parcours de création
Concept - Parcours de création
Concept - Parcours de création
Concept - Parcours de création
Concept - Parcours de création
Concept - Parcours de création
Concept - Parcours de création
Concept - Parcours de création

HIGHLIGHTS

Premier jour à Opteamis
Premier jour à Opteamis
Premier jour à Opteamis
Premier jour à Opteamis

Contexte

Avant ma venue, il n'y avait aucun designer. Les développeurs ont pris l’habitude d’utiliser une solution à portée de main pour développer des fonctionnalités : les modales de Bootstrap. Ils les ont utilisé pour créer tous les parcours, auxquels ils ajoutaient des champs de texte, des barres de recherche, des menus déroulants en fonction du besoin.

Sauf que certains parcours tels que la création d’un appel d’offre comportaient beaucoup d’informations, générant des formulaires très longs à remplir en modale. De plus, l’utilisation d’un jargon technique/métier gênait fortement la compréhension et aucune aide n’était fourni dans la modale en raison du manque de place et de la peur des développeurs de la surcharger.

Sauf que certains parcours comportaient beaucoup d’informations, générant des formulaires très long à remplir en modale. De plus, l’utilisation d’un jargon technique/métier gênait fortement la compréhension et aucune aide n’était fourni dans la modale en raison du manque de place et de la peur des développeurs de la surcharger.

Exemple de modale actuelle : créer une mission

Exemple de modale : création de mission. Plus de 20 champs ou informations sont à remplir.

Exemple de modale actuelle : créer une mission

Exemple de modale : création de mission. Plus de 20 champs ou informations sont à remplir.

Modale actuelle pour la création de mission

Exemple de modale : création de mission. Plus de 20 champs ou informations sont à remplir.

Le challenge

Convaincre les décisionnaires d'intégrer la refonte des parcours dans la roadmap

La majorité de la production était consacrée à la correction de bugs ou à l'ajout d'options supplémentaires. Cependant il n'y avait pas la place pour des projets de refonte même pour des fonctionnalités, des pages ou des parcours étant identifiée comme difficile à utiliser pour les utilisateurs.

Ce projet était l'occasion de faire comprendre au sein d’Opteamis qu’il était nécessaire de refondre les bases de la plateforme (page d’accueil, parcours de créations, de modification…) qui avaient été conçues en 2008.

“L'objectif était de montrer qu’on pouvait régler les problèmes rencontrés par des milliers d’utilisateurs sur la plateforme en se concentrant sur des problèmes de fonds et en appliquant des méthodes centrées utilisateurs.”

Analyse experte

L'interface a été analysée au travers d'une grille d'analyse avec les critères heuristiques de Bastien & Scapin. 37 occurences ont été repérés sur le parcours de création d'un appel d'offres. Les principaux problèmes étaient des problèmes de guidage, de respect des codes & des dénominations ainsi que des erreurs qui menaient à une plus grande charge de travail.

Modale existante : créer une mission
Modale existante : créer une mission
Modale actuelle pour la création de mission.
Modale existante : définir le profil recherché pour une mission
Modale existante : définir le profil recherché pour une mission
Modale actuelle pour définir le profil et les compétences recherché.
Modale existante : sélectionner les prestataires à contacter.
Modale existante : sélectionner les prestataires à contacter.
Modale actuelle pour sélectionner la liste des prestataires à contacter.

Problèmes

Grace à la recherche utilisateur effectuée en janvier 2022 et l'analyse experte, différents problèmes ont été constatés avec le modèle de parcours existant.

Un workflow douloureux

Des impressions de longueur

Aucun moyen de sauvegarder et de reprendre le parcours

Aucune guidance pour les utilisateurs néophytes

Utilisations de mots techniques et confusants

Mauvaise prévention des erreurs

Tri de cartes

focus sur la création d'appel d'offres

Nous avons décidé d'effectuer un tri de carte afin de créer des groupes logiques respectueux du schéma mental des utilisateurs.

Le tri de carte est une méthode qui s’organise normalement en atelier avec des groupes d’utilisateurs. Mais étant donné le caractère particulier de ce projet, il était compliqué de faire valoir auprès des autres directeurs l'importance de requérir l’aide de leurs collaborateurs pour un atelier, puisqu'ils étaient eux-même réticents aux sujets des méthodes centrée utilisateurs. J’ai opéré seul sur le tri de carte et puis les fait valider en individuel auprès de plusieurs utilisateurs.

INFORMATIONS de départ

Informations nécessaire pour la création d'un appel d'offres, avant le tri de cartes.
Informations nécessaire pour la création d'un appel d'offres, avant le tri de cartes.
Informations avant l'atelier de Tri de cartes

résultats

Résultats de l'atelier : les informations ont été triées
Résultats de l'atelier : les informations ont été triées
Résultats de l'atelier : les informations ont été triées

Userflow

étape 1

Définir des grandes étapes thématiques

Ces étapes doivent chacune répondre à une question simple telle que “Quoi” ou “Comment”. De plus, la façon dont les étapes s’enchaînent doit convenir au modèle mental de nos utilisateurs.

Repenser le parcours en étapes thématiques du point de vue de l'utilisateur.
Repenser le parcours en étapes thématiques du point de vue de l'utilisateur.
Repenser le parcours en étapes thématiques du point de vue de l'utilisateur.

étape 2

Placer les groupes d’informations

Dans chaque étape, on a listé les groupes d’informations définis lors du tri de cartes. Cela nous a assuré que les informations étaient pertinentes et placées logiquement dans le parcours.

Répartir les informations à chaque étape.
Répartir les informations à chaque étape.
Répartir les informations à chaque étape.
Répartir les informations à chaque étape.

étape 3

Structurer le parcours

Nous avons précisé toutes les interactions attendues et les cas qui peuvent se présenter. Cela a nécessité de classifier les actions obligatoires et les actions facultatives ainsi que de spécifier les moments de choix donnés à l’utilisateur et leurs conséquences sur le parcours. Nous avons également ajouté les conditions techniques (exemple : les rôles utilisateurs) qui peuvent avoir un impact dans le parcours de l'utilisateur et qui sont nécessaires aux développeurs dans le cadre du DDD (Domain Driven Design).

Schémation globale du parcours pour créer un appel d'offres
Schémation globale du parcours pour créer un appel d'offres
Schémation globale du parcours pour créer un appel d'offres
Schémation globale du parcours pour créer un appel d'offres

Prototypage

J’ai privilégié les pages pleines pour avoir plus d'espace exploitable et pour diviser les parcours avec des étapes plus courtes. Le principe : que l'utilisateur puisse valider ses changements au fur et à mesure tout en étant guidé du début jusqu’à la fin de sa création. De plus, ce fonctionnement aiderait à rendre le temps de parcours moins longs en perception pour l'utilisateur.

J’ai privilégié les pages pleines pour avoir plus d'espace exploitable et pour diviser les parcours avec des étapes plus courtes. Le principe : que l'utilisateur puisse valider ses changements au fur et à mesure tout en étant guidé du début jusqu’à la fin de sa création. De plus, ce fonctionnement aiderait à rendre le temps de parcours moins longs en perception pour l'utilisateur.

J’ai privilégié les pages pleines pour avoir plus d'espace exploitable et pour diviser les parcours avec des étapes plus courtes. Le principe : que l'utilisateur puisse valider ses changements au fur et à mesure tout en étant guidé du début jusqu’à la fin de sa création. De plus, ce fonctionnement aiderait à rendre le temps de parcours moins longs en perception pour l'utilisateur.

Brouillon 1
Brouillon 1
Brouillon 1
Brouillon 1
Brouillon 2
Brouillon 2
Brouillon 2
Brouillon 2
Brouillon 3
Brouillon 3
Brouillon 3
Brouillon 3
Brouillon 4
Brouillon 4
Brouillon 4
Brouillon 4

Concepts

Permettre à l'utilisateur de choisir son parcours dès le début

Permettre à l'utilisateur de choisir son parcours au début

Auparavant, le choix de créer un appel d'offre en "Assistance technique" ou "Forfait" arrivait trop tard dans le processus de création . Il n'était jamais vu ou alors trop tard, ce qui forçait l'utilisateur à sélectionner la bonne option et à tout refaire. Dans cette première modale, on donne un choix simple et expliqué afin que l'utilisateur soit redirigé vers le parcours souhaité.

Concept - Choix de parcours
Concept - Choix de parcours
Concept - Parcours de création

Mettre en place un nouveau niveau de navigation lors de la création

Nous avons standardisé un nouveau niveau qui s'affiche lors d'un parcours en plusieurs étapes. Il s'agit d'une barre fixe au scroll à laquelle nous avons intégré le progrès effectué au sein du parcours ainsi que tout les choix de navigations qui y sont lié. Par exemple : "Annuler", "Précédent" ou encore "Suivant".

Concept - Navigation contextuelle avec étapes
Concept - Navigation contextuelle avec étapes
Concept - Parcours de création

Offrir des éléments visuels de guidage pour aiguiller l'utilisateur

Grâce à la place gagnée en utilisant des pages pleines, nous avons inséré des illustrations, des textes et des blocs pour aider l'utilisateur à comprendre son contexte, notamment dans le cas où il est perdu.

Concept - Guidage
Concept - Guidage
Concept - Parcours de création

Soulager la mémoire de travail grâce à un récapitulatif toujours visible

En concordance avec la Loi de Miller, une personne garde en mémoire un nombre d'informations limité dans leur mémoire à court-terme. Nous avons créé un récapitulatif à chaque étape, afin d'économiser la charge mentale de l'utilisateur et le rassurer que son travail a bien été pris en compte.

Concept - Récapitulatif
Concept - Récapitulatif
Concept - Parcours de création

Test guerilla

Nous avons initié des test guerilla avec 4 utilisateurs (profil de commerciaux en interne à Opteamis) afin d'identifier rapidement les potentiels problèmes d’utilisabilité, de wording et confirmer la logique du parcours.

De plus, cela nous a aidé à démontrer aux décisionnaires comment se passe l'évaluation d'une solution lorsqu'on travaille l'expérience utilisateur d'un produit numérique.

MOdalité

1.

Présentation

->

2.

Test utilisateur

->

3

Interview post-test

Quelques exemples de questions

"Y'a t-il des informations manquantes ?"

"Y'a t'il des termes qui semblent compliqué à comprendre ?"

"Utilises-tu majoritairement une durée de mission ou des dates de début et fin spécifiques ?"

"Le parcours te semble t-il plus long ou plus court ?"

"De 1 à 5, quelle note mettrais-tu à ce nouveau parcours ?"

Résultats

Les utilisateurs testés ont été surpris de la différence avec l’actuel. Ils ont expliqué que le parcours actuel leur semblait compliqué et désuet en comparaison.

Des résultats très satisfaisant

Les utilisateurs testés ont été surpris de la différence avec l’actuel. Ils ont expliqué que le parcours actuel leur semblait compliqué et désuet en comparaison.

“C’est rapide et rien n’est manquant.”

— Utilisateur anonyme, Account manager

“C’est logique, c’est efficace. Dans le futur, on pourrait imaginer d’autres paramètres dans la création d’appel d’offres.”

— Utilisateur anonyme, Account manager

“Si jamais on pouvait créer aussi rapidement et facilement une appel d'offre, cela pourrait nous aider à être plus rapidement sur du sourcing et la conclusion du deal.”

— Utilisateur anonyme, Global Account manager

ItérationS

Rendre visible l'anonymisation des données

Les utilisateurs avaient peur que le taux journalier Opteamis soit visible du client. Il fallait trouver une solution claire pour qu’ils n’aient plus de doutes car la peur de divulguer une information critique au client pouvait les empêcher de créer leur appel d’offre. Nous avons donc créée un libellé spécial “visible seulement de vous” pour éviter toute confusion.

Concept - Visibilité des données
Concept - Visibilité des données

Aider les commerciaux à visualiser et calculer facilement leur marge

Les commerciaux ont souvent besoin de caculer et d’optimiser leur marge. Ils ne doivent ni acheter trop cher les services d’un consultants, ni proposer un taux journalier trop faible sous peine de ne pas trouver le profil. C’est pour cela qu’on a créée un affichage visuel qui les aident à piloter efficacement leur marge.

Concept - Calculateur de marge
Concept - Calculateur de marge
Concept - Calculateur de marge

Résultat

Le projet a été couronné de succès. Après présentation aux décisionnaires, le produit et la technique ont décidé d'intégrer la refonte des pages clés et des parcours dans la roadmap 2024-2025. De plus, il a été conclu que le parcours de création d'appel d'offres devra servir de base pour toutes les expériences de créations comme la création d'un compte, d'une mission ou d'un consultant.

Leçons

Toutes les parties prenantes ont tendance à se mettre à la place du designer

J’ai souvent entendu des retours similaires : “C’est trop long, on devrait raccourcir !” ou encore “Les utilisateurs ne vont pas vouloir d’un parcours à 6 étapes” Le fait d’entendre ce type de retours pourrait nous questionner à raccourcir le parcours. Mais en vérité, les utilisateurs ayant testé le prototype ont indiqué que le parcours était rapide et fluide. La raison de ces contradictions : les parties prenantes ont tendance à emprunter le rôle du designer dans la critique de l’interface.

Il est dangereux, de se fier uniquement à des déclaration (même d’un client) pour concevoir. Ces déclarations doivent, par contre, servir d’indices pour se questionner sur la pertinence d’une interface et des choix opérés. Si on y fait pas attention alors les parties prenantes peuvent dégrader la qualité d’une expérience ou alors influencer sur les décisions du projet.

“Ce projet m'a affirmé que la perception des uns n'est pas systématiquement corrélé à la réalité des autres. ”

Chaque utilisateur n’est pas toujours forcément intéressé et impliqué

Le niveau d’implication des parties prenantes du projet est systématiquement différent. Il y’aura toujours des réfractaires, des sponsors ainsi que des personne neutres. Très souvent en atelier, il peut être compliqué d’amener les utilisateurs réfractaires au changement (ou remettant en doute l’importance des méthodes du produit) à venir participer aux ateliers. Une fois en atelier, il faut également arriver à les engager. De même, il faut savoir encourager les utilisateurs sponsors pour qu’il puisse tirer vers le haut le reste du groupe. Mais attention, il y’a un risque à se faire piéger par le biais de confirmation à n’écouter que ces derniers car il s’agit souvent utilisateurs “plus agréable” puisqu’ils vont avoir tendance à confirmer nos dires ou nos créations.

“Il faut garder la tête froide et réussir a faire collaborer les utilisateurs afin de récupérer un maximum d’informations jusqu’à en deviner les insights.”

“Il faut garder la tête froide peu importe les difficultés pour réussir a faire collaborer les utilisateurs.”

Soulager la mémoire de travail grâce à un récapitulatif toujours visible

En concordance avec la Loi de Miller, une personne garde en mémoire un nombre d'informations limité dans leur mémoire à court-terme. Nous avons créé un récapitulatif à chaque étape, afin d'économiser la charge mentale de l'utilisateur et le rassurer que son travail a bien été pris en compte.

Concept - Calculateur de marge
Concept - Calculateur de marge

parcours analysé : création d'appel d'offres