Android Wear

Product DesignerAndroid Wear, Material Design2015

PagesJaunes à Votre Poignet

Concevoir une expérience de recherche locale lisible d'un coup d'œil pour Android Wear

Un sprint design de deux mois pour porter l'annuaire local leader en France sur les montres connectées. En binôme serré avec le développeur Android Thibault Fighiera, nous avons livré une app Android Wear complète du concept au Google Play.

Victor a conçu une expérience montre connectée complète en partant de zéro en deux mois. Sa capacité à comprendre les contraintes d'une nouvelle plateforme et à les traduire en un langage design cohérent était impressionnante.

Thibault Fighiera

Développeur Android @ PagesJaunes

Type

App Montre Connectée

Périmètre

Product Design

Période

Oct-Déc 2015

Entreprise

PagesJaunes

Vue d'ensemble

Le Contexte

PagesJaunes voulait expérimenter avec les montres connectées. Android Wear émergeait comme plateforme, et nous avons vu une opportunité d'aider les utilisateurs à trouver des pros locaux de la manière la plus contextuelle : directement depuis leur poignet.

Le Défi

Concevoir une expérience de recherche locale complète pour un écran circulaire de 280dp. Les utilisateurs devaient trouver des commerces, voir les infos clés, et agir (appeler ou naviguer) en secondes, pas en minutes.

Mon Rôle

J'ai piloté tout le processus de design : recherche utilisateur, création de profils types, croquis, maquettes fil de fer, design d'interface, spécifications d'interaction, prototypage, et présentations aux décideurs. En binôme avec notre développeur pour itérer rapidement.

Scénario Utilisateur

"Il est midi, Julien a faim. Il veut trouver rapidement un resto près du bureau et s'y faire guider."

Julien, 25 ans

Pro occupé, toujours en mouvement. Utilise son téléphone pour tout mais veut un accès plus rapide aux tâches courantes. Adepte des nouvelles technologies.

Trouver des commerces proches en secondes
Obtenir les infos clés en un coup d'œil (ouvert/fermé, note, distance)
Agir rapidement (appeler ou naviguer)
Interaction minimale, résultat maximum

Approche Design

Apprendre la Plateforme

Plongée dans les recommandations Android Wear. Comprendre les contraintes : écrans circulaires, mode ambiant, saisie vocale, relais vers le téléphone.

Définir les Parcours

Deux parcours utilisateur principaux : "Trouver et Appeler" et "Trouver et Naviguer." Chaque chemin optimisé pour un minimum d'interactions et une clarté maximale.

Concevoir pour la Lisibilité Instantanée

Chaque écran devait communiquer son propos en moins de 2 secondes. La hiérarchie d'information est devenue critique sur un écran de 280dp.

Itérer sur du Vrai Matériel

Sessions hebdomadaires avec de vraies montres. Tester avec des contraintes réelles a révélé des problèmes que les maquettes ne pouvaient pas montrer.

Ce qu'on a construit

UI en cartes avec notes, statut et CTA contact
Deux parcours utilisateur optimisés : recherche→appel et recherche→navigation
Mode normal (jaune haut contraste) et mode ambiant (monochrome)
Intégration recherche vocale "Ok Google"
Relais vers le téléphone pour appels et navigation Google Maps
Raccourcis catégories pour accès rapide aux recherches courantes

Mes Livrables

Documentation persona et user story
Sketching et wireframing
UI design complet pour écrans circulaires et carrés
Specs d'interaction et motion design
Prototypage et vidéos de démo
Support de présentation aux décideurs

Phase 1

Recherche & Exploration

Immersion dans les guidelines Android Wear, étude des contraintes matérielles, définition des parcours utilisateur et exploration de dizaines de concepts sur papier.

**Wireframes Papier.** Avant d'ouvrir Sketch, j'ai exploré des dizaines d'options de layout sur papier. Cette itération rapide a révélé quelle hiérarchie d'information fonctionnait sur un écran circulaire de 280dp.

