PagesJaunes

PagesJaunes à votre poignet

Une app qui porte la recherche locale de PagesJaunes sur Android Wear. En binôme avec un développeur Android, j’ai conçu une expérience lisible d’un coup d’œil sur un écran circulaire de 280dp, du concept à Google Play en deux mois.

Rôle: Product Designer
Périmètre: Android Wear, Material Design
Équipe: Duo designer et développeur

Voir la galerie

« 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 de design cohérent était impressionnante. »

Thibault FighieraDéveloppeur Android chez PagesJaunes

Synthèse

Contexte: PagesJaunes voulait expérimenter la montre connectée, alors qu’Android Wear arrivait comme plateforme. La recherche locale s’y prête : trouver un professionnel, puis l’appeler ou s’y rendre. Le défi était de faire tenir ce parcours complet sur un écran rond de 280dp, sans clavier.
Mon rôle: J’ai conduit la conception de bout en bout : personas et scénarios, croquis, wireframes, interface, spécifications d’interaction, prototypes et présentations aux décideurs. Je travaillais en binôme avec Thibault Fighiera, développeur Android, dans une équipe agile de trois avec un product owner.
Réalisations et livrables: Deux personas et leurs scénarios
Julien et Bernard, deux profils opposés pour cadrer les parcours.
Croquis et wireframes
Des dizaines de dispositions explorées sur papier avant d’ouvrir Sketch.
Interface complète
Écrans ronds et carrés, en mode normal et en mode ambiant.
Spécifications annotées
Composants, gestes et résolutions, avec relais vers le téléphone pour l’appel et vers Google Maps pour l’itinéraire.
Prototypes sur de vraies montres
Deux vidéos de prototype et le support de présentation aux décideurs.
Visuels de lancement
Le visuel de la fiche Google Play et la communication interne au lancement.

2 mois
du concept à Google Play: 2 parcours
trouver et appeler, trouver et naviguer: 280dp
écran circulaire visé

Enjeu et objectifs

Enjeu

Faire tenir une recherche locale complète sur un écran rond de 280dp : trouver un professionnel, juger d’un coup d’œil s’il convient, puis l’appeler ou s’y faire guider. Sans clavier et avec très peu d’appuis. À cette taille, chaque information affichée en retire une autre, et chaque écran de plus est un geste de plus sur le poignet.

Objectifs

Trois objectifs : livrer sur Google Play en deux mois, couvrir les deux usages principaux (trouver et appeler, trouver et naviguer) avec un minimum d’appuis, et donner à l’app le comportement d’une app Android Wear native tout en gardant les codes de PagesJaunes. L’app marque aussi la première étape de l’adaptation de la marque à Material Design.

Deux personas, deux usages

Pour cadrer les parcours, j’ai écrit deux scénarios autour de deux profils opposés. Julien, 25 ans, chef de projet en startup et technophile, a faim à midi et cherche un fast-food près de son bureau : il veut y être guidé. Bernard, 47 ans, banquier peu à l’aise avec la technique, a reçu sa montre à Noël : au volant, il cherche un fleuriste par la voix et l’appelle pour commander. Chaque scénario a donné un parcours. L’écart entre un utilisateur rodé aux montres et un autre qui l’est peu a servi de borne : l’interface devait se comprendre sans explication.

Julien, 25 ans : trouver un restaurant et s’y faire guider

Bernard, 47 ans : trouver un fleuriste, appeler et programmer un rappel

01 / 02

Approche de conception

Apprendre la plateforme, puis fixer deux parcours

J’ai commencé par les recommandations d’Android Wear : écrans ronds et carrés, mode ambiant, saisie vocale, relais vers le téléphone. Elles ont posé trois règles pour la suite : un usage à faible effort, des informations lisibles d’un coup d’œil, des actions rapides. Les deux scénarios sont devenus deux parcours : trouver et appeler, trouver et se faire guider.

Les deux parcours, du cadran de la montre jusqu’au téléphone

