Indigo Weel by Lucie Milcent

UI & UX design

Lucie Milcent // CVP 2B

le design au service de lâ&#x20AC;&#x2122;utilisateur

TĂ˘che 1 1 // Carte heuristique

2 // Personnas

carte heuristique La carte heuristique sert à analyser les différentes fonctionnalités de l’application.

PERSONNAS Afin de mieux cibler les utilisateurs type de l’application j’ai créé trois personnas. J’ai choisi de créer trois utilisateurs très différents pour couvrir une plus grande partie de la population.

Laura letellier Âge : 17 ans Métier : Lycéenne Situation : Célibataire Ville : Angers Caractéristique : Indépendante Laura est en classe de terminale et passe le bac cette année. Elle est assez assidue à l’école et révise beaucoup pour le bac. Malgré tout, elle ne peut pas rester seule très longtemps et la compagnie de ses amis lui manque rapidement. Elle aime les voir pour réviser, pour se ballader, faire les boutiques dans le centre ville ou encore pour faire la fête. Laura vit chez ses parents à Angers, non loin du centre ville. Elle est très indépendante et aime se débrouiller par elle même.

« Jamais sans mes amis ! »

Attentes

Objectifs - Pouvoir aller voir ses amis à tout moment - Être autonome et ne pas avoir besoin de ses parents pour se déplacer - Pouvoir rentrer d’une soirée avec ses amis lorsqu’il n’y plus de bus

Prix FAIBLE

PEU IMPORTE

ÉLEVÉ

PEU IMPORTE

ÉLEVÉ

Liberté FAIBLE

Frustrations

Qualité FAIBLE

PEU IMPORTE

- Le prix, pas toujours évident avec l’argent de poche donné par ses parents - Certains de ses amis habitent assez loin d’un parking à vélo

ÉLEVÉ

Simplicité FAIBLE

PEU IMPORTE

ÉLEVÉ

Emma Clément Âge : 35 ans Métier : Maîtresse d’école Situation : Mariée Ville : Bordeaux Caractéristique : Très à l’écoute Emma vit à Bordeaux avec son mari et ses deux enfants de 10 ans et 6 ans. Elle vit dans une petite maison de ville sans jardin. Elle adore les enfants et est maîtresse d’école du CP jusqu’au CM2. Emma est très à l’écoute de ses enfants et veut le meilleur pour eux. N’ayant pas de jardin elle les emmène souvent se ballader après l’école ou faire un pique-nique le week-end. Elle veille à ce que ses enfants soient le plus actifs possibles.

« ma famille avant tout »

Attentes

Objectifs - Emmener ses enfants en ballade le soir après l’école - Aller faire des pique-niques avec toute sa petite famille le week-end - Aller chercher ses enfants à l’école - Permettre à ses enfants de faire une activité physique dès que possible

Prix FAIBLE

PEU IMPORTE

ÉLEVÉ

PEU IMPORTE

ÉLEVÉ

Liberté FAIBLE

Frustrations

Qualité FAIBLE

PEU IMPORTE

- Les vélos ne sont pas forcément facile à utiliser pour des enfants - Pas de possibilité de mettre un siège bébé sur les vélos (afin de continuer à les utiliser si un troisième enfants devait arriver)

ÉLEVÉ

Simplicité FAIBLE

PEU IMPORTE

ÉLEVÉ

Benoit rouget Âge : 27 ans Métier : Développeur web Situation : En couple Ville : Lyon Caractéristique : Soucieux de sa santé et de l’environnement Benoit vit dans le 3ème arrondissement de Lyon dans un appartement de 35m carré avec sa copine et il gagner assez bien sa vie. Il fait très attention à l’environnement ainsi qu’a sa santé. Il va donc au marché toutes les semaines afin d’acheter des produits frais et il souhaite faire du sport. Malheureusement, son emploie de développeur web ne lui laisse pas assez de temps pour aller à la salle de sport et son appartement est trop petit pour y mettre des machines.

« Je veux préserver ma santé »

Attentes

Objectifs - Aller au travail afin de faire une activité physique tous les jours et de réduire ses missions de CO2 - Aller au marché s’acheter des produits frais - Faire des ballades avec sa copine - Se déplacer plus vite dans Paris

Prix FAIBLE

