UX/UI Case Study : Ajout d’une fonctionnalité à l’application mobile RATP
Pour ce projet, j’ai choisi de m’intéresser à l’application mobile RATP. Cette app qui a 10 ans enregistre environ 2 millions d’utilisateurs mensuels et plus de 14 millions téléchargements. Je vais prêter mon attention sur la partie concernant les bus afin de répondre aux reflexions déjà entendues et ressenties (telles que : mon bus est passé alors que la borne indique arrivée dans 3 minutes, où est ce bus…).
Recherches secondaires
Je procède tout d’abord à des recherches sur la RATP, ses valeurs : l’humain au cœur, la culture du service, la performance ,la responsabilité et l’inclusion. Le groupe est fortement engagé dans l’amélioration continue de l’expérience clients/voyageurs. Pour exemple, l’entreprise a travaillé avec plus 8 000 testeurs pour comprendre leurs besoins et faire évoluer les fonctionnalités de son app. Par ailleurs, l’entreprise évolue dans un environnement hautement concurrentiel. Je télécharge également des applis de transporteurs locaux, internationaux, VTC, cars afin de m’imprégner des fonctionnalités existantes.
Idéation
Afin de générer un maximum d’idées autour du point de départ fonctionnalité sur la partie bus de l’app, j’organise avec mes collègues 2 rounds de Crazy 8. C’est un exercice très riche mais très sollicitant car générer autant d’idées dans un temps limité est très challengeant. Nous procédons à un dot voting pour ne garder qu’une proposition.
Afin de compléter et nourrir la proposition émergente du Crazy 8, je fais un round de Worst Idea en compagnie de 2 autres personnes : 3 worst idea par personne sont proposées. Ensuite, nous procédons à un dot voting pour n’en garder que 3. Nous décidons de les soumettre ensuite au Round Robin pour que chacune d’entre nous alimente ces propositions.
En parallèle, je soumets la proposition à un guerilla test pour avoir des avis exterieurs utilisant l’app RATP. Les retours sont positifs. Je continue donc à avancer sur ce projet et sa matérialisation : la visualistion des bus en temps réel sur la carte et information sur leur trafic
User flow
Je créé le user flow de cette nouvelle fonctionnalité.
Mid fi wireframe
Je me lance dans la création du mid fi wireframe sur Sketch. Ca me permets également d’enrichir mon user flow en me rendant compte des possibilités ou impossibilités. J’utilise InVision pour intégrer les interactions.
Test d’usabilité
Je le teste auprès de 4 personnes pour avoir un retour rapide sur les points bloquants ou enchantements.
Il s’avère que 100% des utilisateurs sont bloqués dès le 1er écran ne sachant pas où cliquer. Par ailleurs, les utilisateurs ne comprennent pas facilement les différents gris des bus. Sur ce point précis, je décide d’attendre le hi fi pour le tester avec des couleurs plus évocatrices. Pour répondre au 1er point, j’ajoute une carte en arrière plan.
Je repare sur un test sur 3 personnes pour voir si ces points sont débloqués. La compréhension de la home page est facilité mais les utilisateurs ne cliquent pas spontanément dessus.
Atomic design
En parallèle, je procède à la définition de l’atomic design de l’application. Cela me sera nécéssaire pour créer le hi fi wireframe. Je défins alors les couleurs, typographie, grid, components, icon.
Hi fi wireframe
Je créé le hi fi wireframe sur Sketch. Afin de répondre au pain point: clic sur la home page, j’ajoute un symbole “doigt” pour inciter au clic sur la home page. Je colore les bus en orange et rouge lorsqu’ils rencontrent un probleme sur leur trafic.
Test d’usabilité
Je procède à un test d’usabilité auprès de 4 personnes. Ce test s’articule autour de 2 parties : la première en navigation non guidée pour observer les comportements avec pour support un scénario à suivre. La 2ème partie, je reviens sur chaque écran pour comprendre plus en détail les points bloquants et enchantements.
Concernant les résultats, 100% des utilisateurs reconnaissent l’utilité de cette fonctionnalité. 75% ne clique pas intuitivement sur la home page. 100% des utilisateurs ne comprend pas le code couleur des bus: ils pensent que cela indique des lignes de bus différents.
Next steps & Learning
La fonctionnalité a reçu des retours positifs quant à son utilité (visibilité, confiance, ludique). Afin de s’assurer de sa bonne visibilité et utilisation, il est nécéssaire de l’intégrer dans une partie de l’app plus intuitive. Par ailleurs, il faut revoir la présentation des codes couleurs : avoir les bus de la même couleur pour éviter toute confusion et indiquer l’état du trafic en colorant soit les minutes restantes ou la flèche pour dérouler l’information état du trafic. Bien sûr, il sera important de tester ces évolutions.
Du fait que la RATP fasse partie du quotidien de beaucoup de gens, il est très intéressant et motivant de travailler sur un sujet qui peut avoir un impact positif sur le quotidien des voyageurs.
