Refonte de PagesJaunes pour 22 millions d’utilisateurs

Deux ans à moderniser l’app PagesJaunes, installée plus de 22 millions de fois. Accueil, moteur de recherche, onboarding, cartes et feuille de route du design system sur iOS, Android, le web et Android Wear, comme Product Designer puis responsable de l’équipe UI.

Rôle: Product Designer → UI Team Lead
Périmètre: Apps mobiles, web, design system
Entreprise: PagesJaunes (Solocal)

Voir la galerie

« Victor est passionné par l’UX et se tient constamment à jour des dernières tendances et méthodes. C’est un designer très compétent, capable de faire le travail de terrain mais aussi de prendre du recul pour conseiller sur les aspects plus stratégiques d’une interface ou du projet dans son ensemble. Hautement recommandé dans une équipe UX ou produit. »

Simon WhiteDirecteur UX chez PagesJaunes

Synthèse

Contexte: PagesJaunes touchait plus de 15 millions de visiteurs par mois mais restait pensé comme un annuaire web. Les apps mobiles comptaient des millions de téléchargements, avec une expérience lourde. Le produit devait passer de fiches statiques à une expérience fluide, personnelle et pensée d’abord pour le mobile, sans casser ce qui fonctionnait pour les utilisateurs existants.
Mon rôle: J’ai rejoint l’équipe comme Product Designer sur le web, les partenariats (TheFork, Renault R-Link) et les parcours de connexion. Je suis ensuite devenu responsable de l’équipe UI : coordination de 4 designers, pilotage de la refonte mobile et points hebdomadaires avec les développeurs iOS et Android.
Réalisations et livrables: Refonte de la page d’accueil
Une accroche conversationnelle et une barre de recherche unique remplacent les deux champs de l’annuaire.
Onboarding natif
Animations courtes et non bloquantes au premier lancement : CAAnimation sur iOS, transitions Material Design sur Android.
Cartes et itinéraire piéton
Itinéraires piétons sur l’API Mappy, avec relais vers Waze, Google Maps et Plans.
Mon PagesJaunes
Favoris, historique et contributions repensés pour soutenir la rétention.
App Android Wear
Conçue en duo avec un développeur Android, du concept à Google Play en deux mois.
Stratégie du design system
Audit des apps iOS, Android et web, et feuille de route des composants Yellowstrap.

15M+
visiteurs mensuels: 300K
utilisateurs par jour au pic d’usage: 4
designers encadrés comme responsable de l’équipe UI

Enjeu et objectifs

Enjeu

Le moteur de recherche porte le modèle économique : près de 500 M€ de revenus annuels dépendent du classement et de la visibilité des professionnels. Toucher à la recherche, c’était toucher aux revenus. Dans le même temps, des millions d’utilisateurs avaient des habitudes installées, notamment les deux champs « Qui » et « Où ». Il fallait moderniser le produit sans les désorienter.

Objectifs

Quatre objectifs ont ordonné la refonte : une page d’accueil guidée par l’intention, un onboarding natif sur iOS et Android, une navigation piétonne sur l’API Mappy, et un audit du design system avec sa feuille de route, Yellowstrap. Un cinquième chantier soutenait la rétention : Mon PagesJaunes, avec les favoris, l’historique et les contributions.

Deux équipes, un périmètre

L’équipe UX centrale définit la stratégie design multi-plateforme et la direction visuelle, là où j’ai commencé comme Product Designer. Une équipe dédiée, que j’ai fini par diriger, portait la refonte de l’accueil, l’intégration de Material Design, le compte utilisateur, les favoris et l’historique.

Approche de conception

Accueil : de deux champs à une conversation

L’ancienne page d’accueil montrait deux champs, « Qui » et « Où ». Elle fonctionnait, mais paraissait froide. Une accroche conversationnelle, « Bonjour, de quoi avez-vous besoin ? », et une barre de recherche unique les remplacent, avec un même langage d’onglets sur iOS et Android. Les photos de fond montrent des professionnels locaux, le boulanger, le garagiste, le fleuriste, selon la catégorie cherchée. Des règles de direction artistique, définies avec le marketing, cadrent et étalonnent chaque photo pour mettre l’expertise du professionnel au premier plan.

Accueil Android, Material Design aux couleurs de PagesJaunes

Direction artistique, avant : photo brute

Direction artistique, après : cadrage et étalonnage

Recherche : garder le modèle, changer les transitions

