Projet #7
Prototypez une
‍
application mobile

Enjeux

Répondre à la difficulté d'accès
à l'information musicale • Récolter
des retours utilisateurs • Itérer &
répondre aux besoins utilisateurs

Méthodologie

Recherches et Brainstorming • Arborescence et user flow • Maquettes fonctionnelles (Wireframes) et tests • Assets graphique • Prototype et tests

Compétences

Conception • UX • Wireframing • UI •
Maquettes • Prototype et test

l'application
TRIVIA MUSIC CLUB

Cette application propose des découvertes et des informations musicale,
et ce à travers 5 éléments différents :
‍
- la genèse d’une pochette de disque
- l’explication de paroles d’une chanson
- l’histoire d’un album
- un duel entre deux artistes, pour en découvrir un 3eme
- un quizz

L’idée : Faire découvrir de la musique, en passant par son information.
Idéation & problématique
Découvrir et se faire découvrir mutuellement de nouvelles musiques, échanger
des anecdotes sur tel artiste ou tel morceau, une histoire sur tel album ou telles
influences, ... c'est ce que nous adorons avec mon ami Vincent.
‍
Nous avons fait le constat que, autant il existe une multitude d’outils numérique
pour écouter de la musique (des applications comme Spotify ou bien Deezer) ou bien
pour reconnaitre un morceau (Shazam et autres), il n’y en a pas pour découvrir
‍de la musique, et apprendre des histoires autour de celle-ci.
* Moi et Vincent en train de discuter musique
* Dessin original du parcours utilisateur du persona sélectionné

Pour réfléchir sur ce probleme, nous avons d'abord créer un persona chacun, puis nous
avons choisit lequel nous voulions developper en imaginant son parcours utilisateur, pour
voir quelles étaient les différents freins et problemes qu'il pouvait rencontrer...

Ensuite, nous avons fait un Color Run pour trouver de idées et apporter des réponses concretes
aux problemes trouvés. Et enfin, nous avons étudié la concurence afin de savoir ce que l'on
proposait, et ce que l'on pouvait apporter au marché actuel.


Pour résumer : le problème de l’information musicale est l’accessibilité...
- Beaucoup d’outils sont Anglo-Saxon, et donc pas forcement accessible au plus grand nombre.
- Ils sont trop « pointu », s’adressant à des gens qui sont déjà aficionados de la musique.
- Ils concernent uniquement les musiques « actuelles », ancrés dans un style ou une époque.

USER FLOW & WIREFRAMES
J'ai tout d'abord réfléchis à l'User Flow de ma future application, pour bien me rendre
compte des différents chemins, du nombre d'écrans, et de la navigation que j'allais
mettre en place.

Une fois mon user flow fait, j'ai pu commencer à travailler sur les différents écrans,
en réalisant les wireframes...

Dans un premier temps, j'ai simplement dessiner à la main les différents écrans en faisant
un zoning, pour bien comprendre quels éléments j'allais mettre en place et où, la place
qu'ils allaient prendre dans les différents écrans, etc

une fois cette phase achevée, j'ai pu - en utilisant Adobe XD - construire l'application
et les différents écrans en nuances de gris... application que j'ai faite tester à 5 personnes
différentes, certaines ayant l'habitude d'utiliser des applications, d'autres non, pour avoir
un panel le plus large et le plus diversifié possible.

LIEN DES TESTS WIREFRAMES - https://cutt.ly/Hkhb7a7
* User flow de l'application mobile
* Wireframes des écrans de l'application mobile
* Assets graphiques de l'application mobile
ASSETS GRAPHIQUES

À partir de là, et en tenant compte des retours utilisateurs,
j'ai crée les assets graphiques que j'allais utiliser pour l'application,
puis, avec ces éléments, j'ai pu réaliser le prototype en lui-même...

PROTOTYPE
Prototype que j'ai fait tester par les 5 mêmes personnes qui ont testés les wireframes,
pour qu'ils me fasse ainsi des retours sur les différences et sur les améliorations
entre les 2 versions.

LIEN DES TESTS PROTOTYPE - https://cutt.ly/VkVadey

Conclusions

L’atelier de co-création s‘est très bien déroulé, l’idée de l’application est venue assez naturellement.
Connaissant déjà un peu Adobe XD, j’ai simplement du prendre quelques renseignements supplémentaires
(tutoriels, articles) pour être plus à l’aise avec cet outil, et réaliser Wireframes, assets graphique, et prototype.

Ce projet a était sur lequel j'ai pris le plus de plaisir, car se focalisant sur mes parties préférés du métier d'UX :
l'idéation, la recherche, le prototypage, les phases de test.
‍
‍TESTS UTILISATEURS
‍Les phases de tests (Wireframes et prototype) ont montré un accueil très positif des utilisateurs concernant
cette application, son idée générale, et son contenu.

OUTILS UTILISÉS
‍Pour ce projet, j’ai utilisé les outils suivants :
- Adobe XD, pour les Wireframes, et le prototype de l’application.
- Whimsical, pour créer l’user flow de l’application.
- InVision, pour accueillir ma bibliothèque de Wireframes