Le projet en quelques mots …
Titre du projet : UX Design
Client : Tavern
Contexte : Participer à l’élaboration d’un produit depuis son commencement en équipe
Besoin : Organisation du projet simple, étude de la cible et maquette de l’application
Rôle dans le projet : Ux designer & Cheffe de projet
Démarche projet : Prendre le besoin – Etablir la vision projet – Mettre en place le processus de création UX design – Découper et mettre en place les différentes phrases du projet
Livrable : Organisation du projet sur GitLab et de la communication interne – Création des persona, des parcours client, de la logique des fonctionnalités, des wireframes puis du design système
Avertissement : L’application est toujours en cours de réalisation. Cet article est susceptible d’évoluer selon les avancées. Sont expliqués seulement certains points clés du projet.
Savoir transformer l’idée d’un soir en un projet durable
Un peu de contexte
Vous connaissez ce genre de projet qui s’offre à vous lors d’une discussion entre passionnés ? Les écouter discuter, adhérer aux idées, puis voguer au grès de la créativité. Ces moments où l’engouement bat son plein, et où il est aisé de discuter. Ce projet est arrivé comme ça : « Ah et tu es UX designer, tu pourrais nous aider ? Et en plus, tu pourrais gérer le projet histoire de nous donner un cadre. Cela nous éviterai de chercher quelqu’un. De plus tu as fait un très bon boulot avec X ». Ils ont les moyens de mettre en place leur idée, et leur étude de marché est réalisée. Qui sont-ils ? Des développeurs passionnés souhaitant faire évoluer un autre business autour d’une application de rencontre.
missions et attentes
En dehors de l’aspect multi-casquette, il est important de bien de limiter le chantier d’application. Cela permet à chacun de prendre conscience des objectifs et enjeux de manière collective et individuelle. Pour ma part, il est attendu :
- Découper et organiser l’ensemble du projet sur GitLab ;
- Mettre en place un moyen de communication asynchrone efficace ;
- Apprendre à connaître les utilisateurs ;
- Mettre en place un groupe d’utilisateur régulier et d’autres plus ponctuels ;
- Restituer l’ensemble des informations de découvert, d’analyse et d’idéation (feedback utilisateur, personas, parcours client, données analytiques, interviews, etc) ;
- Designer un prototype réalisable à court terme puis un pour le long terme (Adobe XD) ;
- Sensibiliser au processus d’UX design (n+1 minimum par rapport aux développeurs) ;
- Contrôler la qualité des composants et des écrans avec l’équipe.
Collaborer avec des utilisateurs sur différents niveaux de l’application
Lorsqu’un projet commence en UX design, j’aime avoir une phase de brainstorming juste avant de commencer le concept en tant que tel. Cela me permet de coucher toutes les idées qui se sont nichées dans un coin du cerveau. D’une part cela permet de laver son cerveau de toutes idées avant même de commencer. D’autre part, revenir sur les idées de départ permet de déconstruire les biais d’affirmations.
C’est à partir de maintenant que la phase de « découverte » commence : étude de la cible sur son terrain favoris (bar à jeux généralement), interviews des partis-prenantes, récoler des données analytiques, établir un benchmark comparatif, et une analyse de la concurrence. Cette phase de découverte est effectuée en groupe pour mieux connaître la cible et commencer la phase d’ « analyse ».
Restituer et analyser les informations
La restitution et l’analyse des données récoltées s’effectue sous diverses formes :
- Personas
- Carte d’empathie
- Carte d’expérience
- Carte du parcours utilisateur
- Récupération les données du questionnaire en ligne
- Restitution des interviews utilisateurs
Mettre en place les groupes d’utilisateurs
L’idée est de sélectionner des utilisateurs représentatifs des analyses faites jusqu’à maintenant. Il existe donc plusieurs groupes d’utilisateur de 10 personnes chacun qui interviendront à différents niveaux du projet :
- Les utilisateurs aléatoires ;
- Les utilisateurs systématiques ;
- Les utilisateurs stratifiés ;
- Les utilisateurs de convenance ;
- Les utilisateurs extrêmes.
Des focus group sont organisés afin d’obtenir régulièrement des informations aux moments clés de l’application. Cela concerne les phases de test à chaque version de l’application.
Transformer l’idée en ressource
De nombreuses idées sont communiquées tout le long du projet. Il est intéressant de les conserver car certaines peuvent débloquer quelques situations à différents stades du projet. Ces idées concernent autant l’UX design, que la communication ou encore le développement. Cela se produit essentiellement en workshop d’idéation en groupe lors de la phase d’idéation.
C’est pourquoi je mets un trait d’honneur à les conserver et les énumérer au moment opportun. Des idées seront peut-être jamais énumérée, d’autres oui puis reclassées, et encore d’autres arriveront au bout moment.
Optimiser le temps pour le prototypage et la création de page
Créer des wireframes de qualités
Par « qualité », j’entends à « haute valeur ajoutée » : ces wireframes seront implémentés aux stories des développeurs dans la logique de gestion de projet.
Ces wireframes permettent d’avoir une vision plus matérialisée de l’application et la fidélité des éléments est nécessaire afin de donner du sens au développement des fonctionnalités. De plus, cela permet de constater les éventuels changements à élaborer dans une fonctionnalité. Ces écrans sous forme de wireframes permettent de tester en interne les fonctionnalités et de dérisquer davantage l’application.
Mettre en place un design system avec des développeurs front-end
Le design system et son déploiement sont effectués parallèlement. Les développeurs et moi-même avons opté pour une technologie favorisant le contrôle qualité des écrans produits et la construction d’écran à partir de wireframes. Cela permet d’éviter de passer par des longues phases de maquettage et de tester plus rapidement des fonctionnalités en interne.
Le fait d’utiliser ReactJS permet à mes éléments d’être plus optimisés. De plus, cela permet de parler à peu près le même langage avec les développeurs lorsqu’il s’agit d’esthétisme.
Organiser un projet avec plusieurs casquettes
Etablir la vision du projet et ses fonctionnalités avec une réunion de lancement
Il est nécessaire d’affirmer la vision du projet, que ce soit pour l’équipe et pour définir la notion du fini. Un temps dédié est mis en place dès le début de notre collaboration. Chaque parti du projet s’exprime sur sa vision et il est possible d’assembler divers avis. La dicussion s’effectue autour d’un tableau blanc pour les phases de brainstorming et d’un tableau virtuel collaboratif pour les idées validées.
Un récapitulatif des fonctionnalités est alors mis en place. Cela détremine les différentes versions de l’aplication et des fonctionnalités. Pour visualiser les efforts globaux, nous avons réaliser un business model canvas. Versionné et mis à jour tout au long du projet, il permet de maintenir un même niveau d’information globalement.
Les visions communes sont établies sur le court, moyen et long terme. Elles sont revisitées à intervalles régulières afin de garder la même vision commune. Evidemment, les objectifs individuels sont formulés et pris en compte. Le tout est résumé avec des objectifs SMART.
Planifier un projet pour des passionnés
L’ensemble du projet s’articule sur l’outil GitLab. Cela permet de documenter le projet grâce au wiki intégré puis de découper le projet sur le board. C’est ainsi que la vision macro et micro du projet commence à se matérialiser :
- Epics par fonctionnalité : permet de savoir sur quelle partie du projet la personne travaille et de connaître la progression de la fonctionnalité. Chaque épic a ses stories attribuées ;
- Story sur chaque épic : ce découpage plus fin permet à chaque membre de l’équipe de se focaliser sur une tâche en particulier et de rester dans la productivité désirée. Chaque story à son Epic attribué.
Lors qu’une story est finie, elle est ensuite cochée dans son épic de référence. A savoir que chaque story et épic ont un template définit afin de garder une communication optimale :
- Une story est composé de : son contexte, de la story, et de son épic de référence ;
- Un épic est composé de : son contexte, de son objectif global, de ses fonctionnalités, des champs attribués (si formulaire), de ses stories.
Le tout sans oublier le remplissage des fonctionnalités de base (attribution, temps, etc). Etant dans une communication asynchrone, le GitLab est relié au Discord. Cela permet de suivre plus aisément la progression de chaque personne. Cela permet d’anticiper sur les tâches interdépendantes, puis de basculer sur une autre tâche en attendant.
