Etant UX designer web et mobile mais pas seulement, je suis également User experience architect. Car j’aime ce qui me challenge, et j’accompagne également tout types de projets : poignée de porte, machine à café, bâtiments etc ..
Je vais donc vous présenter les outils que j’utilise pour mener à bien le coté UX / Ui design web et mobile :
1 – Ipad + note : on commence par le début, je privilégie l’iPad car l’experience utilisateur de mes clients est augmentées par le fait de ne pas avoir un dos d’ordinateur en face d’eux. C’est tout de meme plus élégant de prendre des notes plutôt que de tapper sur son ordinateur. Je collecte toutes les infos nécessaires et je pose des milliards de questions, je fais des schémas afin d’avoir un visuel de l’architecture du futur projet. Je définis les points bloquants et les problématiques.
2 – Miro : Je mets au propre mes note dans Miro : encore une fois il me faut du visuel, je peux faire du mind mapping, importer des liens ou des photos etc .. Je fais également une recherche de concurrence afin de m’imprégner du secteur.
3 – Smartphone (+ iPad, note et Miro) : Je retourne dans l’entreprise, et je me sers de mon smartphone pour prendre des photos, je prends des notes et j’interroge différents intervenants au sein de l’entreprise, en ayant préparé au préalable les points obscures tout particulièrement. (tout le monde ! développeurs, marketeux, vendeurs, clients, SAV etc ..)
Je continu, smartphone à la main pour filmer / enregistrer / prendre en photo, mais cette fois je vais à la rencontre des cibles du projet afin de définir leurs besoins, les points de frustrations et autre.
(Le tout est régulièrement mis au propre dans Miro qui me suit dans tout mon process finalement, un mood board qui s’agrémente au fur et à mesure.)
4 – Pinterest : Après avoir compilé toutes ces datas, j’utilise Pinterest afin de regrouper toutes mes inspirations visuels et autre pour le projet.
=> A ce stade, j’ai donc les informations du projet avec les attentes, une vision sur la concurrence, différentes photos et enregistrements de l’entreprise et des cibles avec leurs attentes et problématiques, des visuels qui me servent de base d’inspiration.
5 – Slack : Je met en place un outil de communication interne / externe afin de faciliter les échanges ( en créant des channels spécifiques selon le scope)
6 – Trello (ou / + Jira) : Trello marche très bien avec un modèle de tableau type, un Trello commun pour l’ensemble des stackholders afin de centraliser l’informations.
7 – Dropbox : Un repertoire partagé afin de centraliser les ressources.
=> Les principaux outils d’interactions et de partage sont mis en place, en définissant clairement les roles de chacun. (selon les entreprises c’est google drive, Jira, teams etc ..). Partage de Pinterest + Trello + dropbox + slack + Miro avec l’ensemble des intervenants, ce qui pose des bases de transparence et de compréhension/
8 – Procreate (+ Miro) : je crée mes personas et défini les users journey (grace au mind mapping).
9 – Axure ou Adobe XD ou Procreate : selon le projet j’utilise l’outil qui me convient le plus et je débute mes wireframing afin de définir le zoning de mes éléments. (comme j’ai pu le dire dans un précédent article, j’ai essayé de nombreuses fois à faire des users tests à ce stade mais sans succès, le manque d’éléments visuels bloque les retours pertinents, j’implique les stakholders dans le process.
=> La phase de sprint débute : des réunions hebdomadaires sont planifiées afin de debriefer régulièrement les avancés du projet, collecter les ressentis de chacun et bien d’autres sujets. Tous les matins, une légère réunion afin de définir les objectifs du jours et debriefer le jours précédent. (avec tous le monde ! Développeurs, marketeux, UI designer etc ..)
Un diagram de Gant simplifié peut se mettre en place afin d’organiser la road map.
10 – Adobe XD : je m’adapte à l’entreprise si elle utilise Sketch APP ou Figma mais j’ai une préférence pour Adobe XD qui me permet de faire très rapidement du prototyping, définir quelques micro interactions, partager avec mes développeurs (qui remplace avantageusement Zeplin), me permet d’interagir avec les stackholders (vu qu’ils peuvent noter le design, ce qui remplace Invision) et créer pour le coup des maquettes interactives. (il manque le versioning et le travail collaboratif mais ça arrive)
Donc je peux commencer mon design system (j’apprécie tout particulièrement l’atomic design) . Avoir des connaissances en HTML et CSS me permet d’organiser mes calques et les nommer développeur’s friendly.
J’évite (encore une fois selon le projet) de créer trop de « règles » ou d’utiliser des templates afin de ne pas brider ma créativité.
(Non les designers ne doivent pas forcément savoir coder mais ils doivent comprendre ce qu’ils design !)
11 – Google form : je prépare mes AB testings (eye tracking selon les moyens de l’entreprise), je crée des formulaires afin de recueillir le maximum d’informations, je film, je note, j’enregistre, je prépare mes scenarios etc… Je réalise donc ces AB testings en guérilla test en interne ou idéalement avec un panel ciblé. C’est grace aux maquettes interactives et durant tous le développement de l’UI que je réalise des tests avec l’UI designer (ou les).
=> Les artboards validés partent en prod, les développeurs définissent les points bloquants, attribuent des points de dev selon la complexité.
12 – Hotjar : régulièrement, les maquettes développées sont soumis à des tests utilisateurs sur Hotjar + AB testings afin de continuellement corriger, adapter, peaufiner.
Voici donc mes outils et leurs usages. Je vous passe volontairement certaines phases qui dépendent grandement du projet, de l’entreprise et autre. Il est nécessaire de s’entretenir régulièrement avec les copyrighter, SEO, marketeux, photographes, C-Suite, Community manager et bien d’autres.
Que ce soit pour un projet de renouvellement, de création, de lancement produit, il est nécessaire de soigner son marketing, son discours, la partie technique, la logistique. J’apprécie avoir un oeil sur l’ensemble afin de créer une expérience utilisateur de la marque cohérente et optimisé.
