Note : Ce contenu a été créé avant que Fabernovel ne fasse partie du groupe EY, le 5 juillet 2022.

‍

Chez Applidium, nous avons toujours à coeur de proposer la meilleure expérience mobile, et cela passe pour nous par l’intention graphique, le visuel, mais aussi par la navigation et la structuration de l’information. Nous mettons ces convictions au service de nos clients, et quand dans nos vies d’utilisateurs d’applis mobiles (j’ai 151 applis sur mon téléphone) nous sommes face à une expérience qui nous déroute, il nous prend l’envie de repenser cette application à notre façon : nous appelons cela un App MakeOver.

Le Bon Coin, ce service que vous connaissez tous, est un très bon candidat. Nous en avions réalisé un App Make Over il y a quelques temps. Or le Bon Coin vient de sortir une nouvelle version de son application iOS. L’occasion idéale de comparer nos approches: comment aurions nous fait pour opérer cette refonte si elle nous avait été confiée ?

Qui est Le Bon Coin ?

Intéressons nous d’abord au service et à l’identité du Bon Coin. Plateforme de petites annonces, et avec 23 millions de visiteurs uniques par mois, on comprend qu’il soit souvent cité comme une éclatante réussite française. Pourtant Le Bon Coin nous vient de Suède, puisqu’il est né en 2006 comme la déclinaison du site Blocket.se. Son histoire est intéressante à plus d’un titre, car Le Bon Coin connaît des déclinaisons dans de nombreux pays, toujours opérées par des équipes sur place. Cette stratégie cohérente avec l’ADN local du service concilie la force d’un modèle éprouvé avec les spécificités régionales.

Le Bon Coin a été analysé par plusieurs sociologues et historiens qui l’identifient à la foire telle qu’on la connaissait au Moyen-Âge : chaque personne peut déposer dans la rue ses objets et les proposer à la vente, tout se négocie sans intermédiaire. Le Bon Coin recrée un lien social perdu dans nos canaux de vente complexes.

Mais Le Bon Coin est aussi connu pour son graphisme, et son fameux fond jaune clair (qui évitait le scintillement sur les vieux écrans). C’en était presque devenu une blague récurrente : le design du Bon Coin “est moche”, vintage mais rassurant, à l’image de la déco de vos grands-parents, désuet mais pas désagréable. Tout change en février 2016, adieu le fond jaune clair, quelques changements dans les filtres de recherche, mais peu de modifications sur l’application iOS et pas de restructuration réelle de la navigation. Il fallait y remédier.

Quels objectifs pour cette refonte ?

Avant de se lancer à corps perdu dans une refonte, il faut se donner des objectifs. Nous ne connaissons pas ceux du Bon Coin, mais pour nous, les objectifs de cet App MakeOver est de réincarner cet ADN et cette identité très forte du Bon Coin tout en satisfaisant leurs objectifs opérationnels.

Posons nous donc la question, quel est le but du Bon Coin ? Comment se rémunère t il ? Et bien avec des services payants de mise en avant des annonces. Car la place de marché est efficace si elle est très large et en même temps s'il est simple de s’y retrouver : pas facile ! La proposition de valeur du Bon Coin c’est la mise en relation : l'utilisateur doit pouvoir :

1. Trouver la bonne offre
2. Contacter le vendeur (les achats se font hors de la plateforme)

Nous avons donc décidé de mettre l'accent sur la simplicité de recherche et de faciliter la mise en relation entre acheteur et vendeur.

Vous envisagez une refonte de votre application ? Quels sont vos objectifs ?

Navigation

Pour commencer, faisons le diagnostic de l'application iOS avant refonte. A l’ouverture, nous sommes face à une carte, sans explication, et il nous faut choisir notre région. Assez frustrant quand on sait qu’un smartphone possède un GPS.

Une fois cette étape réalisée, vous étiez dirigé vers le menu. En cliquant sur Accueil, on revenait sur cette carte, drôle d’accueil ! Cas assez courant : une section porte un nom qui ne dit rien sur sa fonction, contraignant ainsi l’utilisateur à fouiller et à se rappeler ce que vous avez voulu dire. Or tous les utilisateurs n’ont pas envie de se mettre dans votre peau et de s’adapter à votre manière de penser.

C’est bien l’inverse qu’il faut faire, mettons nous dans la peau de notre utilisateur. Que vient-il faire ici ? Acheter des choses, vendre des choses et gérer son compte et ses annonces : 3 actions principales. Il est très rare que votre application permette de réaliser beaucoup plus que 3 actions majeures, réfléchissez à la façon dont vous la pitchez : au delà de 3 idées fortes, vous rentrez dans le détail.

Dans la version avant refonte, le découpage par section dans le menu n’était pas très clair, par exemple nous n’avions pas su donner un titre à la première. De plus, l’arborescence est modifiée à la connexion : un utilisateur verra ses annonces se déplacer d’une section à l’autre lorsqu’il se connecte. Perturbant, non ?

Avec une navigation comme celle-ci, réaliser l’une des trois actions principales va vraisemblablement amener l’utilisateur à ouvrir plusieurs fois le menu pour passer d’une section à une autre : on rend sa progression plus difficile et discontinue.

