[Use case UX] Refonte de tunnel de souscription 3x CB

Plébiscité par les internautes, le mode de paiement 3x CB prolonge le tunnel d’achat en sollicitant davantage les utilisateurs. Ultime étape du parcours shoppeur, l’interface 3x CB doit être fluide, simple et suffisamment sécurisée pour apparaître comme fiable à ses utilisateurs. Vous l’aurez compris, l’équation d’une refonte réussie n’est pas simple; retour d’expérience sur un projet 100% design thinking.

Evaluer les performances de l’interface à refondre

Analyser l’existant c’est identifier les points noirs de l’interface (éléments problématiques de l’expérience) dans l’optique d’y apporter des solutions. Pour statuer sur les leviers clés d’optimisation, nous avons mis en place des ateliers de tests sous forme de parcours de navigation. Une grille de notation établie sur le modèle d’Eric Reiss est soumise durant l’atelier afin de faire évaluer l’interface par l’utilisateur.

Cette analyse heuristique est construite sur 4 critères clés :

Privacité
Attractivité
Accompagnement
Engagement

A l’aide d’un questionnaire, les utilisateurs (experts et non experts) sont invités à noter ces différents éléments de -3 à +3 et à commenter leur notation. L’importance des critères est modulée grâce à l’attribution d’une pondération pour chaque élément. Les points noirs et les éléments positifs de l’interface sont désormais clairement mis en exergue.

Courbe d’expérience sur le modèle d’Eric ReissL’évaluation heuristique ne peut se suffire à elle seule pour appuyer des convictions et des partis pris ambitieux. Que ce soit les 10 heuristiques de Jakob Nielsen ou les critères ergonomiques de Bastien & Scapin des limites existent et les conclusions de ce type d’atelier doivent alimenter de nouveaux workshops pour être confrontées, bousculées.

Découvrir les utilisateurs du service

Dans quel état d’esprit sont les utilisateurs ? D’où viennent-ils (customer journey) et avec quel device naviguent-ils? Sont-ils chez eux, en mobilité, concentrés (…) ? Le planneur stratégique (Alice si tu lis ces lignes ;-)) s’efforce à construire les personas, à compiler des données clés sur les usages online et à définir précisément des constats permettant d’orienter les équipes UX.

Nous avons donc soumis des questionnaires (online et face à face) nous permettant d’établir un customer journey révélant le « parcours type » d’un utilisateur du 3xCB. Nous croisons les données de notre mapping avec les éléments délivrés pas Google pour valider notre tableau d’interactions.

Les insights formulés par le planning stratégique nous permettent d’ores et déjà d’orienter les workshops à venir :

Un parcours utilisateur majoritairement MOBILE
Des états d’esprit qui oscillent entre joie et flegme selon la position dans le parcours client
Des attentes fortes sur la simplification du tunnel 3X CB
La transparence des coûts engendrés par la souscription
Un récapitulatif clair de l’échéancier mis en place
(…)

The Customer Journey to Online Purchase – Think with Google

Idéation et brainstorming

La phase d’idéation doit nous permettre de générer des idées autour des points noirs identifiés lors de l’évaluation heuristique, de répondre aux insights clés et à la dimension tactile / mobile de l’interface. Nous mettons 3 types d’ateliers en place chez le commanditaire et à l’agence.

Propositions de valeur
« Future workshop » + « Six to One »
Tests utilisateurs sur wireframes

Lors des ateliers chez le commanditaire, la rédaction d’une proposition de valeur permet de clarifier (et bien souvent de faire naître) la raison d’être de l’interface. Décider de manière collégiale des bénéfices utilisateur, s’assurer que l’on construit une interface autour d’une promesse que l’on tiendra ; un workshop clé ! En réponse aux insights remontés par le planning stratégique, les équipes de notre client ont proposé des raisons d’utiliser le service 3X CB sur la base de valeur ajoutée pour l’utilisateur. Cet atelier a nourri des baselines permettant de « vendre » le service autour d’attentes client, l’expérience au cœur du service.

– Phase d’idéation – Future workshop

Le « future workshop » et le « six to one » ont permis de challenger l’actuelle structuration des contenus de page, de révéler des fonctionnalités orientées « usages », d’obtenir des propositions de navigation « in page » dédiées tactile. Riche en idées, ces 2 ateliers ont généré une dizaine de croquis (mobile + desktop) nous permettant d’alimenter la phase de wireframes en se basant sur une méthodologie « lean UX« . Designers graphiques, développeurs, équipes projet chez le commanditaire (…) ont participé à ces workshop sur un mode itératif. Nous retiendrons quelques éléments clés de ces workshops :

Des contenus à structurer (lisibilité, transparence..)
Des zones « Hide/Show » permettant d’épurer la page
L’aide à la complétion des formulaires
Le besoin d’un design interactif (UI) engageant

Workshop « six to one »

La dimension tactile

Personas, interviews utilisateurs, customer journey ont remonté des attentes fortes sur les devices mobiles. Outre l’aspect responsive design de l’interface, l’ergonomie et l’UI seront déterminantes pour apporter l’engagement et la fluidité nécessaire à la souscription (fastidieuse) au service 3x CB.

Inspirés par les excellents ouvrages d’Amélie Boucher (Expérience utilisateur mobile) et de Josh Clark (Design Tactile), nous retenons quelques best practices pour notre tunnel de souscription :

Afficher le libellé au dessus ou à proximité immédiate du champ afin de réduire la charge de travail cognitive.
Les champs de formulaires ne doivent pas contenir de texte, seulement des guides de format.
Suppression des infos bulles au profit d’indications apparaissant on tap dans le champ (aide à la complétion).
Eviter les listes déroulantes quand cela est possible (3 ou 4 choix max) en proposant des boutons radio par exemple (nous limitons les « taps »).
Proposer des pickers / claviers adaptés aux modes de saisie (date de naissance = clavier numérique par exemple).
Renforcer l’affordance afin de montrer à l’utilisateur sans ambiguïté les éléments sur lesquels il peut agir.
Simplifier la gestion des erreurs en proposant une validation en temps réel de la saisie.
Privilégier des call to action en lien avec la navigation dite « de gestes » (75% des gens utilisent leur portable avec le pouce. Source : How Do User Really Hold Mobile Device – Steven Hobber – http://www.uxmatters.com).

Paypal-airbnb-UBER

Le « terrain » comme inspiration, le web design en fin de processus créatif.

Les interfaces de souscription 3x CB sont, dans une grande généralité, décevantes et peu adaptées aux usages utilisateurs. Se rendre sur « le terrain » permet de s’affranchir de benchmark peu concluant mais, surtout, de remonter des attentes faisant naître des fonctionnalités, de générer une approche différenciante en termes de navigation et d’engagement. Comme le rappelait Serena Chen sur UXDESIGN.CC, « For the longest time, I thought my job was to make things look good. And to some degree, it still is. But what I’m really doing, is problem solving with a design-thinking toolkit. »

Retour