Damien COUALAN, UX / UI designer

Retour aux projets

Ootravaux

Client :

Équipe produit de ootravaux

Rôle :

UX/UI Designer

Projet :

Évolution UX et redesign UI

Ootravaux est une plateforme web qui facilite la mise en relation entre particuliers et artisans du bâtiment, partout en France. Pensée comme un accompagnateur de confiance pour les travaux du quotidien, elle permet aux utilisateurs de décrire leur projet, comparer des devis, et recevoir rapidement jusqu’à 3 propositions d’artisans qualifiés.

ootravaux.fr

Le défi

"Nous constatons une perte significative d’utilisateurs à certaines étapes de nos formulaires de demande de devis. Notre objectif est de rassurer, d’améliorer le taux de conversion et de moderniser notre image."

— Équipe produit de ootravaux —

Recherche et planifications

Le point de départ le plus simple a été de réaliser une analyse heuristique complète, en m’appuyant sur les 8 heuristiques de Bastien & Scapin.

Cela m’a permis d’évaluer la compatibilité de l’interface avec les bonnes pratiques UX et de mettre en évidence plusieurs points de friction :

Absence d’anticipation des contraintes de saisie.
Bandeau de réassurance trop encombrant une fois déplié, nuisant à la lisibilité et à la navigation.
Manque d’affordance sur le logo.

J’ai ensuite conduit une analyse concurrentielle via un benchmark ciblant des services similaires. Ce travail a montré que les acteurs les plus performants adoptent un parcours progressif, renforçant la confiance à chaque étape à l’aide de labels, de messages explicatifs ou d’éléments visuels rassurants.

En parallèle, nous avons mis à jour les personas d’Ootravaux à partir d’une série d’entretiens utilisateurs, afin d’ancrer les besoins réels du public cible.

Ces informations m’ont permis de mieux comprendre :

Les attentes concrètes lors de la saisie d’une demande.
Les craintes majeures : démarchage excessif, manque de clarté sur l’usage des données.
L’importance cruciale de la notoriété et de l’image de marque pour encourager l’engagement.
Le manque de profondeur du formulaire actuel, jugé trop court, limite l’engagement des utilisateurs.

Certaines questions ont émergé : quels appareils privilégient-ils (mobile, desktop, tablette) ? Quelles recherches effectuent-ils le plus pour définir leurs besoins ? Nous les avons également interrogés sur leurs critères pour cibler un professionnel, ainsi que sur les motivations et les frustrations qui influencent leur recherche.

De cette analyse, plusieurs points clés sont ressortis :

Trop peu d’étapes.
Ergonomie perfectible, avec un enchaînement peu fluide.
Manque de compréhension de certaines questions.
Réassurance insuffisante pour inciter à donner des informations personnelles.
Perception négative sur la pertinence et le nombre de questions posées.

Interface existante

Étape 1 - L'utilisateur sélectionne sa demande (nature de son besoin) puis la prestation souhaitée / description de son projet et enfin son adresse mail.

Étape 2 - L'utilisateur renseigne son code postal.

Étape 3 - L'utilisateur renseigne ses coordonnées Nom, Prénom et Numéro de téléphone et accepte les CGU.

Étape 4 - Affichage du récapitulatif.

Après la synthèse des données issues de mon enquête, plusieurs tendances se sont dégagées.

Concevoir un parcours en plusieurs étapes, afin de proposer un devis plus personnalisé. J’ai également identifié l’importance d’intégrer des questions plus immersives, avec la possibilité d’ajouter des photos ou vidéos. Cela donnerait à l’utilisateur une nouvelle manière d’exprimer son besoin, surtout lorsqu’il a du mal à le formuler par écrit.

Par ailleurs, l’utilisation du design émotionnel, incarné par “Juliette”, permettrait d’apporter un véritable accompagnement et un sentiment de réassurance tout au long du parcours.

Cependant, certaines contraintes techniques liées aux technologies utilisées, mais aussi des contraintes budgétaires, n’ont pas permis d’aller aussi loin que souhaité sur certaines fonctionnalités plus ambitieuses.J’ai donc dû recentrer ma réflexion sur les fonctionnalités clés et réalistes à mettre en place, tout en identifiant celles qui pourraient réellement permettre à Ootravaux de se différencier de ses concurrents.

Ces orientations devaient permettre à Ootravaux de se différencier de ses concurrents, en devenant la plateforme de référence pour trouver un artisan de confiance dans sa zone géographique.

À ce stade du processus de conception, l’équipe Produit m’a transmis plusieurs pistes qu’elle souhaitait explorer. J’ai donc analysé l’intérêt de chacune d’entre elles, ainsi que leur contribution aux objectifs stratégiques d’Ootravaux.

Pistes explorées

Structure et navigation du formulaire
Réassurance et accompagnement
UI et design

Concevoir la solution

Suite à mes recherches, j’ai émis l’hypothèse que l’amélioration du parcours de réassurance permettrait d’augmenter le taux de conversion.Un parcours plus détaillé, structuré en davantage d’étapes, réduirait le taux d’abandon en dernière étape et favoriserait la collecte d’adresses e-mail.