Notre préférence va donc à une tab bar : 3 actions, 3 sections, visibles tout de suite et complètement explicites. Chaque titre indique ce qui se cache derrière, de manière immédiate. Le burger menu cachait une liste de titres qui masquaient eux-mêmes des sections derrière des titres peu clairs.

Chaque section de la tab bar a un nom qui exprime clairement sa finalité.

Le Bon Coin a aussi fait ce choix !

avec 4 sections : recherche, rédiger une annonce, mes favoris et mon compte. Hormis les favoris que nous avions choisis de traiter autrement, la tab bar s’est imposée dans nos refontes à tous les deux.

Votre application a un burger menu ? comment organiseriez vous une tab bar ? faites l’exercice.

Géolocalisation de l’utilisateur

Avant et après refonte, à l’ouverture, nous sommes donc toujours face à une carte, sans explication, et il nous faut choisir notre région. Nous avons pris un parti complètement différent : afficher les offres autour de l’utilisateur, sans lui demander son avis !

En faisant ainsi, on satisfait 80% des utilisateurs, ceux qui sont chez eux ou au bureau, en tout cas, près de chez eux et qui veulent acheter près de chez eux. Pour les autres, ils pourront modifier ce paramètre dans la recherche. Nous faisons un choix simple à la place de l'utilisateur, et ce choix va tomber juste dans la majorité des cas, simplifiant l’expérience pour la plupart des utilisateurs.

Pour craquer sur un objet, encore faut-il le voir. Place donc au contenu, avec des images plus grandes et des annonces disponibles dès l’ouverture de l’application. Et oui, notre section “J’achète” est la première que vous verrez à l’ouverture, exit la carte.

Dans votre application, voyez-vous une question que vous pourriez épargner à l’utilisateur ?

Fiche détail

Passons à la fiche détail, et comparons nos deux approches :

• une grande place accordée à l’image, c’est le produit qu’on achète, c'est lui que nous voulons voir, nous sommes d’accord
• la plupart des informations parlent d’elles-mêmes, nous avons remplacé “Prix : 250€” par “250€”, tout aussi clair non ? En traitant l’information pour lui donner une place signifiante, nul besoin de lui adjoindre des explications qui prennent de l’espace inutilement.
• nous mettons tous les deux en avant le contact, après tout c’est le but : contacter le vendeur. De notre part, nous simplifions en laissant le choix du mode de contact (mail ou téléphone) dans un temps secondaire.
• nous avons mis la description en avant : un coup d’oeil à la photo, un coup d’oeil à la description, la prise de contact s’enclenche.
• Le Bon Coin choisit de laisser la possibilité de modifier ou supprimer l’annonce, utile quand c’est la sienne, très déroutant quand on consulte une annonce pour acheter. Nous laissons cela dans l'administration de ses annonces, pas ici. L’écran est simplifié
• nous conservons la Tab bar, pour faciliter la navigation, là où le Bon Coin introduit dans la fiche détail une nouvelle barre d’actions qui ressemble visuellement à une Tab bar mais n’en est pas une (ce sont des actions pas des moyens de naviguer)

Un aparté sur la charte graphique, vous remarquerez que nous avons abandonné le bleu pour privilégier le orange, plus reconnaissable, dans des interfaces plus sobres et plus lisibles.

Recherche

Pour finir, passons à la recherche.

Encore ici l’enjeu a été de simplifier. Nous nous concentrons sur quelques données clés : lieu, catégorie, prix. Nous avons réintroduit la notion de prix dans la recherche, qui est pour le Bon Coin actuellement relégué dans le tri des résultats (trier par date ou par prix). Or quand vous formulez une demande d'achat, le budget ne peut pas être ignoré.

Nous avons conservé ici la fonctionnalité d’enregistrement de la recherche. Elle a été déplacée dans les favoris pour la refonte du Bon Coin.

Nous l’avons déplacée dans la barre de navigation, car elle est moins couramment utilisée : le bouton Valider s’en trouve ainsi mis en valeur : dans l’immense majorité des cas, vous lancerez la recherche avant de la sauvegarder. La disposition des éléments “dit” leur importance et leur fréquence d’utilisation.

Voyez vous des exemples d’éléments dont l’importance en terme de place n’est pas cohérente avec leur importance d’usage dans votre application ?

Conclusion

Le redesign pourrait continuer, mais nous nous arrêterons ici. Quelques éléments clés pour réussir votre refonte graphique :

• définissez vos objectifs et gardez les en tête pendant votre refonte. Nous avons choisi d’encourager la prise de contact et avons repris la fiche détail pour mettre cette action en valeur
• simplifiez ! épargnez à l'utilisateur les actions que vous pouvez faire vous-mêmes. Nous avons choisi de localiser l’utilisateur plutôt que de lui demander de la saisir lui-même. On tombe juste presque à chaque fois.
• structurer l’information est primordial, on se retrouve bien plus vite quand c’est bien rangé. Nous proposons une navigation qui permet en un coup d’oeil de savoir où trouver les informations que l’on recherche.
• la disposition des éléments est signifiante. Nous avons choisi de reprendre l’organisation de la fiche détail et de placer la mise en favoris dans la barre de navigation, pour une visualisation et un accès rapide.