Inscrire un restaurateur, seul et en ligne
C’est le parcours qui permet à un commerçant de s’affilier seul, en ligne, en une seule fois. Il compte six étapes et c’est la dernière à remplir que personne ne comprenait.
Une inscription en ligne en six étapes
Continuez à faire défiler : le parcours avance avec vous
Un restaurant, une boulangerie, une épicerie acceptent les titres-restaurant et Edenred les rembourse. Encore faut-il qu’ils se soient affiliés, ce qui passait jusque-là par un commercial ou un formulaire papier.
Le projet consistait à leur permettre de le faire seuls, en ligne, en une seule fois. Tout tient, sauf la dernière étape à remplir : chaque boîtier de paiement porte un identifiant, le MID, sans lequel la carte du client est refusée. Mais aucun commerçant ne sait où le trouver.
Le parcours compte six étapes, douze champs et quatre documents à retrouver : un SIRET, un Kbis, un RIB, un ticket de caisse. C’est beaucoup pour quelqu’un qui avance seul.
J’étais product designer sur ce parcours : j’ai préparé et animé les tests utilisateurs, puis conçu les écrans et tous leurs états (UX/UI). J’assume un biais sur le recrutement, les participants étaient des propriétaires-gérants de boulangeries, de restaurants et d’épiceries déjà affiliés Edenred. Les premières sessions ont challengé le parcours entier, les suivantes une seule et même page. Le travail s’est étalé sur environ un an, en parallèle d’autres projets.
- 6sessions de test
- 2pays, France et Pologne
- 1 ande travail, nov. 2023 → 2024
Alléger le parcours, et sortir le MID du chemin critique
Le commerçant traverse six étapes, seul, sur des sujets administratifs. Dans ces conditions, chaque écran en trop devient une occasion d’abandonner.
Le premier test était plutôt encourageant : parcours jugé rapide et facile, design « playful ». Deux choses accrochaient pourtant. Les écrans intermédiaires induisaient en erreur : un participant a patienté plusieurs secondes devant une illustration, croyant que la page chargeait. Et la page d’informations complémentaires, personne ne l’a comprise.
Des tests aux décisions
Deux chemins s’offraient à nous. Garder les écrans intermédiaires, parce qu’ils sont beaux et qu’ils donnent du rythme. Ou bien les supprimer et demander à chaque écran restant de porter davantage.
J’ai proposé de sortir le MID du chemin critique. On peut créer son accès au portail sans lui et le renseigner plus tard. Ça coûte quelque chose : on livre un parcours incomplet. Mais la signature du contrat passait avant et le MID pouvait attendre. Le reste a suivi. On a compressé : les intercalaires fusionnent avec les écrans qu’ils annonçaient, les libellés se resserrent, on demande moins.
Plus un seul écran ne se contente d’annoncer le suivant. La création de compte, par exemple, est passée de deux pages à un seul écran avec trois cases à cocher devenues une seule. Les règles du mot de passe s’annoncent avant la saisie plutôt qu’après l’erreur.
C’est la page contrat qui a le plus bougé. Je l’ai reprise trois fois et à chaque test le vocabulaire s’allège : les frais cessent d’être des lignes techniques, les bénéfices passent devant et l’engagement finit par se dire en une phrase.
Les trois versions de la page contrat
Première version : deux blocs de frais au vocabulaire technique.
Un identifiant que personne ne sait trouver : le MID
Un champ, un acronyme et pas un commerçant capable de dire ce qu’il désigne. Aucun participant ne connaissait le mot « MID ». Une participante a cherché sur Google, en essayant quatre formulations de plus en plus longues, sans jamais trouver la réponse. Elle a poursuivi quand même, mais elle aurait fini par appeler le service client.
« Si vous ne m’aviez pas dit que c’était mon identifiant de terminal, je ne l’aurais pas deviné. »Une participante, test de novembre 2023
Une participante a même quitté le parcours pour aller chercher un ticket dans sa boulangerie, puis est revenue. Or le MID est imprimé sur le ticket de caisse, cet objet qu’ils manipulent cent fois par jour. Restait à les y renvoyer, au lieu d’écrire une explication de plus.
Deux versions s’affrontaient depuis le premier test. Version A : un tutoriel explicite, puis des champs classiques. Version B : un pari skeuomorphique où le ticket de caisse servait lui-même d’interface de saisie. La version A l’a emporté nettement pour des raisons de mise en œuvre plus que de principe.
Deux manières de saisir l’identifiant du terminal de paiement (le MID)
Version A retenue. « C’est chargé, c’est perdu dans le contenu », dit une participante devant la version B. Le skeuomorphisme achoppe sur son exécution : les champs se noient dans le reçu et l’aide passe sous le pli.
J’ai proposé de garder le meilleur des deux versions : la pédagogie explicite de la version A et l’objet familier de la version B. D’abord un carrousel d’amorce en trois temps, qu’on ne peut pas sauter : on annonce ce qu’on va faire, on demande de prendre un ticket de carte bancaire sur son boîtier, puis on montre où lire les identifiants dessus. Ensuite seulement le champ apparaît, avec une aide qui ne quitte plus l’écran. Le carrousel ne commence donc pas par une définition mais par un geste : plutôt que d’expliquer ce qu’est un MID, on envoie le commerçant vers un objet qu’il a déjà en main. L’ordre des écrans d’aide a lui aussi été tranché par le test : le ticket d’abord, le terminal ensuite. Les trois temps sont visibles en haut de page, dans le parcours en mobile.
J’ai repris cette page trois fois avant qu’elle ne tienne. D’une version à l’autre, le texte de l’aide bouge peu ; c’est sa place qui change.
Trois places pour la même aide
La version sortie du test et le point de départ de tout ce qui suit : on lit d’abord, on saisit ensuite.
Toujours visible, jamais consultée : les participants la prenaient pour un élément de décor.
Un carrousel en trois temps qu’on ne peut pas sauter, puis l’aide se fixe à gauche pour la suite du parcours.
- 1On annonce ce qu’on va faire. Un seul bouton, pas de « passer ».
- 2Prenez un ticket de carte bancaire sur votre boîtier.
- 3Voici où les deux identifiants sont imprimés dessus.
- 4Le champ arrive enfin, l’aide ne quitte plus l’écran et chaque terminal ajouté se liste dessous.
L’aide était là depuis le début. Il a fallu trois versions pour qu’on la reconnaisse comme de l’aide.
« Au final, je n’aurais même pas eu besoin du boîtier, c’est même plus simple puisqu’on a les tickets de caisse, que tout le monde a. »Une commerçante, une fois le carrousel montré
Il reste un champ nu, une aide toujours visible et une porte de sortie à chaque impasse. Chaque terminal ajouté se liste ensuite et peut être retiré. L’aide est aussi localisée : un ticket polonais ne ressemble pas à un ticket français et il a fallu réécrire le contenu pour chaque pays plutôt que le traduire.
« Dans notre métier, surtout aux heures de rush, tout doit être coordonné. […] Le délai n’est pas un problème pour nous, ce qu’on veut c’est de la fiabilité. »Un restaurateur, entretien de novembre 2023
Déplacer, pas réécrire
J’ai longtemps cru qu’il fallait mieux écrire le tutoriel du MID. Il s’est mis à fonctionner le jour où je l’ai déplacé.
On a compressé tout le reste du parcours pour qu’un seul moment puisse se payer un carrousel, une aide permanente et des contenus par pays. C’est là que j’ai compris à quoi sert d’alléger.
Le test n’a désigné ni la version A ni la version B. Il a donné les raisons et il a fallu trancher avec.
Il reste des choses que je n’ai pas résolues. Un terminal peut porter deux MID, un classique et un sans contact et le design ne répond pas encore à ce cas. J’ai aussi écarté l’idée d’annoncer le MID dès la landing, faute d’une formulation juste dans tous les pays.
Les chiffres d’effet de ce projet appartiennent à Edenred, je ne les publie pas ici. Ce qui se mesure sur ce parcours, c’est la part d’inscriptions terminées sans appel au service client et l’abandon sur l’étape du MID.