**Mapping Mode Ambiant.** Chaque écran actif nécessitait un équivalent basse consommation. Des contours blancs sur fond noir préservaient la batterie tout en gardant les utilisateurs orientés.

Phase 2

Design d'Interface

Création de l'UI complète pour écrans circulaires et carrés. Chaque écran devait communiquer son propos en moins de 2 secondes sur un display de 280dp.

**UI et Interactions.** Le modèle d'interaction complet montrant comment les actions montre se transmettent au téléphone pour les appels et la navigation.

Loading — **Inventaire des Écrans.** Catalogue de chaque état d'écran. Du chargement à la fiche détail, chaque transition pensée pour une lecture rapide sur 280dp.

App List — **Inventaire des Écrans.** Catalogue de chaque état d'écran. Du chargement à la fiche détail, chaque transition pensée pour une lecture rapide sur 280dp.

**États Actif vs Ambiant.** Le jaune PagesJaunes assurait une reconnaissance instantanée en mode actif. L'état ambiant se réduisait à l'essentiel monochrome, prolongeant la batterie de plusieurs heures.

**Vue d'ensemble UI.** Catalogue des états d'écran assurant la cohérence à travers l'expérience montre connectée.

Phase 3

Spécifications & Guidelines

Documentation exhaustive des modes actif et ambiant, bibliothèque de composants pour les variantes rondes et carrées, et spécifications d'interaction pour la transmission au développeur.

**Bibliothèque Composants.** Documentation complète couvrant les variantes de montres rondes et carrées. Cette bibliothèque est devenue la source de vérité pour notre équipe de deux.

Design Mode Ambiant — **Spécifications Mode Ambiant.** Contours blancs sur fond noir pour économiser la batterie. Chaque écran actif a son équivalent basse consommation, gardant les utilisateurs orientés.

Phase 4

Implémentation & Lancement

Sessions quotidiennes en binôme avec le développeur, itérations sur des builds réels, prototypes vidéo, et préparation des assets pour la soumission Google Play.

**Sessions en Binôme.** Sessions de travail quotidiennes avec le développeur Thibault Fighiera. Deux montres connectées, itérant sur des versions réelles plutôt que des maquettes statiques.

Session Design — **Prototypage Keynote.** Keynote servait d'outil de prototypage rapide. Rapide à itérer, facile à partager, assez précis pour la transmission au développeur.

Vérification Device — **Vérification sur Appareil.** Rien ne remplace le test sur le vrai matériel. Reflets, angles de vue et zones tactiles ne se révèlent qu'en contexte.

Démo Parcours Recherche. Le parcours de recherche complet capturé sur du vrai matériel. De la saisie vocale à l'affichage de la fiche commerce.

Démo Navigation. Transition fluide de la montre au téléphone quand l'utilisateur demande un itinéraire.

Soumission Play Store — **Communication Lancement.** Communication interne pour le lancement. Visuels marketing prêts pour publication.

Présence Google Play — **Visuel Play Store.** Le visuel promotionnel pour le listing Google Play. Les premières impressions comptent.

Fiche Pro sur Poignet — **Mockup In-situ.** Visualiser la fiche sur un vrai poignet révèle les conditions de lecture réelles.

Résultat

2 mois

Du concept au Google Play

2 parcours

Parcours utilisateur optimisés

280dp

Surface d'écran maîtrisée

1 équipe

Duo Designer + Développeur

Ce que j'ai appris

Les contraintes stimulent la créativité

Un écran de 280dp a forcé chaque décision design à être intentionnelle. Pas de place pour le superflu.

La fluence plateforme compte

Une compréhension profonde des patterns Android Wear a rendu notre app native, pas portée.

Une collaboration serrée accélère

Des syncs quotidiens avec le développeur signifiaient que les problèmes étaient catchés et résolus en heures, pas en jours.

Un projet montre connectée en cours ?