PEU IMPORTE

ÉLEVÉ

PEU IMPORTE

ÉLEVÉ

Liberté FAIBLE

Frustrations

Qualité FAIBLE

PEU IMPORTE

- Pas toujours évident de trouver des vélos disponibles à Lyon - Déposer son vélo en arrivant au travail et être sûr d’en retrouver un le soir pour rentrer

ÉLEVÉ

Simplicité FAIBLE

PEU IMPORTE

ÉLEVÉ

Tâche 2 1 // Problèmes d’UX

2 // Devis

Problèmes d’ux En parcourant l’application j’ai remarqué plusieurs fonctionnalités donc l’UX n’est pas optimale et pourrait être améliorée.

1/ Mon Barème La fonctionnalité «mon barème» est une fonctionnalité très intéressante dans l’application Indigo Weel. En effet, elle permet d’acquérir des points en utilisant l’application. Les points servent ensuite à gagner des cadeaux ou des crédits pour des prochaines courses. Il existe également un système de pénalités qui retire des points. Je n’ai pas trouvé de fonctionnalités équivalente dans d’autres applications, je pense qu’il s’agit d’un force pour l’application afin se démarquer. Le problème de cette fonctionnalité est qu’elle n’est pas compréhensible. Aucune indication ne permet de comprendre que le chiffre affiché correspond à des points. Le design laisse plus penser à un compteur de vitesse. De plus, les manières de gagner des points ou d’en perdre ne sont pas clairement expliquées ou illustrées ainsi que le but de gagner ces points.

2/ Profil La partie profil permet d’acheter des crédits, de consulter ses données personnelles et de consulter des données comme la durée totale d’utilisation du vélo, les émissions de CO2 évitées ou encore les calories brûlées. Je trouve que ces information sont intéressantes mais pas mises en valeur. Dans un premier temps les données personnelles sont accessibles lorsqu’on clique sur la photo de profil, hors ce n’est pas très intuitif. Les différents boutons liés au crédit amènent à la même page, peut-être qu’il n’est pas nécessaire d’en avoir plusieurs dans ce cas. Enfin, les informations qui se trouvent en bas du profil sont très intéressantes pour l’utilisateur de l’application mais pas assez clairs ni détaillées.

A titre de comparaison, la partie profil sur l’application Pony Bike, concurrent direct d’Indigo Weel est beaucoup plus claire. On y trouve directement le nombre de trajets effectués, la vitesse moyenne atteinte et la distance parcourue. Enfin, il n’y a que quatres rubriques ce qui rend la fonctionnalités claire, ainsi qu’un accès direct et clair aux données personnelles.

3/ Recherche La fonction recherche de l’application sert à localiser un vélo. Cette fonctionnalité n’est pas optimisée pour plusieurs raisons. Premièrement on remarque un beug au niveau de la localisation, le texte se chevauche et rend la lisibilité plus compliquée. Deuxièmement, on a envie de cliquer sur «ma localisation» hors cette action n’est pas possible et ne ramène pas à la carte par exemple. Ensuite, la barre de recherche est trop fine et n’est donc pas évidente à utiliser. De plus, l’historique n’est pas très clair, pas assez séparé du reste et il faut comprendre qu’il s’agit de l’historique de recherche. Enfin, la fonction «Nettoyer» qui sert à vider l’historique n’est pas évidente, on pourrait penser qu’elle sert à nettoyer le vélo par exemple.

Heetch

À contrario, des applications comme Heetch ou Deliveroo mettent en avant leur historique. On remarque sur l’application Heetch que l’historique se détache très bien du reste, il est clairement indiqué qu’il s’agit des recherches récentes. Sur l’application Deliveroo on a accès au statut de la commande, à un récapitulatif et à une photo pour mieux visualiser l’historique des commandes. D’une manière générale l’historique de l’application Indigo Weel n’est pas mis en valeur, un peu trop simple et pas intuitif.

Deliveroo

4/ Notifications Les notifications de l’application Indigo Weel arrivent sous forme de bannière. Ces bannières permettent de ne pas gêner l’utilisateur mais en contre-partie, elles ne sont pas très visibles. Il s’agit d’un simple texte et de manière automatique j’appuie sur la croix (qui est presque plus visible que le texte) et je ne lis pas la notification.