Explorer sur papier avant d’ouvrir Sketch

Des dizaines de dispositions dessinées à la main, avec chaque fois la même question : que garder sur 280dp, et que laisser à la fiche détail. Les croquis ont aussi servi à cartographier le mode ambiant, avec un équivalent basse consommation pour chaque écran actif.

Cartographie du mode ambiant, écran par écran

Concevoir pour un coup d’œil, en deux modes

Chaque écran devait se comprendre en moins de deux secondes. Le mode normal garde le jaune PagesJaunes à fort contraste pour reconnaître la marque immédiatement. Le mode ambiant se réduit à des contours blancs sur fond noir, pour ménager la batterie d’un écran OLED. Les deux modes existent pour les montres rondes comme pour les montres carrées.

Itérer sur de vraies montres

Avec Thibault Fighiera, nous avons travaillé en binôme sur deux montres connectées, directement sur des versions compilées. Je prototypais dans Keynote, puis nous vérifiions sur la montre : les reflets, les angles de lecture et les zones tactiles ne se jugent qu’au poignet. Les problèmes repérés étaient corrigés en quelques heures.

Notes de dimensionnement à côté d’une montre carrée

Revue finale de la fiche détail sur la montre

01 / 06

Prototype sur une montre carrée

Prototype sur une montre ronde

Livrables

Chaque écran actif a son équivalent ambiant. Les écrans suivent le parcours, regroupés par moment.

Lancer l’app

L’app s’ouvre depuis le cadran ou par la voix, avec « Ok Google ». Un indicateur de chargement confirme tout de suite le lancement.

Lanceur, accueil et fiche détail

Trois écrans qui défilent. Le lanceur place l’app dans la liste de la montre. L’accueil propose les rubriques en raccourcis : restaurants, taxis, hôtels, boulangeries, cafés et bars. La fiche détail réunit nom, catégorie, statut, note, téléphone et adresse, puis la carte, les horaires et le budget.

Liste de résultats

Les résultats défilent un par un, triés par distance. Chaque carte affiche le nom, la catégorie, l’état ouvert ou fermé, la distance et la note.

Appeler ou y aller

Deux actions, un appui chacune. « Appeler » lance l’appel sur le smartphone. « Y aller » ouvre Google Maps sur la montre et démarre l’itinéraire.

Modèle d’interaction entre la montre et le téléphone

Mode ambiant

Quand la montre se met en veille, l’écran passe en contours blancs sur fond noir. La hiérarchie reste la même : nom, statut, actions.

Spécifications annotées

Les écrans sont documentés pour le développeur : dimensions, styles de texte, gestes et résolutions des écrans ronds et carrés.

Spécifications : chargement, lanceur et accueil

Spécifications : résultats, fiche détail et actions

Visuels de lancement

Deux visuels montent les écrans sur une montre : l’un pour la fiche Google Play, l’autre pour la communication interne au lancement.

Voir tous les visuels

Résultat

L’app est sortie sur Google Play deux mois après le démarrage du projet, avec les deux parcours complets et les deux modes d’affichage.

Ce qui reste ouvert, c’est l’usage. Le projet était une expérimentation pour la marque, sur une plateforme encore récente. Je ne cite pas de chiffres d’adoption, faute de données que je puisse sourcer.

Ce que j’ai appris

Chaque pixel doit justifier sa place. Sur 280dp, ajouter une information en retire une autre. Cela a rendu chaque décision de hiérarchie explicite.
Parler la langue de la plateforme. Les motifs Android Wear (cartes, relais vers le téléphone, mode ambiant) donnent à l’app un comportement natif et laissent moins à expliquer à l’utilisateur.
Travailler à deux sur la même montre. Le binôme avec le développeur a permis de repérer les problèmes sur l’appareil et de les corriger en quelques heures.

Victor Soussan

Lead Product Designer

Envie de collaborer sur un projet similaire ? Discutons.

Contact LinkedIn

Synthèse