Rethinking-ux

Repenser pour mieux créer

Rethinking-UX, c'est quoi ?

“ Rethinking User Experience ” (RUX), est un atelier par groupe de quatre étudiants de l’option DWM. Il consiste à améliorer, repenser une fonctionnalité d’un service, d’un site ou une d’une application choisie. Il s’agit d’améliorer une fonctionnalité déjà existante. Nous avions le choix parmi plusieurs services (Twitter, Medium, Uber eats, Pinterest et Whatsapp). Nous avons choisi unanimement de travailler sur Uber Eats.

Photo d'un bureau recouvert de recherches
« Photo d'un bureau recouvert de recherches »

Présentation d'Uber Eats

Uber Eats est un service de livraison de nourriture (fast food, restaurants, boissons, etc…). Lorsque vous ouvrez l'application, vous pouvez parcourir la liste pour trouver des idées, ou bien rechercher un restaurant ou un type de cuisine en particulier. Le service est déjà implanté dans les grandes villes et commence à arriver dans les petites villes.

Les ojectifs du service

L’objectif principal du service est de répondre aux besoins du client, en livrant dans les délais les plus brefs. Pour ce faire, le service permet au client de manger ce qu’il veut, où il veut et quand il veut ! Pour toucher un maximum de personnes, Uber Eats essaye de s’étendre à l’échelle mondiale. Enfin, le service mise énormément sur l’accessibilité. En effet, celui-ci doit pouvoir être utilisable en quelques clics.

screenshot de la homepage d'Uber Eats version mobile

Avantages et inconvénients d'Uber Eats

Les avantages :

photo d'une montre
« Personne qui regarde sa montre »

#01

Commander des produits est rapide et facile d’accès.

Plats divers et varié
« Plats divers et variés »

#02

On peut découvrir des plats venant de restaurants qu’on ne connaît pas forcément.

Seattle, United States, vue aérienne
« Seattle, United States, vue aérienne »

#03

On entre son adresse dès le début afin de savoir quels restaurants sont disponibles jusqu'à cette adresse.

Cliente attendant chez elle
« Cliente attendant chez elle »

#04

Le client n’a pas besoin de se déplacer.

Photo de quelque billets et de pièces
« Photo de quelque billets et de pièces »

#05

La possibilité d’obtenir des codes promotionnels.

Client annulant sa commande
« Client annulant sa commande» 

#06

La possibilité d’annuler la commande (dans un certain délai).

Les inconvénients :

Contre plongée sur l'Atomium - Belgique
« Contre plongée sur l'Atomium - Belgique »

#01

Le service n’est pas très répandu en Belgique.

Compteur de kilomètres
« Compteur de kilomètres »

#02

Le prix des livraisons varie en fonction du lieu.

Payement électronique
« Payement électronique »

#03

Pas de possibilité de payer en espèces.

Cliente comptant son argent
« Cliente comptant son argent »

#04

Pas de possibilité de remboursement si le délai de commande est dépassé.

Le temps qui passe
« Le temps qui passe »

#05

Les horaires de livraison varient en fonction des villes.

Avantages et inconvénients d'Uber Eats

Les avantages :

Les inconvénients :

Les fonctionnalités d'Uber Eats

Compte

Lors de l’ouverture de l'application, on nous offre la possibilité de créer un compte (que l’on pourra plus tard modifier). Une première adresse nous est demandée, il faudra par la suite ajouter un moyen de paiement. Et pour finir, la possibilité de consulter les enseignes ajoutées en favoris.

Recherche de plat

Une barre de recherche est disponible pour pouvoir sélectionner les produits désirés. On peut également découvrir des menus via différentes catégories. Une option de filtres en fonction de différents critères existe également.

Screenshot des catégories d'Uber Eats

Codes, notes, parrainages

En extra, des codes promotionnels sont mis à notre disposition ainsi qu’un code de parrainage. Il est également possible de laisser des pourboires à vos chauffeurs favoris. Un système de note est aussi présent pour évaluer votre livraison.

Screenshot d'un code de parrainage d'Uber Eats

Commande

Une fois que le produit est sélectionné, la commande peut être planifiée. Ensuite, rendez-vous dans le panier pour la valider. On a par la suite la possibilité de suivre en temps réel l’avancement de la livraison.

Le site parfait existe-t-il vraiment ?

Pour le savoir, j’ai réalisé un test utilisateur en vidéo pour déceler les éventuels problèmes que rencontre le site. Comme pour chaque test utilisateur, j’ai donné au testeur une situation pour qu’il effectue une commande sur le site Uber Eats. L’utilisateur a rencontré quelques difficultés lors du choix de sa commande. Celui-ci a eu du mal à trouver ce qu’il désirait et perdait par la même occasion son temps. C’est donc comme ça que j’ai eu l’idée de repenser la fonctionnalité de commande du site ! Je vous invite à visionner le test utilisateur ci-dessous :

