PagesJaunes

Product Designer → UI Team LeadMobile Apps, Web, Design System2014-2016

Redesigning PagesJaunes for 22M Users

From legacy directory to mobile-first experience

Two years modernizing France's most downloaded utility app. I joined as Product Designer, became UI Team Lead managing 4 designers, and shipped major updates across iOS, Android, web, and Android Wear.

Victor is passionate about UX and keeps himself up to date with latest trends and methods. He is a very capable designer who can do the legwork but also take a step back and advise on more strategic aspects of an interface design or the project as a whole. Highly recommended as part of a UX or product team.

Simon White

Simon White

Director of UX @ PagesJaunes

Type

Mobile & Web

Scope

Apps Redesign

Period

2014-2016

Company

PagesJaunes (Solocal)

PagesJaunes Mobile Apps

Overview


The Context

In 2014, PagesJaunes served 15M+ monthly visitors but felt stuck in web directory logic. The mobile apps had millions of downloads, but the experience was heavy. The product needed to evolve from static listings to a fluid, personal, mobile-first experience, without breaking what worked for existing users.

My Role

I joined as Product Designer working on web, partnerships (TheFork, Renault R-Link), and login flows. In 2015, I became UI Team Lead: coordinating 4 designers, owning the mobile app redesign, and running weekly syncs with iOS/Android devs.

Key Objectives

  • Redesign the homepage with intent-first search
  • Ship native onboarding for iOS & Android
  • Build pedestrian navigation (Mappy API)
  • Audit and roadmap the design system (Yellowstrap)

Homepage Redesign

How do you make a utility search feel personal and welcoming?

The old homepage showed two search fields: "Who" and "Where". It worked, but felt cold and dated. We moved toward a more conversational design.

"Bonjour, de quoi avez-vous besoin?"

This friendly phrase set the tone. It brought warmth to a utility-first tool.

Contextual Imagery

We designed art direction rules for rotating background images featuring local professionals: the baker, the mechanic, the florist. Contextual based on search category.

Search Simplification

Replaced dual fields with a single search bar. Reduced visual clutter. Unified tab language across iOS and Android.

PagesJaunes Homepage iOS & Android
A conversational greeting ("What do you need today?") reframes the search from directory lookup to problem-solving. Users act faster when the interface feels personal.
PagesJaunes Homepage Variations
Eight contextual hero images featuring local pros: the baker, mechanic, florist. Each builds trust by showing the human behind the service.
PagesJaunes iPad Homepage
Two homepage variants on iPad showcasing contextual hero photography. Each image features a local professional, creating warmth and trust at first glance.
PagesJaunes iPad Homepage Variations
Responsive hero images across iPhone 4, Retina, iPad, Android phone/tablet. Auto-detection of image focal point with viewport-adaptive cropping. Co-developed with Android lead dev Alexandre Badie.

Search Engine Evolution

How do you redesign the revenue engine without losing users?

The search engine is the heart of PagesJaunes. With close to €500M in annual revenue tied to search rankings and visibility, every change carried high stakes. Users needed to find professionals quickly. The business needed to preserve the ranking model that monetized every query.

High Stakes

The search engine powered the entire business model. Ranking position in suggestions and results directly impacted advertiser revenue. Any misstep in the redesign could cost millions.

The "What + Where" Model

Search structured around two core questions: What professional or company are you looking for? Where do you need them? This geolocation-centric approach helped users find nearby professionals, view their details, call them, or navigate there.

PagesJaunes Search Flow
From query to listing in three taps. Autocomplete reduces cognitive load, location context eliminates redundant input.

Material Design Transitions

We implemented Google's Material Design patterns with Activity transitions and shared element animations. The search bar elegantly transforms into full-screen results, maintaining context while expanding functionality.

Shipped to Production

This prototype became the production implementation deployed on Google Play Store. Smooth transitions reduced perceived latency while the familiar search model preserved user habits built over years.

Search engine evolution prototype. Material Design activity transitions with shared element animations. Search bar transforms into full-screen results.

Native Onboarding

How do you guide 22M users through a major app update?

We were launching a major version update. Users needed to discover the new features without being blocked. We designed short, non-blocking animations at first launch.

iOS Implementation

Leveraged CAAnimation for smooth walkthrough sequences. Tested iterations in our Paris UX lab.

Android Implementation

Used Activity transitions with Material Design cues. Coordinated with dev team on motion specs.

Onboarding Goals

  • • Reduce support requests about navigation
  • • Boost feature discovery (Favorites, Maps)
  • • Increase first-week retention
