UI / UX - Indigo Weel PROJET FICTIF

UI / UX DESIGN GOULVEN HELLO CVP 2B

UNITÉ 39

UI / UX DESIGN GOULVEN HELLO CVP 2B

TÂCHE 1

SOMMAIRE

TÂCHE 2

TÂCHE 3

mise en situations

UI / UX DESIGN GOULVEN HELLO CVP 2B

TÂCHE 1

UI / UX DESIGN GOULVEN HELLO CVP 2B

TÂCHE 1 : CARTE HEURISTIQUE

UI / UX DESIGN GOULVEN HELLO CVP 2B

TÂCHE 2

UI / UX DESIGN GOULVEN HELLO CVP 2B

TÂCHE 2

• Caractère trop petit sur certaine rubrique donc pas lisible pour les personnes agées.

• Le Bouton «Signalez un problème» ne correspond pas au symbole (on pense + à un «Paramètre»).

UI / UX DESIGN GOULVEN HELLO CVP 2B

TÂCHE 2

• La page est illisible avec le texte, qui est en superposition avec l’image.

• On ne comprend pas la page du «Barème» dans l’application.

UI / UX DESIGN GOULVEN HELLO CVP 2B

TÂCHE 2

• Les Boutons sont similaires quand on va sur la rubrique «Mon compte».

• Les Boutons emènent vers le même endroits qui est de «rajouter des crédits».

UI / UX DESIGN GOULVEN HELLO CVP 2B

TÂCHE 2 : COMPARAISON AVEC «PONY

BIKE»

• Explication des utilisations du vélo avant et après l’usage.

• Couleurs trop vif - fluo (image en haut à doite) donc pas lisible.

• Les boutons correspond bien aux différents rubriques ( ? = un problème ; P = stationnement… ).

• Il n’y a pas de page mon compte pour mettre des informations personnels.

• CLOCHE = page web en erreur 404 et on ne sait pas à quoi ça sert ( Notification - Web… ) …

UI / UX DESIGN GOULVEN HELLO CVP 2B

TÂCHE 3

UI / UX DESIGN GOULVEN HELLO CVP 2B

TÂCHE 3 : MODE NOCTURNE

Tout d’abord, j’ai créé une nouvelle fonctionnalité qui n’existe pas sur l’application Indigo Weel qui est «Mode Nocturne». J’ai créé cette fonctionnalité, car la nuit même si on met notre luminosité forte ou faible sur notre portable, quand c’est sur le mode Normal, on peut vite nous abîmé nos yeux et c’est pour ça que j’ai créé une version Nocturne pour la Nuit ou même juste pour le design si la personne préfére en mode Nocturne que en mode Normale. Je me suis inspiré des nouvelles fonctionnalité qu’on peut remarqué sur le site Youtube (Thème Foncé) ou encore Twitch et pleins d’autres sites et applications. Pour activé le Mode Nocturne, on appuie sur la lune en bas à droite au dessus de l’icône «Signaler un problème».

UI / UX DESIGN GOULVEN HELLO CVP 2B

TÂCHE 3 : INVITÉ DES AMIS

AVANT la modification de cette page.

MAINTENANT, nouvelle page.

Pour cette fonctionnalité, j’ai changé la page «Inviter des amis», car dans la Tâche 2, j’avais remarqué que cette page avait quelque problème comme par exemple, le texte qui empiète sur l’image et c’est ilisible pour les personnes qui voudraientt lire le debut de ce texte. Pour changer cet page, j’ai utilisé le logiciel Adobe XD, et j’ai réalisé une page assez sobre pour pas que les changent si perde dans cette page d’«Inviter des amis» et avec en arrière-plan, les couleurs du logo en dédradé pour rajouté du mouvement et de la modernité sur cet page. Puis j’ai mis le texte en bleu avec en arrière un bloc blanc en opacité pour encore faire ressortir le texte (qui était réel problème avant). Et pour finir le bouton en bleu avec le texte en blanc pour contraster avec le fond sur la page. Puis en haut de la composition, le titre «Iniviter des amis» pour que les gens ne si perdent pas.

UI / UX DESIGN GOULVEN HELLO CVP 2B

TÂCHE 3 : AUTRES MODIFICATIONS PAGE D’OUVERTURE :

AVANT

APRÈS

Page d’ouverture de l’application, où j’ai changé la couleur blanc par un dégradé des couleurs du logo Indigo Weel pour que ça soit plus coloré et moderne.

NOUVELLES ICÔNES :

J’ai réalisé les icônes sur Illustrator, pour la page d’accueil avec carte, on peut retrouver plusieurs icônes (Recherche - Menu - Signaler un problème - Refresh - Position - ou encore Mode Nocturne avec la lune). Et par le suite le bouton de retour et la croix pour fermé une page. Chaque icônes s’activent quand on appuie dessus et quand on réappuie dessus, il se désactive (l’effet RETOUR).

UI / UX DESIGN GOULVEN HELLO CVP 2B

MISE EN SITUATIONS

UI / UX DESIGN GOULVEN HELLO CVP 2B

MISE EN SITUATIONS

UI / UX DESIGN GOULVEN HELLO CVP 2B

LIEN POUR LE PROTOTYPE DE L’APPLICATION INDIGO WEEL : https://xd.adobe.com/view/273dc49d-55fa-4a48-7424-c3ca6f782b76-510c/?fullscreen