Product Design Story #1 — Les coulisses de la nouvelle application Lydia
Deux semaines après la mise à jour de l’application, je souhaite raconter le pourquoi du comment des évolutions apportées à l’interface Lydia. C’est en quelque sorte mon carnet de bord, Lydia vue de l’intérieur.
Alors, pourquoi tant de changements ? Au final, l’application Lydia tournait bien, plutôt très bien même, les notes sur l’Apple store étaient très positives. La raison est simple, on voulait se faire plaisir, se faire un «kiff» comme on dit. Moi le premier, en tant que designer, j’ai pris beaucoup de plaisir à concevoir la nouvelle interface et sa navigation pour l’application de paiement que j’utilise quotidiennement.
Ce vilain plaisir à vouloir bousculer les choses et moderniser une application chez les designers peut être risqué et ne vient pas sans impératifs. Selon moi, tout doit être justifié en étant au minimum un levier de compréhension pour l’utilisateur et au mieux un levier d’acquisition. Ainsi, je vais présenter les 5 changements majeurs apportés à l’application qui ont permis le rafraîchissement de l’expérience Lydia.
Une meilleure lisibilité
C’est allé très vite, je me souviens présenter sur un coup de tête à Antoine (CTO chez Lydia), une maquette très rapidement exécutée de notre écran historique sur un fond bleu. Ca nous a tout de suite sauté aux yeux: en incrustant la barre de navigation avec le fond, on supprimait deux niveaux de lectures ce qui clarifiait fortement la hiérarchie de l’information.
Cette simple expérimentation aura été la genèse de la nouvelle application. Elle m’a ensuite amenée à me pencher sur le sujet de la navigation.
Note : Il est important de tout remettre en question de temps en temps, chambouler l’interface graphique, jouer avec. Cela permet parfois de tomber sur des choses très intéressantes auxquelles on n’aurait pas pensé en effectuant uniquement des recherches fondamentales. Je pense à l’aspirine, oui, son inventeur a découvert ce merveilleux médicament, qui m’est bien souvent utile, dans les déchets de ses expérimentations.
Une nouvelle navigation
L’idée était d’utiliser ce fond bleu pour nos quatre écrans principaux et tout faire glisser par dessus. J’ai rapidement dessiné ce schéma afin de poser l’architecture de la nouvelle version.
Afin de donner cette impression de contenu flottant, il a fallu repenser l’interface en la décloisonnant pour que le contenu ne touche plus les bords du téléphone. Ainsi, rattachée à rien, elle semble suspendue et incite l’utilisateur à faire glisser les écrans de droite à gauche pour naviguer. Il n’était surtout pas question d’imposer des gestes gymnastiques ou des torsions du pouce pour atteindre la barre de navigation ayant pris de la hauteur.
D’ailleurs, avoir placé la barre de navigation en haut (chose qui je le savais allait en froisser plus d’un) nous permet d’avoir des applications semblables sur iPhone et Android en ce qui concerne nos écrans principaux (le reste de l’application respectant les guidelines propres à iOS et Android). Cela facilite le travail de notre équipe support qui n’a plus besoin de se soucier de l’OS utilisé par l’utilisateur au bout du fil. En parallèle, une capture d’écran de l’application a l’avantage de cibler tout le monde sur nos supports de communication.
Note: Il manque selon moi une gestuelle cachée qui permettrait d’accéder automatiquement au 4e onglet, depuis le 1er onglet. Un mouvement du doigt plus rapide ? Un geste dans le sens inverse ? Je cherche toujours des idées. Par ailleurs, j’adore découvrir par hasard des gestuelles dans des applications. Il m’arrive souvent de dire “Hey, tu savais qu’on pouvait faire ça dans Instagram?”. C’est plaisant et ça crée chez moi une certaine attraction.
J’y pense, la nouvelle barre de navigation est un changement qui illustre bien la notion de risque citée plus haut. En effet, en ayant retiré les titres de chaque écran, je privilégie nos utilisateurs actuels en proposant une lecture par iconographie uniquement, ce qui peut laisser certains nouveaux utilisateurs interrogatifs. Cependant, les icônes et l’emplacement des écrans restant identiques, nos anciens utilisateurs, sans perdre leurs repères, bénéficient d’une interface plus aérée et graphique.
Un nouveau bleu
Le rafraîchissement de l’application ne pouvait pas se faire sans mise à jour du bleu Lydia. Objectifs: un bleu plus “impactant”, dynamique et joyeux faisant ressortir davantage le blanc. A accompagner d’un dégradé (c’est la mode) apportant du volume et l’affaire est dans le sac. Et ça nous fait à tous le plus grand bien.
En plus d’accentuer le contraste avec le bleu, et d’avoir incorporé le clavier, j’ai doté le montant en euro d’une Proxima “Semibold” au lieu d’une “Light”, ce qui vient lui redonner son rôle central dans l’écran. On ne voit plus que lui et avec cette vague de bleu, on remarque l’interface de loin.
Note: Après sondage, 7 personnes sur 10 préféraient un clavier sur fond blanc plutôt qu’un clavier sur fond bleu. Cependant, on était persuadé que ce clavier sur fond bleu avait l’avantage de rendre l’interface davantage mémorisable. Il est important d‘écouter et interpréter et non pas écouter et appliquer. Il faut savoir suivre ses intuitions et défendre ses convictions. Pour l’instant tout se passe bien et les retours concernant ce clavier sont positifs.
Une interface plus instinctive
-“Non madame, le “0€” affiché n’est pas votre solde Lydia. Votre solde se trouve sur l’écran Compte” — Conversation téléphonique du support.
C’était la 3e fois que j’entendais Margaux et Sébastien (équipe support) expliquer cela à des utilisateurs. Dans ces moments là, on prend conscience qu’on a fait une erreur et on se penche vite sur le problème. Dans l’ancienne version, l’état par défaut de l’écran Lydia affichait un “0€”, il était perçu par certaines personnes comme le solde de leur compte Lydia. Aïe.
J’ai d’abord pensé afficher le solde Lydia en petit en haut à droite de l’écran. Mauvaise idée. J’ai ensuite pensé à un curseur.
Une pierre, deux coups !
1° : Plus de chiffre zéro. On ne fera plus aucun lien avec le solde Lydia.
2° : Un curseur qui clignote est un langage connu de tous, il signifie qu’il faut saisir quelque chose. Ainsi, il a l’avantage d’informer l’utilisateur de la première action à effectuer : taper un montant. Terminés les “qu’est ce que je dois faire là?”
C’est grâce au support utilisateur que ce petit levier de compréhension m’est venu à l’esprit. On écoute, on interprète et on agit.
Note : Travailler à côté de son équipe support est un vrai plus. Penser à couper court avec la dernière Boiler Room qui traine dans mes oreilles et me laisser bercer par les conversations téléphoniques. Pourquoi même, ne pas répondre parfois au téléphone et faire face aux problèmes ? Disons une fois par semaine.
Un contenu contextualisé
J’ai pris conscience que notre écran “Transaction en cours” était vide à 90% du temps, il nous a semblé inévitable de le rendre plus intelligent et de l’exploiter davantage. Voici l’idée : en fonction de l’activité de l’utilisateur, nous allons lui afficher un texte différent.
En effet, dans le cas d’un utilisateur nouveau qui a fait moins de 5 Lydia, nous allons exploiter l’écran vide pour lui expliquer l’intérêt de cet écran alors qu’avec un utilisateur qui a déjà fait plus de 5 Lydia, nous allons davantage jouer sur un ton amical voire humoristique pour communiquer.
Note : Les écrans vides de contenu sont très stratégiques, ils servent à communiquer et guider l’utilisateur en plus de lui offrir un bouton avec action contextualisée. Beaucoup de bonnes choses ont déjà été écrites à ce sujet, lire ceci, ceci et ceci..
C’est tout pour le moment, tout n’est pas encore parfait, quelques optimisations sont nécessaires mais on peut déjà profiter très largement de cette nouvelle version sur iPhone et Android.
Enfin, ce n’est que le début, du très lourd reste à venir ! Notamment un tout nouveau formulaire d’ajout de carte bancaire, un processus pour le mot de passe oublié innovant, une recherche augmentée dans l’historique ou encore une nouvelle façon de payer, sans oublier le touch ID !
Félix Lepoutre, Designer chez Lydia
