PagesJaunes

Bringing PagesJaunes to Your Wrist

A wearable app that brings PagesJaunes local search to Android Wear. In a duo with an Android developer, I designed an experience readable at a glance on a 280dp circular screen, from concept to Google Play in two months.

Role: Product Designer
Scope: Android Wear, Material Design
Team: Designer and developer duo

View the gallery

“Victor designed a complete wearable experience from scratch in two months. His ability to understand the constraints of a new platform and translate them into a coherent design language was impressive.”

Thibault FighieraAndroid Developer at PagesJaunes

Summary

Context: PagesJaunes wanted to experiment with the smartwatch while Android Wear was emerging as a platform. Local search suits it: find a professional, then call them or go there. The challenge was to fit that whole journey on a round 280dp screen, without a keyboard.
My role: I led the design from end to end: personas and scenarios, sketches, wireframes, interface, interaction specs, prototypes and presentations to decision makers. I worked in a duo with Thibault Fighiera, the Android developer, in a three-person agile team with a product owner.
Deliverables: Two personas and their scenarios
Julien and Bernard, two opposite profiles to frame the journeys.
Sketches and wireframes
Dozens of layouts explored on paper before opening Sketch.
Complete interface
Round and square screens, in regular mode and in ambient mode.
Annotated specifications
Components, gestures and resolutions, with handoff to the phone for calls and to Google Maps for directions.
Prototypes on real watches
Two prototype videos and the presentation deck for decision makers.
Launch visuals
The Google Play listing visual and the internal launch communication.

2 months
from concept to Google Play: 2 journeys
find and call, find and navigate: 280dp
circular screen designed for

Challenge and goals

Challenge

Fit a complete local search on a round 280dp screen: find a professional, judge at a glance whether they fit, then call them or get guided there. No keyboard, very few taps. At that size every piece of information displayed pushes another one out, and every extra screen is one more gesture on the wrist.

Goals

Three goals: ship on Google Play in two months, cover the two main uses (find and call, find and navigate) in as few taps as possible, and give the app the behavior of a native Android Wear app while keeping the PagesJaunes codes. The app is also the first step of the brand’s move to Material Design.

Two personas, two uses

To frame the journeys, I wrote two scenarios around two opposite profiles. Julien, 25, a startup project manager and early adopter, is hungry at noon and looks for a fast-food place near his office: he wants to be guided there. Bernard, 47, a banker with little taste for technology, received his watch for Christmas: at the wheel, he searches for a florist by voice and calls to place an order. Each scenario produced one journey. The gap between a user at ease with watches and one who is not set the bar: the interface had to be understood without explanation.

Julien, 25: find a restaurant and be guided there

Bernard, 47: find a florist, call and set a reminder

01 / 02

Design approach

Learn the platform, then fix two journeys

I started with the Android Wear guidelines: round and square screens, ambient mode, voice input, handoff to the phone. They set three rules for the rest of the work: low-effort use, information readable at a glance, quick actions. The two scenarios became two journeys: find and call, find and get guided.

The two journeys, from the watch face to the phone

Explore on paper before opening Sketch

Dozens of layouts drawn by hand, each time with the same question: what to keep on 280dp, and what to leave to the detail card. The sketches also mapped ambient mode, with a low-power equivalent for every active screen.

Design for a glance, in two modes

Each screen had to be understood in under two seconds. Regular mode keeps the high-contrast PagesJaunes yellow so the brand is recognized immediately. Ambient mode is reduced to white outlines on black, to spare the battery of an OLED screen. Both modes exist for round and square watches.

Iterate on real watches

With Thibault Fighiera, we worked as a pair on two connected watches, directly on builds. I prototyped in Keynote, then we checked on the watch: reflections, reading angles and touch targets can only be judged on the wrist. Problems we found were fixed within hours.

Final review of the detail card on the watch

01 / 06

Prototype on a square watch

Prototype on a round watch

Deliverables

Every active screen has its ambient equivalent. The screens below follow the journey, grouped by moment.

Launch the app

The app opens from the watch face or by voice, with “Ok Google”. A loading indicator confirms the launch right away.

Launcher, home and detail card

Three screens that scroll. The launcher places the app in the watch’s list. Home offers categories as shortcuts: restaurants, taxis, hotels, bakeries, cafes and bars. The detail card gathers name, category, status, rating, phone and address, then the map, opening hours and budget.

Results list

Results appear one at a time, sorted by distance. Each card shows the name, category, open or closed status, distance and rating.

Call or go there

Two actions, one tap each. “Call” starts the call on the smartphone. “Go there” opens Google Maps on the watch and starts the route.

Interaction model between the watch and the phone

Ambient mode

When the watch sleeps, the screen switches to white outlines on black. Hierarchy stays the same: name, status, actions.

Annotated specifications

The screens are documented for the developer: dimensions, text styles, gestures and the resolutions of round and square screens.

Specifications: loading, launcher and home

Specifications: results, detail card and actions

Launch visuals

Two visuals mount the screens on a watch: one for the Google Play listing, the other for the internal communication at launch.

View all visuals

Result

The app went live on Google Play two months after the start of the project, with both journeys complete and both display modes.

What stays open is usage. The project was an experiment for the brand, on a platform that was still new. I do not quote adoption figures because I have no data I can source.

What I learned

Every pixel has to earn its place. On 280dp, adding one piece of information removes another. It made every hierarchy decision explicit.
Speak the platform’s language. Android Wear patterns (cards, handoff to the phone, ambient mode) give the app a native behavior and leave less to explain to the user.
Work in pairs on the same watch. The duo with the developer let us catch problems on the device and fix them within hours.

Victor Soussan

Lead Product Designer

Interested in working on a similar project? Let's talk.

Contact LinkedIn

Summary