Projets similaires
Product Designer → UI Team Lead · Apps Mobiles, Web, Design System · 2014-2016
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.
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)
TypeMobile & Web
PérimètreRefonte Apps
Période2014-2016
EntreprisePagesJaunes (Solocal)
Refonte Homepage
L'ancienne homepage montrait deux champs : "Qui" et "Où". Ça marchait, mais c'était froid et daté. On est passé à un design plus conversationnel.
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.
Une accroche conversationnelle ("De quoi avez-vous besoin ?") transforme la recherche d'annuaire en résolution de problème. Les utilisateurs agissent plus vite quand l'interface est personnelle.
PagesJaunes — Page d'accueil iOS & Android
Huit visuels contextuels de pros locaux : boulanger, garagiste, fleuriste. Chacun crée la confiance en montrant l'humain derrière le service.
PagesJaunes — Variations image hero
Deux variantes de homepage sur iPad avec photographies de professionnels en fond. Chaque visuel met en avant un pro local, créant chaleur et confiance dès le premier regard.
PagesJaunes — Page d'accueil iPad
Visuels héros responsive sur iPhone 4, Retina, iPad, Android phone/tablet. Détection auto du point focal avec recadrage adapté au viewport. Co-développé avec Alexandre Badie, lead dev Android.
PagesJaunes — Responsive multi-device
Évolution Moteur de Recherche
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
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.
Implémentation iOS
Implémentation Android
Utilisation des transitions Activity avec les codes Material Design. Coordination avec les devs sur les specs motion.
Implémentation Android
Cartes & Itinéraire Piéton
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
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.
Navigation Drawer Material Design. Pattern Android familier, couleurs PagesJaunes. Les utilisateurs savent déjà comment ça marche.
Navigation Drawer
Animation cœur sur "Ajouter aux Favoris". Le rebond donne un feedback immédiat que l'action a fonctionné.
Animation Favoris
Écran Historique avec incitation à uploader une photo. Encourager les utilisateurs à partager leur expérience après une visite.
Historique & remarketing
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.
App PagesJaunes Android Wear sur cadran de montre. Infos locales lisibles d'un coup d'œil.
PagesJaunes Android Wear
Écran d'action navigation. Bouton "Y Aller" en un tap déclenche le handoff vers Google Maps.
"Y Aller" — action de navigation
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 ?
Lire la suite
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.
2014–2015
Équipe UX centrale
Product DesignerIntégré à l'équipe UX centrale, travail sur la stratégie design cross-plateforme et la direction visuelle.
Simon WhiteDirector of UXBenjamin DupontHead of UXKarl SmitsLead UXFabien BajeotLead UX ResearchQian XuUI DesignerMylène Roquinarc'hUI DesignerEmilie ContyMarketing ManagerTaline KabakianMarketing UGCNicolas MoulinMarketing DirectorFrançois KhouryBusiness Owner
2015–2016
Feature Team
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
Téléchargements · installations cumulées22M+
Utilisateurs/jour · au pic d'usage300K
Designers · managés comme lead4
App Store · vs 4.2 avant4.5★
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.
Un produit legacy à moderniser ?