Sur l’application du concurrent Pony Bike, les notifications sont des écrans complets, très colorés avec une photo, différentes typographies etc. Il est donc impossible de louper l’information. De plus, la notification est composée de plusieurs boutons afin de laisser le choix à l’utilisateur d’accéder à différentes fonctionnalités.

Devis Devis n° 2018111500 Fait à ANGERS le 15/11/2018

LUCIE MILCENT 12 impasse des Lilas 49100 ANGERS

Client : INDIGO MOBILITÉS

06 01 02 03 04 contact@luciemilcent.yo SIRET 00001234567890

Immeuble Île de France - Bâtiment A 4 pl de la Pyramide 92800 PUTEAUX France

REFONTE UI/UX DE L’APPLICATION INDIGO WEEL Refonte UI/UX de deux fonctionnalités de l’application INDIGO Weel en respectant la charte graphique pré-établie pour l’application. Création d’une animation de transition pour ces deux fonctionnalités. Création d’une nouvelle fonctionnalité pour l’application, en accord avec la charte graphique. Création de trois personnas afin de mieux cibler la clientèle type de l’application. Cession des droits d’exploitation incluse sans limite géographique, ni de temps et sur tous supports. Total Brut TVA Net à Payer

2100 € 0% 2100€

Montant à reverser : 2100 € TVA non applicable, article 293B du Code Général des Impôts

Ce devis est valable jusqu’au 15 Décembre 2018 La facture correspondante sera payable sous 30 jours L’acceptation du devis donnera lieu à un acompte de 30%

Signature du client

Tâche 3 1 // Nouvelle interface d’une première fonctionnalité

2 // Nouvelle interface d’une deuxième fonctionnalité

Nouvelle interface // 1 Suite aux problèmes d’UX que j’ai relevé dans la tâche 2, j’ai choisi de créer une nouvelle interface pour les notifications. Les principaux problèmes que j’avais relevé étaient notamment son manque de visibilité et son manque d’interactions avec l’utilisateur. Voici le lien pour accéder à mon prototype : https://xd.adobe.com/view/8bfd9f7c-7bc9-4aaf-53ab99fba839fe59-fdcc/

Dans cette nouvelle interface, lorsqu’une notification apparaît, elle prend tout l’écran et propose trois interactions avec l’utilisateur. Le fond est légèrement transparent et laisse voir la carte en dessous pour que l’utilisateur comprenne qu’il n’est pas sur une autre page mais qu’il s’agit bel et bien d’une notification pop-up. Lorsque la notification apparaît, l’utilisateur peut tout de suite identifier de quoi parle la notification grâce au pictogramme. Ensuite, un texte lui explique de quoi il s’agit et comment bénéficier de l’offre proposée.

1 // L’utilisateur peut cliquer sur le bouton le plus à gauche, le moins visible des deux. Ce bouton indique que l’utilisateur à pris en compte la notification mais n’est pas intéressé. En cliquant sur ce bouton, l’utilisateur reviens sur la carte.

2 // L’utilisateur peut cliquer sur le bouton le plus à droite (bouton le plus accessible pour les droitiers, qui représentent la majorité de la population) et accéder à l’écran suivant qui lui permet de rentrer sa carte pour bénéficier de l’offre.

3 // L’utilisateur peut cliquer sur la croix. En cliquant sur la croix, l’utilisateur indique qu’il n’a pas pris en compte la notification. Et il revient sur la carte. Chercher la croix et cliquer dessus est le réflexe de base d’un utilisateur qui ne souhaite pas interagir avec une notification, une information etc. Même si le bouton «Ok» et la croix mènent au même endroit, j’ai quand même voulu donner la possibilité à l’utilisateur de cliquer sur une croix pour lui laisser le choix de ne pas prendre en compte la notification, et pour qu’il ne panique pas à l’idée de cliquer sur «Ok» (qui est une forme d’acquiescement avec ce qui est dit plus haut).

Nouvelle interface // 2 La deuxième fonctionnalité que j’ai voulu re-designer n’était pas dans les problèmes d’UX que j’ai relevé dans la tache 2 mais présente selon moi de gros problèmes d’UI. J’ai voulu créer une nouvelle interface pour cette fonctionnalité, plus design. De plus, cela me permettait de créer une continuité dans mon prototype et des transitions intéressantes.

