Android Wear

Product DesignerAndroid Wear, Material Design2015

Bringing PagesJaunes to Your Wrist

Designing a glanceable local search experience for Android Wear

A two-month design sprint to bring France's leading local directory to wearables. Working in a tight duo with Android developer Thibault Fighiera, we shipped a fully functional Android Wear app from concept to Google Play.

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.

TF
Thibault Fighiera

Android Developer @ PagesJaunes

Type

Wearable App

Scope

Product Design

Period

Oct-Dec 2015

Company

PagesJaunes

PagesJaunes Android Wear

Overview

The Context

PagesJaunes wanted to experiment with wearable technology. Android Wear was emerging as a platform, and we saw an opportunity to help users find local professionals in the most contextual way possible: right from their wrist.

The Challenge

Design a complete local search experience for a 280dp circular screen. Users needed to find businesses, view key info, and take action (call or navigate) in seconds, not minutes.

My Role

I owned the full design process: user research, persona creation, sketching, wireframing, UI design, interaction specs, prototyping, and stakeholder presentations. Working back-to-back with our developer for rapid iteration.

User Scenario

"It's noon, Julien is hungry. He wants to quickly find a restaurant near the office and get directions."

Julien, 25 years old

Busy professional, always on the go. Uses his phone for everything but wants faster access to quick tasks. Early adopter of wearable tech.

  • Find nearby businesses in seconds
  • Get key info at a glance (open/closed, rating, distance)
  • Take action quickly (call or navigate)
  • Minimal interaction, maximum result

Design Approach

Learn the Platform

Deep dive into Android Wear guidelines. Understanding the constraints: circular screens, ambient mode, voice input, phone handoff patterns.

Define the Flows

Two primary user journeys: "Find and Call" and "Find and Navigate." Each path optimized for minimum taps and maximum clarity.

Design for Glanceability

Every screen needed to communicate its purpose in under 2 seconds. Information hierarchy became critical on a 280dp display.

Iterate on Real Hardware

Weekly sessions with actual watches. Testing with real constraints revealed issues that mockups couldn't surface.

What We Built

  • Card-based UI with ratings, status, and contact CTA
  • Two optimized user flows: search→call and search→navigate
  • Regular mode (high-contrast yellow) and ambient mode (monochrome)
  • Voice search integration with "Ok Google"
  • Phone handoff for calls and Google Maps navigation
  • Category shortcuts for quick access to common searches

My Deliverables

  • Persona and user story documentation
  • Sketching and wireframing
  • Full UI design for circular and square displays
  • Interaction specs and motion design
  • Prototyping and demo videos
  • Stakeholder presentation deck
Phase 1

Research & Discovery

Deep dive into Android Wear guidelines, studying hardware constraints, defining user journeys, and exploring dozens of concepts on paper.

Early Wireframes
Early Wireframes. Before opening Sketch, I explored dozens of layout options on paper. This rapid iteration revealed which information hierarchy worked best for a 280dp circular display.
User Task Flows
User Task Flows. Two optimized journeys: find-and-call for urgent needs, find-and-navigate for discovery. Every tap counted on a screen this constrained.
Ambient Mode Mapping
Ambient Mode Mapping. Each active screen needed a low-power equivalent. White outlines on black preserved battery life while keeping users oriented when they glanced at their wrist.
Phase 2

Screen Design

Creating the complete UI for circular and square displays. Each screen needed to communicate its purpose in under 2 seconds on a 280dp display.

UI and Interactions
UI and Interactions. The complete interaction model showing how watch actions hand off to phone for calls and navigation.
Loading
App List
Categories
Result 1
Result 2
Result 3
Detail Card
Watch Face
Screen Inventory. Catalog of every screen state. From loading to detail card, each transition designed for quick scanning on 280dp.
Active vs Ambient States
Active vs Ambient States. Brand yellow delivered instant recognition in active mode. The ambient state stripped to monochrome essentials, extending battery life by hours.
UI Overview
UI Overview. Systematic catalog of screen states ensuring design consistency across the wearable experience.
Phase 3

Specifications & Guidelines

Comprehensive documentation of active and ambient modes, component library for round and square variants, and interaction specs for developer handoff.

Component Library
Component Library. Full documentation covering both round and square watch variants. This became the single source of truth for our two-person team.
Ambient Mode Design
Ambient Mode Specifications. White outlines on black background to preserve battery. Each active screen has its low-power equivalent, keeping users oriented.
Phase 4

Implementation & Launch

Daily pair sessions with the developer, iterating on real builds, video prototypes, and preparing assets for Google Play submission.

Pair Programming Sessions
Pair Programming Sessions. Daily working sessions with developer Thibault Fighiera. Two watches connected, iterating on actual builds instead of static mockups.
Design Session
Keynote Prototyping. Keynote served as my rapid prototyping tool. Quick to iterate, easy to share, precise enough for handoff.
Device Verification
On-Device Verification. Nothing replaces testing on real hardware. Reflections, viewing angles and touch targets only reveal themselves in context.
Search Flow Demo. The complete search journey captured on real hardware. From voice input to business card display.
Navigation Demo. Seamless transition from watch to phone when the user requests directions.
Play Store Submission
Launch Communication. Internal communication for app launch. Marketing assets and store listing materials ready for publication.
Google Play Presence
Play Store Visual. The promotional visual for Google Play listing. First impressions matter.
Business Card on Wrist
In-situ Mockup. Visualizing the card on an actual wrist reveals real-world reading conditions.

Result

2 months

From concept to Google Play

2 flows

Optimized user journeys

280dp

Screen real estate mastered

1 team

Designer + Developer duo

What I Learned

Constraints breed creativity

A 280dp screen forced every design decision to be intentional. No room for filler.

Platform fluency matters

Deep understanding of Android Wear patterns made our app feel native, not ported.

Tight collaboration accelerates

Daily syncs with the developer meant problems were caught and solved in hours, not days.

Working on a wearable project?