L'UX pour langage

Quoi ? Prototyper une application mobile.

Pour qui ? Pour tous les UX Designers, experts, juniors, ou simplement intéressés.

Comment ? En effectuant des recherches, un brainstorming, en réalisant des maquettes fonctionnelles, tests, mood boards, maquettes visuelles, assets graphiques, roadmap et en réalisant un MVP en no-code.

Durée ? 3 semaines

Outils utilisés ? Papier/crayon +

Objectifs :

- Prototyper une application mobile
- Répondre à une problématique

Enjeux :

- Créer des ressources UX en français et centralisées
- Récolter des feedbacks
- Itérer & répondre aux besoins utilisateurs

Méthodologie :

- Recherches
- Brainstorming
- Maquette papier
- Arborescence
- Maquette fonctionnelle (wireframes)
- Moodboard
- Assets graphique
- Maquette visuelle
- MVP & prototype (#NoCode)

Skills :

- Conception (Roadmap ici)
- UX
- Wireframing
- UI
- Maquettes (version papier ou version Adobe XD)
- Prototype
- MVP : à télécharger ici

Etude de cas

Problématique

Comment prototyper un guide de l’UX en français sous la forme d’une application mobile ?

Rôle

Mon rôle a été complet pour ce projet, car j’ai du trouver le concept de base de mon application (je ne partais de rien du tout, simplement de la volonté de concevoir une application mobile), puis le faire prendre vie grâce à un prototype fonctionnel.

Méthodologie

Empathie, idéation :

Avant d’entamer quoi que ce soit d’autre, il m’a fallu trouver LA bonne idée. Je ne savais pas quel problème résoudre (pas d’UX design, sans problème à résoudre).

J’ai pensé à plein de choses, remué les méninges dans tous les sens.. Puis, j’ai fini par me concentrer sur l’essentiel de ce qui occupe mes journées : l’UX Design. Mon empathie est devenue automatisée, car j'étais concernée.

Ma bible à moi, c’est le livre de Carine Lallemand, sur les méthodes UX.

Seulement, je ne peux pas (en vrai, je pourrais) l’avoir avec moi partout, tout le temps. Je manquais également de ressources en français, en dehors de ce livre. Quand on débute, on cherche des infos partout, et beaucoup sont en anglais.

Le constat problématique est simple : on veut des ressources en français, et des aides mémoires, des lexiques, des infos, tout au même endroit (et si cet endroit c’est ‘dans notre poche’, c’est encore mieux).

J’ai choisi de peaufiner mon idée de guide UX en français, en brainstorming avec mes camarades apprenants UX. Ensemble, nous avons précisé différents points de mon application. L’arborescence de celle ci, le nom de mon application, les fonctionnalités et le type de contenu ont découlé de cette entretien avec mes confrères. L'application "Assistant UX" est née !


Arborescence sur Overflow :

Conception :

Une fois cette idée précisée et plus complète, je me lance dans un premier jet de conception, un wireframe papier. Cela m’a permis de faire à la fois une arborescence palpable et rapide, ainsi qu’une première maquette, déjà testable. Après quelques heures seulement de travail et de réflexion, chaque écran de mon application étaient étalés sur le papier.

Un petit tour de scan, quelques recadrages et quelques clics plus tard, cette première maquette était prête à être testée, grâce à InVision. Cette V1 m’a permise de valider l’utilité, l’emplacement, la forme des éléments, et les fonctions de base de la version finale. J’ai fait testé la maquette à 5 personnes, et j’ai pu rectifier ce qui n’allait pas grâce aux commentaires que je leur avais demandé de laisser sur InVision.

Une croix s’est transformée en flèche, un pop up a changé de place, quelques énoncés ont été reformulés. Et voici la V2 !

J’ai refait tester, grâce à Maze cette fois, ma seconde version de maquette. Tout semblait rouler, comme sur des roulettes. J’ai alors commencé mes recherches graphiques. InVision Boards est un super outil pour cela. Choix des couleurs, inspirations photos, typographies, interactions… J’ai rangé tout ce que j’ai trouvé sur Pinterest dans ce Board et le résultat était plaisant, satisfaisant à regarder, à présenter.

Mes choix graphiques s’affinaient peu à peu, il était alors temps de passer à la conception de mes assets graphiques. La planche d’assets m’a permise de ne jamais hésiter, car chaque règle était fixée. C’est un gain de temps, dans la finalité. J’ai réalisé un logo, une petite charte graphique, j’avais toutes les clés en main.

J’ouvre Adobe XD (j’adore ce logiciel), et je commence à faire le design de ma V2, qui était interactive, certes, mais pas très jolie à regarder.

J’aime dire que l’UI, sans UX, n’est rien, rien d’autre qu’un maquillage sans cerveau, ce n’est pas attirant.. Mais je pense que la réciproque est vraie… On se doit de donner envie, de rendre sexy les choses si on veut qu’elles soient utilisables, car utiles ! Cercle vertueux…


A ce moment précis, j’aimerais que cette application ne soit pas qu’un fantôme. Une maquette qui ne prend pas vie n’a aucun but. Mais, je ne sais pas coder…

BOUM, je vais utiliser Glide ! Glide ? C’est une site révolutionnaire, qui permet de faire d’un tableau Google Sheet, une véritable application.

C’est très rapide, très efficace, très… impressionnant. Ce MVP est téléchargeable, par un grand nombre d’utilisateurs, et tout ce que je souhaite est réuni. Du contenu, des ressources, dans une application, que j’ai faite alors que je n'étais encore qu’étudiante. Je ne sais pas ou tout cela va me mener, mais je souhaite aller jusqu’au bout avec cette application, l’emmener loin, la concrétiser à un stade avancé !

Scannez le code ou cliquez ici pour télécharger l'application :

Focus

Cette idée est née de constats, comme je le disais plus haut : un manque de ressources centralisées, et un manque de ressources en français, à propos de l’UX.

Mais, pas que.

Pour m’aider à apprendre correctement des expressions, et plein de choses nouvelles que j’ignorais quand j’ai commencé l’UX, j’avais rangé tout cela dans un tableau.

Cependant, en réalité, je n’avais pas assez de contenu. J’ai énormément cherché, énormément écrit de définitions, de tutos, pour réaliser des personas, des services blueprint, et j'en passe. En bref, j’ai énormément appris en faisant face au manque de ressources !

Et j’ai fini par le combler, en cherchant, en lisant, en m’y interessant, je n’ai fait que m’adapter. M’adapter et apprendre.

Ce fut tellement constructif.

Je voulais à tous prix que cette application soit utile, au moins pour mes camarades d’école ! Et si c’était plus, alors tant mieux. Mais ma volonté première, ce qui m’animait vraiment, c’était d’aider.

Conclusion

Ce fut autant une leçon de vie qu’une leçon UX, mais en voulant aider, j’ai tant appris.

J’ai énormément aimé ce projet, je me suis énormément investie. J’ai aimé m’adapter, accepter les critiques qui font avancer le projet à pas de géants et j’espère avoir fait évoluer la maquette dans le bon sens.

Ce qui est sur, c’est que je souhaite concrétiser cette application, faire en sorte qu’elle se retrouve dans les stores d’iOs et d’Androïd ! Je veux voir grand, je sais que ça pourrait aider. Je suis convaincue, je peux argumenter des heures, je résouds des problèmes, j’agis, et j’y crois, alors ça fonctionnera ! Je vous laisse naviguer sur le MVP par vous même, et, l’affaire est à suivre pour l’instant… :)

On travaille ensemble ?

M'écrire sur Linkedincharlottebarbarin3@gmail.com
Fait avec amour ♥ en Bourgogne • Copyright © 2020 Charlotte Barbarin. Tous droits réservés.