Étude de cas : Outil d’aide au choix

Résumé

En tant que référente UX au sein de la société BBND : appliquer des méthodes de design d'expérience utilisateur pour concevoir un outil d'aide au choix de produits sportifs. Le système est doté d'une fonctionnalité de filtrage qui se base sur des données techniques et sur les caractéristiques du joueur.

Contenu pour les lecteurs d'écran

Présentation du projet

Aider le joueur de tennis à trouver un cordage adapté à son besoin.

Besoin

Décembre 2019. Un magasin réputé de produits sportifs souhaite développer ses outils digitaux centrés sur les besoins utilisateurs.

Contexte

Des entreprises concurrentes proposent déjà sur leur site des outils d’aide au choix basés sur les préférences utilisateurs.

Objectif

Concevoir et développer un outil d’aide au choix qui propose des produits adaptés au besoin et non aux préférences de l’utilisateur. Réaffirmer la position de la marque en tant que leader de l’innovation pour le sport.

Objectif secondaire

Récolter des données d’utilisation de l’outil d’aide au choix pour évaluer sa pertinence et comprendre ses usages réels.

  • Recherche et empathie
  • Conceptualisation
  • Conception itérative

1. Recherche et empathie

Comprendre les attitudes et besoins des utilisateurs finaux.
  • Quelle typologie de joueur ?
  • Quel rapport avec la marque ?
  • Quelles attentes et besoins ?
Effectuer une recherche secondaire large pour balayer l’écosystème du projet.
  • Analyse des outils concurrents
  • Génération d’hypothèses avec le commanditaire
  • Définition des cibles primaires et secondaires
Résultats clés de la recherche
  • Les joueurs débutants sont moins susceptibles d’utiliser l’outil - les joueurs confirmés et experts effectuant des achats en ligne représentent la cible primaire
  • Le parcours utilisateur doit être le plus simple et le plus court possible
  • Il faut rassurer l’utilisateur à chaque étape

2. Conceptualisation

Les données issues de la recherche nous ont permis de définir un premier scénario d’usage.
  • Quel sera le parcours type ?
  • Quelles solutions pour rassurer et guider l’utilisateur ?
  • Présentation du scénario au commanditaire

En parallèle, une recherche créative est initiée avec un moodboard comme support synthèse

Une partie du “service blueprint” est intégré scénario d’usage.
  • Quelle sera la méthode de calcul pour identifier le produit le mieux adapté ?
  • Quel sera le feedback de l’outil pendant le parcours utilisateur ?
  • Quelles seront les données enregistrées dans la base à l’issue du parcours ?
Itération : scénario d’usage
  • Une fonctionnalité de transmission des résultats par mail jugée peu pertinente est supprimée : l’utilisateur est encouragé à se rendre sur le site marchand
  • L’identification de l’utilisateur est supprimée : la technologie du “cookie” est privilégiée
  • La fonctionnalité d’évaluation de l’outil est simplifiée : 5 étoiles cliquables sont proposées à la fin du parcours, la zone de saisie est supprimée

3. Conception itérative

Les maquettes doivent aboutir rapidement à un prototype pour convaincre le commanditaire.
  • L’application doit limiter la quantité de scroll nécessaire
  • La maquette doit être attrayante visuellement (“user friendly”)
  • Les fonctionnalités avancées de l’outil (visualisation de données doivent être reproduites de façon réaliste)
2 prototypes ont été conçus : une version simpliste et une version html
  • Maquettage puis prototypage à l’aide d’Adobe XD
  • Contrôle du prototype Adobe XD
  • Développement web rapide sur la base du prototype XD
Itération : maquettes
  • Le principe général est validé
  • La fonctionnalité de visualisation de données est supprimée : l’utilisateur n’est pas déconcentré dans sa tâche
  • La taille de l’écran doit être adaptée pour offrir le moins de scroll possible
  • L’application doit être mobile first tout en tirant partie de la taille desktop
Itérations suivantes : Après tests des prototypes auprès d’un panel d’utilisateurs
  • Le système de choix par jauge est jugé complexe : il sera remplacé par des curseurs
  • L’écran divisé affiche trop d’informations en même temps : on mettra les questions en superposition de l’arrière-plan
  • L’application est divisée en 3 étapes mais beaucoup d’informations sont affichées : on ajoutera des étapes pour minimiser le nombre d’informations sur chaque écran

Un design system est conçu, s’inspirant des chartes respectives des commanditaires. Par souci d’inclusivité, le parcours et les images seront personnalisés selon le genre.

Résultat

Le premier outil a été déployé début 2021. Un deuxième outil plus complet a vu le jour sur la base du premier, début 2022. Aujourd’hui, les déploiements des deux outils sont réalisés dans plusieurs pays européens.

Les dernières fonctionnalités facilitent l’internationalisation avec la possibilité d’ajouter une ou plusieurs langues, de régler le système de classement conformément à la nation et de suivre les usages de l’outil par pays.

Lien vers le dernier prototype Adobe XD - s'ouvre dans un nouvel onglet