iOS Implementation
Android Implementation

Maps & Walking Itinerary

How do you get users from search to destination faster?

Finding a professional is only half the job. Users need to get there. We built a complete pedestrian navigation experience on top of Mappy API.

Core Features

  • Pedestrian route previews with turn-by-turn
  • Multi-app handoff: Waze, Google Maps, Apple Maps
  • Network optimization for 3G connections
  • iPad split-view with route clarity

Tablet Experience

On iPad, we completely redesigned the map experience with native split views. Directions list on one side, interactive map on the other. Full accessibility support with Dynamic Type and VoiceOver.

PagesJaunes Transit System Components
Transit icons carry data: metro line colors, station names, walking segments. All parsed from Mappy API and styled for quick scanning.
PagesJaunes Multi-device Navigation
One journey, three modes: walk, drive, transit. The interface adapts to the user's choice, the destination stays constant.
PagesJaunes iPhone Navigation Flows
Three iPhone flows: route sheet, map preview, transit breakdown. Each screen answers a different user question.
PagesJaunes iPad Itinerary
iPad split-view navigation: map context on the left, turn-by-turn on the right. Both visible, no tab switching needed.

My PagesJaunes

How do you turn passive searchers into engaged users?

The loyalty and account area was fragmented and underused. We redesigned it to support the retention strategy.

PagesJaunes Account Flow
Social login reduces friction by 60%. Email/password fallback preserved for users who prefer traditional auth.
PagesJaunes Engagement Features
History and Favorites turn one-time searches into retained value. Each saved business is a reason to return.
PagesJaunes Desktop Review Editing
Desktop web interface for review editing. Multi-criteria star ratings, pros/cons fields, character limits, rich formatting. Responsive from desktop to tablet.

Micro-Interactions

Motion specs I delivered to dev teams. These animations shipped in production across iOS and Android.

Material Design Navigation Drawer
Material Design Navigation Drawer. Familiar Android pattern, PagesJaunes colors. Users already know how this works.
Heart animation on "Add to Favorites". The bounce gives instant feedback that the action worked.
History screen with photo upload prompt. Encouraging users to share their experience after visiting a business.

Android Wear

An experimental, forward-looking project. PagesJaunes wanted presence on wearable devices. I designed and built this app in duo with Android developer Thibault Fighiera. Two months from concept to Google Play release.

PagesJaunes Android Wear
PagesJaunes Android Wear app on watch face. Glanceable local search for wearables.
Y Aller navigation button
Navigation action screen. One-tap "Y Aller" (Go There) button triggers Google Maps handoff.
PagesJaunes Android Wear

Case Study

PagesJaunes on your wrist

When users need a plumber now, can a watch be faster than pulling out a phone?

Read more

Design System Strategy

With multiple platforms and growing feature divergence, we needed shared foundations. I led the first comprehensive audit.

The Audit

Reviewed all app screens across iOS, Android, and web. Interviewed designers and developers across squads to understand pain points.

Yellowstrap Roadmap

Delivered the component system roadmap and guidelines. Defined naming conventions, color usage, CTA styles, status indicators. Pre-Figma era tools: Zeplin, PDF kits, Sketch.

Note: My role focused on strategic definition and requirements, not hands-on library building.

Team & Collaboration

This project was impossible to pull off alone. I worked with iOS/Android devs, backend, marketing, and PO.

2014–2015

UX Core Team

My role: Product Designer

Integrated within the central UX team, working on cross-platform design strategy and visual direction.

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

My role: Product Designer → UI Team Lead

Dedicated squad for homepage redesign, Material Design integration, user accounts, favorites, and history.

Vedran BericUX/UI DesignerFrédéric RodriguezProduct ManagerThibault FighieraAndroid DevAlexandre BadieAndroid DevJérémie GodoniOS DevJeffrey MackoiOS DevMarilyn KolScrum MasterNicolas DovranTeam Lead

Weekly crits and retros. Fast feedback loops, tight alignment.

Results

22M+

Downloads

cumulative app installs

300K

Daily Users

at peak usage

4

Designers

managed as team lead

4.5★

App Store

up from 4.2

What I Learned

Don't break habits

22M users have muscle memory. Radical changes confuse them. Small, clear improvements work better.

Utility apps need speed

People search for a plumber when they have a leak. Every millisecond counts. Especially on 3G.

Consistency is hard

iOS, Android, web, Wear: each platform has its own constraints. Shared patterns require constant negotiation.

Strategy creates leverage

At this scale, defining structure and rules (design system audit) creates more impact than individual screens.

Got a legacy product to modernize?