Fonctionnalité Ajouter un moyen de paiement actuellement existant dans l’application

La principale différence avec l’interface existante est que l’on peut enregistrer directement les informations de carte, d’un point de vue de l’UX cela permet de retirer un clic et d’être plus efficace. D’un point de vu de l’UI, le fait d’ajouter des couleurs permet à l’utilisateur de mieux comprendre les espaces avec lesquels il peut interagir. Enfin, l’utilisation du même pictogramme que sur la notification permet de créer une suite et que l’utilisateur comprenne qu’il a été renvoyé au même endroit.

Le bouton «Enregistrer ma carte» est en blanc tant que l’utilisateur n’a pas accepté les conditions générales. Une fois que la case est cochée, le bouton change de couleur et indique à l’utilisateur qu’il peut cliquer dessus. Cela évite que l’utilisateur oublie de cocher cette case et ne comprenne pas pourquoi il ne peut pas enregistrer sa carte.

Tâche 4 1 // Animation d’une des nouvelles interfaces

2 // Création d’une nouvelle fonctionnalité

Animation de l’interface J’ai choisis d’animer l’apparition de l’interface pour entrer sa carte bancaire.

Une fois que l’utilisateur clique sur «Renseigner sa carte» une animation apparait. Le pictogramme et le bouton «Enregistrer sa carte» apparaissent. Puis ils s’écartent et les différents champs à remplir apparaissent à leur tour.

Nouvelle Fonctionnalité Enfin, j’ai créer une nouvelle fonctionnalité pour l’application. Noël approchant à grand pas, j’ai voulu créer une fonctionnalité spéciale pour les fêtes de fin d’année. Le principe est simple, grâce au barème déjà présent dans l’application, il est possible de cumuler des points en utilisant les vélos. Mon idée est de permettre aux utilisateurs de l’application d’utiliser ces points afin de faire une bonne action. Une fois 150 points atteint, l’utilisateur peut décider de donner ces points et de les convertir en un vélo qui sera offert à une personne en difficulté pour se déplacer et n’ayant pas assez d’argent pour avoir une voiture ou une carte de bus. Pour les gens ayant vraiment envie de participer à cette opération de noël mais n’ayant pas la possibilité d’utiliser le vélo pour atteindre les 150 points, la fonctionnalité permet également de faire un don.

Lorsque l’utilisateur clic sur le menu burger, il découvre qu’un nouveau bandeau a fait son apparition. Le bandeau est bien visible car très coloré et avec un dégradé. Ces couleurs donnent envie de cliquer sur le bandeau. J’y ai mis un picto de cadeau pour que les gens l’associent tout de suite à un don ou une offre.

En cliquant sur le bandeau, l’utilisateur arrive sur une page colorée où se trouve un sapin de noël et des cadeaux, cela permet de comprendre tout de suite que l’opération est en rapport avec noël. On retrouve aussi un petit texte expliquant en quelques lignes l’offre. À ce stade l’utilisateur a deux choix, cliquer sur la croix, ce qui le ramène au menu burger, ou bien il décide de cliquer sur «Comment ça marche ?» afin d’en apprendre plus sur l’opération. Ce bouton renvoie l’utilisateur sur une autre page qui lui explique plus en détail comment fonctionne l’opération. Il peut interagir de trois manières avec cette interface.

1 // Il peut directement faire un don, dans ce cas présent l’utilisateur n’a pas renseigné sa carte bancaire et le bouton «faire un don» le ramène sur la fonctionnalité «renseigner sa carte» dont j’ai refais l’interface précédemment.

2 // Il peut également accéder à son barème et voir combien il cumule de points. En fonction des points déjà cumulés, il peut, si il a atteint 150 points ou plus, directement participer à l’opération, ou bien continuer a utiliser les vélos Indigo Weel afin d’obtenir plus de points. Le bouton «accéder à mon barème» est plus visible que celui qui permet de faire un don car le but de cette opération et de faire utiliser le vélo aux gens et le don doit être la solution numéro deux pour participer à l’opération.

3 // Si malgré les explications l’utilisateur n’est pas intéressé et ne souhaite pas participer, il peut cliquer sur la croix et revenir au menu burger.