Ma fonctionnalité choisie

La fonctionnalité que j’ai décidé de repenser est le système de navigation de commande du site Uber Eats en version desktop. Je trouve que celui-ci manque d’ergonomie et peut être amélioré pour une meilleure expérience d’utilisation. Via cette fonctionnalité, après avoir choisi votre chaîne de restaurant, vous accédez directement au choix de votre menu. Pour choisir celui-ci, deux méthodes s’offrent à l’utilisateur :

  • #01

    Sélectionner les divers produits désirés en cliquant sur l’onglet afin de l’ajouter au panier ;

  • #02

    Naviguer à travers cette même page via une barre de navigation regroupant diverses catégories (Plats les plus populaires, boissons,etc…).

Scroller peu pour trouver mieux

Le problème principal est que la page pour commander ses plats est très longue et possède donc un scroll conséquent. Ce problème nuit à l’expérience de l’utilisateur car celui-ci va devoir chercher sur toute la page pour trouver ce qu’il cherche réellement, et donc perdre un temps précieux. Même si une barre de navigation est disponible, celle-ci reste assez limitée et peu utile. Prenons l’exemple de commande pour McDonald’s, il faut par exemple cliquer sur “ Plus… ” pour trouver les catégories des boissons et des sauces. Bref des catégories importantes peu mise en valeur. C’est donc pourquoi j’ai choisi de repenser la fonctionnalité de navigation pour commander !

Screenshot de la page de commande d'Uber Eats version desktop
« Screenshot de la page de commande d'Uber Eats version desktop »

Quelque pistes

Afin de pouvoir résoudre ce problème, il faudrait des catégories plus pertinentes, les rendre plus visibles pour l’utilisateur, et donc plus utile. Si celles-ci s’avèrent plus efficaces, le scroll peut être également largement réduit. L’action principale de l’utilisateur se fera donc via cette barre de navigation au détriment du scroll, l’utilisateur trouvera donc plus rapidement ce qu’il souhaite, gagnera un temps précieux, et son expérience sera améliorée. Je me suis alors posé cette question: Comment améliorer la navigation ? Je devais la rendre plus intuitive, plus complète et facile d’accès ! Après plusieurs prototypes papier, je me suis dirigé vers des pictogrammes pour rendre la navigation plus intuitive et donc plus agréable.

Wireframe post-it
« Wireframe post-it »

S'inspirer pour repenser

Je suis allé voir Deliveroo, TakeAway, etc… pour m’inspirer et les comparer pour retenir les bonnes idées qu’ils possèdent. Ma priorité est que le client puisse trouver ce qu’il veut et rapidement ! Après de nombreuses recherches, je me suis aussi inspiré sur les bornes que font certains fast food où les clients peuvent directement choisir leur commande. C’est de là que m’est venu l’idée des pictogrammes, car avec un simple coup d’oeil, le client peut trouver la catégorie qu’il souhaite. J’ai aussi pensé à intégrer directement le panier afin de pouvoir visualiser notre commande en temps réel.

Quelques inspirations sur un bureau
« Quelques inspirations sur un bureau »

Ma solution

Comme je l’ai dis ci-dessus, j’ai choisi un système de pictogramme pour repenser ma navigation de commande et donc limiter le scroll. Inutile de me répéter, je pense qu’un prototype sera plus claire et plus concret que de longues phrases. Avant de tester ma version repensée de ma fonctionnalité Uber Eats, je vais vous demander une petite mission ! Celle-ci est très simple, vous avez une petite faim et vous faites attention à votre ligne, donc quoi de meilleur qu’un bon McDonald’s ? Les hamburgers vous tentent mais votre votre conscience l’emporte, vous prenez une salade Caesar avec un Fanta medium. Tout d’abord, vous arrivez sur l’onglet des offres spécials, rendez-vous directement sur l’onglet salade. Sélectionnez la salade Caesar, vous aurez donc accès aux boissons par la suite. Choisissez un Fanta medium, vérifiez votre panier et commandez !

Prototype

Repenser, si facile ?

Repenser une fonctionnalité est une tâche délicate ! Il faut d’abord d’une part trouver une fonctionnalité qui peut être repensée, ce qui n’est pas toujours simple étant débutant dans le web. De plus, il faut repenser la fonctionnalité dans le but d’améliorer, ce qui est compliqué lorsqu’il s’agit de site déjà très bien pensé de base. Selon moi, la meilleure façon de trouver une solution est de faire divers tests utilisateurs, etc… Personnellement c’est ce qui m’a permis d’arriver à ma solution. Cet atelier m’a appris beaucoup de choses, encore une fois en design et en code mais surtout en ergonomie.

La team ?