PagesJaunes
Refonte de PagesJaunes pour 22M d'utilisateurs
D'un annuaire legacy vers une expérience mobile-first
Deux ans à moderniser l'app utilitaire la plus téléchargée de France. J'ai rejoint comme Product Designer, suis devenu UI Team Lead avec 4 designers, et livré des mises à jour majeures sur iOS, Android, web et Android Wear.
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 qui peut faire le travail de terrain mais aussi 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 White
Director of UX @ PagesJaunes
Type
Mobile & Web
Périmètre
Refonte Apps
Période
2014-2016
Entreprise
PagesJaunes (Solocal)
Vue d'ensemble
Le Contexte
En 2014, PagesJaunes servait 15M+ de visiteurs mensuels mais restait ancré dans une logique d'annuaire web. Les apps mobiles avaient des millions de téléchargements, mais l'expérience était lourde. Le produit devait évoluer de fiches statiques vers une expérience fluide, personnelle et mobile-first, sans casser ce qui marchait.
Mon Rôle
J'ai rejoint comme Product Designer sur le web, les partenariats (TheFork, Renault R-Link), et les flows de login. En 2015, je suis devenu UI Team Lead : coordination de 4 designers, ownership de la refonte mobile, et syncs hebdo avec les devs iOS/Android.
Objectifs Clés
- Refonte de la homepage avec recherche par intention
- Livrer l'onboarding natif pour iOS & Android
- Construire la navigation piétonne (API Mappy)
- Auditer et planifier le design system (Yellowstrap)
Refonte Homepage
Comment rendre une recherche utilitaire personnelle et accueillante ?
L'ancienne homepage montrait deux champs : "Qui" et "Où". Ça marchait, mais c'était froid et daté. On est passé à un design plus conversationnel.
"Bonjour, de quoi avez-vous besoin ?"
Cette phrase amicale donnait le ton. Elle apportait de la chaleur à un outil utilitaire.
Imagerie Contextuelle
On a conçu des règles de direction artistique pour des images de fond tournantes montrant des pros locaux : le boulanger, le garagiste, le fleuriste. Contextualisées selon la catégorie de recherche.
Simplification Recherche
Remplacement des deux champs par une barre de recherche unique. Réduction du bruit visuel. Unification du langage des onglets sur iOS et Android.
Évolution Moteur de Recherche
Comment refondre le moteur de revenus sans perdre les utilisateurs ?
Le moteur de recherche est le cœur de PagesJaunes. Avec près de 500M€ de revenus annuels liés au ranking et à la visibilité, chaque changement était à haut risque. Les utilisateurs devaient trouver les professionnels rapidement. Le business devait préserver le modèle de ranking qui monétisait chaque requête.
Enjeux Élevés
Le moteur de recherche alimentait tout le modèle économique. La position dans les suggestions et résultats impactait directement les revenus publicitaires. Toute erreur de redesign pouvait coûter des millions.
Le Modèle "Quoi + Où"
Recherche structurée autour de deux questions : Quel professionnel ou entreprise cherchez-vous ? Où en avez-vous besoin ? Cette approche géolocalisée aide les utilisateurs à trouver des pros à proximité, consulter leurs infos, les appeler ou s'y rendre.
Transitions Material Design
On a implémenté les patterns Material Design de Google avec transitions Activity et animations d'éléments partagés. La barre de recherche se transforme élégamment en résultats plein écran, maintenant le contexte tout en étendant les fonctionnalités.
Livré en Production
Ce prototype est devenu l'implémentation production déployée sur le Google Play Store. Les transitions fluides réduisent la latence perçue tout en préservant les habitudes utilisateur construites au fil des années.
Onboarding Natif
Comment guider 22M d'utilisateurs à travers une mise à jour majeure ?
On lançait une version majeure. Les utilisateurs devaient découvrir les nouvelles features sans être bloqués. On a conçu des animations courtes et non-bloquantes au premier lancement.
Implémentation iOS
Utilisation de CAAnimation pour des séquences de walkthrough fluides. Itérations testées dans notre labo UX à Paris.
Implémentation Android
Utilisation des transitions Activity avec les codes Material Design. Coordination avec les devs sur les specs motion.
Objectifs Onboarding
- • Réduire les tickets support sur la navigation
- • Booster la découverte des features (Favoris, Cartes)
- • Augmenter la rétention première semaine
Cartes & Itinéraire Piéton
Comment amener les utilisateurs de la recherche à la destination plus vite ?
Trouver un pro, c'est la moitié du travail. Les utilisateurs doivent s'y rendre. On a construit une expérience de navigation piétonne complète sur l'API Mappy.
Features Clés
- Aperçu itinéraires piétons turn-by-turn
- Handoff multi-apps : Waze, Google Maps, Apple Maps
- Optimisation réseau pour connexions 3G
- Split-view iPad avec clarté d'itinéraire
Expérience Tablette
Sur iPad, on a complètement repensé l'expérience carte avec les split views natifs. Liste des directions d'un côté, carte interactive de l'autre. Support accessibilité complet avec Dynamic Type et VoiceOver.
Mon PagesJaunes
Comment transformer des chercheurs passifs en utilisateurs engagés ?
L'espace fidélité et compte était fragmenté et sous-utilisé. On l'a repensé pour soutenir la stratégie de rétention.
Micro-Interactions
Specs motion livrées aux équipes dev. Ces animations sont passées en production sur iOS et Android.
Android Wear
Un projet expérimental, tourné vers l'avenir. PagesJaunes voulait être présent sur les wearables. J'ai conçu et développé cette app en duo avec Thibault Fighiera, dev Android. Deux mois du concept à la sortie Google Play.
Case Study
PagesJaunes au poignet
Quand l'utilisateur a besoin d'un plombier maintenant, une montre peut-elle être plus rapide qu'un téléphone ?
Stratégie Design System
Avec plusieurs plateformes et une divergence croissante des features, on avait besoin de fondations partagées. J'ai mené le premier audit complet.
L'Audit
Revue de tous les écrans app sur iOS, Android et web. Interviews des designers et devs à travers les squads pour comprendre les points de friction.
Roadmap Yellowstrap
Livraison de la roadmap système de composants et des guidelines. Définition des conventions de nommage, usage couleurs, styles CTA, indicateurs de statut. Outils pré-Figma : Zeplin, kits PDF, Sketch.
Note : Mon rôle était focalisé sur la définition stratégique et les besoins, pas sur la construction hands-on de la bibliothèque.
Équipe & Collaboration
Ce projet était impossible à réaliser seul. J'ai travaillé avec les devs iOS/Android, le backend, le marketing et les PO.
Équipe UX centrale
Mon rôle : Product DesignerIntégré à l'équipe UX centrale, travail sur la stratégie design cross-plateforme et la direction visuelle.
Feature Team
Mon rôle : Product Designer → UI Team LeadSquad dédiée à la refonte homepage, intégration Material Design, compte utilisateur, favoris et historique.
Crits et retros hebdo. Boucles de feedback rapides, alignement serré.
Résultats
22M+
Téléchargements
installations cumulées
300K
Utilisateurs/jour
au pic d'usage
4
Designers
managés comme lead
4.5★
App Store
vs 4.2 avant
Ce que j'ai appris
Ne pas casser les habitudes
22M d'utilisateurs ont une mémoire musculaire. Les changements radicaux les perdent. Des améliorations petites et claires marchent mieux.
L'utilitaire exige la vitesse
Les gens cherchent un plombier quand ils ont une fuite. Chaque milliseconde compte. Surtout en 3G.
La cohérence, c'est dur
iOS, Android, web, Wear : chaque plateforme a ses contraintes. Les patterns partagés demandent une négociation constante.
La stratégie crée du levier
À cette échelle, définir la structure et les règles (audit design system) crée plus d'impact que des écrans individuels.