L’effet "Pages Jaunes" joue également un rôle important : perçu comme une référence légitime, le service incite naturellement les utilisateurs à transmettre leur adresse e-mail et leurs informations personnelles.

En revanche, une déception liée au faible nombre de questions a été observée : les utilisateurs peuvent percevoir le formulaire comme peu sérieux ou insuffisamment engageant.

Exploration des premiers concepts

J’ai commencé par restructurer les blocs d’information que nous souhaitions absolument mettre en avant, sans encombrer l’utilisateur et en limitant le nombre de clics.

L’idée s’est alors imposée : concevoir un bandeau latéral, pensé comme un module d’accompagnement dynamique, permettant d’afficher des informations pertinentes en fonction de l’étape du formulaire et de guider l’utilisateur tout au long de son parcours.

Étape 1 - Présentation des étapes et des détails associés dans le bandeau informationnel. Le contenu principal occupe davantage d’espace, grâce à une restructuration des questions et à l’ajout de choix plus clairs.

Étape 2 - Intégration d’un bloc de réassurance affichant des avis utilisateurs, des notations et d’autres éléments de confiance.

Étape 3 - Concentration des informations clés dans une vue détaillée, avec des blocs de réassurance placés dans le panneau latéral.

Étape 4 - Possibilité offerte à l’utilisateur de modifier librement chaque section déjà remplie, afin de renforcer le sentiment de contrôle et de flexibilité.

Retours et itérations

Après avoir partagé ces premiers concepts avec l’équipe et recueilli des retours utilisateurs, plusieurs enseignements ont guidé les ajustements :

Lisibilité et hiérarchisation : il est apparu nécessaire d’exploiter davantage le bandeau latéral en le positionnant comme un véritable élément de réassurance. Les informations devaient être hiérarchisées et présentées de manière progressive afin de ne pas surcharger l’utilisateur.
Réassurance : les avis et notations d’artisans ont été jugés particulièrement pertinents. Leur mise en avant a été renforcée pour instaurer davantage de confiance tout au long du parcours.

Ces itérations ont permis de construire un parcours plus fluide, rassurant et transparent, tout en restant aligné sur les besoins réels des utilisateurs.

Wireframes avancés

Suite aux retours utilisateurs et aux contraintes identifiées avec l’équipe Produit et Développement, j’ai produit une série de wireframes avancés afin de concrétiser les choix retenus et d’affiner l’expérience utilisateur.

Étape 1 - Dans le panneau de configuration, sous l’intitulé “Comment ça marche ?”, les 4 étapes sont présentées sous forme de toggles, chaque bloc se dépliant automatiquement à l’étape correspondante.Le contenu principal a été restructuré en éléments de sélection, et l’ensemble se déroule sous un scroll vertical.

Étape 2

Étape 3

Étape 4

De la structuration au prototypage

Après avoir finalisé la structuration des contenus et apporté quelques modifications aux wireframes, l’étape suivante a consisté à donner vie à ces concepts à travers le prototypage.

Ce prototype a servi de support central pour recueillir des retours concrets de la part des utilisateurs et de l’équipe Produit, permettant d’identifier les derniers ajustements avant d’entamer la phase de développement.

Étape 1 - Dans le panneau de configuration, sous l’intitulé “Comment ça marche ?”, les 4 étapes s’affichent dynamiquement en fonction de l’avancement de l’utilisateur. À chaque sélection d’option, le formulaire fait défiler automatiquement la question suivante, de manière fluide et progressive, réduisant ainsi les clics et la surcharge cognitive. L’utilisateur avance question par question, jusqu’au CTA final”Suivant” en bleu, qui permet de passer à l’étape suivante du processus.

Étape 2

Étape 3

Étape 4 - La possibilité de revenir sur une étape précédente ou de modifier une section déjà remplie a été très bien accueillie. Cette fonctionnalité a d’abord été identifiée comme un point fort du parcours. Cependant, les contraintes techniques et la capacité limitée des équipes de développement n’ont pas permis une refonte complète de l’interface. Il a donc été décidé de conserver une version simplifiée, centrée sur des modifications de base.

Conclusion

Le projet a été ralenti en raison des vacances de fin d’année/d’été, ce qui ne m’a malheureusement pas permis de transmettre le dossier à l’équipe technique pour lancer la phase de développement.

Avec du recul, je pense que j’aurais pu convaincre notre client (l’équipe Produit) d’accorder davantage d’importance à l’augmentation du nombre d’étapes du formulaire, plutôt que de se limiter aux quatre prévues initialement. De même, une mise en avant plus poussée de Juliette aurait permis d’exploiter pleinement cette approche de design émotionnel.

Néanmoins, lors de certaines présentations, j’ai pu formuler plusieurs recommandations utiles, visant à résoudre des problématiques techniques identifiées et à proposer la réalisation de recherches UX plus approfondies dans les prochaines étapes du projet.

Figma

Hotjar

UserTesting