Le modèle « Quoi + Où » est resté en place. Il organise la recherche autour de deux questions, quel professionnel et où, et il préserve le classement qui monétise chaque requête. Le changement porte sur les transitions : la barre de recherche s’étend en résultats plein écran, avec les animations d’éléments partagés de Material Design, ce qui conserve le contexte et réduit la latence perçue. Le prototype est devenu la version livrée sur Google Play.

De la requête à la fiche en trois appuis

Prototype du moteur de recherche

Cartes : de la recherche à la destination

Trouver un professionnel est la moitié du travail, il faut encore s’y rendre. Les itinéraires piétons reposent sur l’API Mappy, avec un aperçu du trajet et un guidage pas à pas, une optimisation réseau pour les connexions 3G et un relais vers Waze, Google Maps ou Plans pour la voiture. Sur la carte, les info-bulles des stations regroupent les lignes qui les desservent. Sur iPad, une vue scindée native place la carte à côté des indications, avec la prise en charge de Dynamic Type et de VoiceOver.

Un trajet, trois modes : marche, voiture, transports

iPhone : feuille de route, aperçu de la carte, détail des transports

iPad : la carte à gauche, les indications à droite

Info-bulles des stations et composants de transport, construits à partir des données Mappy

Mon PagesJaunes : une raison de revenir

L’espace fidélité était fragmenté et sous-utilisé. Nous l’avons reconstruit autour de quatre zones : les favoris pour garder ses professionnels préférés, l’historique pour retrouver les recherches récentes, les contributions avec photos et avis, et un compte plus simple à créer et à ouvrir. La connexion sociale réduit la friction de 60 %, et la connexion par e-mail et mot de passe reste disponible. Chaque professionnel enregistré est une raison de revenir.

Livrables

Onboarding natif

Une version majeure obligeait à faire découvrir les nouveautés sans bloquer l’utilisateur. Animations courtes et non bloquantes au premier lancement : CAAnimation sur iOS, transitions Material Design sur Android, avec des spécifications de mouvement validées avec les développeurs et des itérations testées dans notre laboratoire UX à Paris. Les objectifs : moins de demandes au support sur la navigation, une meilleure découverte des favoris et des cartes, une meilleure rétention la première semaine.

Animation d’onboarding iOS

Animation d’onboarding Android

Micro-interactions

Spécifications de mouvement livrées aux équipes de développement. Ces animations sont passées en production sur iOS et Android.

Animation des favoris

Historique et invitation à ajouter une photo

Édition d’avis sur ordinateur

L’interface web de rédaction d’un avis propose des notes multicritères par étoiles, des champs pour et contre et une mise en forme enrichie. Elle s’adapte de l’ordinateur à la tablette.

Stratégie du design system

Les équipes concevaient désormais une même fonctionnalité sur plusieurs systèmes, et des questions apparaissaient entre métiers et entre équipes : quelle est la dernière version des maquettes, quels livrables intégrer. J’ai mené le premier audit des écrans iOS, Android et web, avec des entretiens auprès de designers et de développeurs de plusieurs équipes. J’ai ensuite livré la feuille de route des composants Yellowstrap : conventions de nommage, usage des couleurs, styles des boutons d’appel à l’action et indicateurs de statut. Les outils d’alors étaient Zeplin, des kits PDF et Sketch. Mon rôle couvrait la stratégie et les besoins. Je n’ai pas construit la bibliothèque moi-même.

PagesJaunes à votre poignetLire l’étude de cas

Voir tous les visuels

Résultats et apprentissages

Résultats

Téléchargements : installations cumulées: 22M+
App Store : contre 4,2 auparavant: 4,5★

Ces chiffres sont ceux du produit, construit par toute l’équipe.

Ce que j’ai appris

Ne pas casser les habitudes. 22 millions d’utilisateurs ont des automatismes. Les changements radicaux les désorientent. Des améliorations petites et claires fonctionnent mieux.
Un outil utilitaire exige de la vitesse. Les gens cherchent un plombier quand ils ont une fuite. Chaque milliseconde compte, surtout en 3G.
La stratégie crée un effet de levier. À cette échelle, définir la structure et les règles (l’audit du design system) a plus d’impact que des écrans pris un à un.

Équipe et collaboration

Ce projet n’aurait pas été possible seul. J’ai travaillé avec les développeurs iOS et Android, le backend, le marketing et le product owner. J’ai piloté la direction UI, les spécifications des composants et les rituels d’une équipe de 4 designers, avec des revues de design et des rétrospectives chaque semaine.

Victor Soussan

Lead Product Designer

Envie de collaborer sur un projet similaire ? Discutons.

Contact LinkedIn

Synthèse