TP 4 : Organiser et outiller un projet UX (Trello, maquettage, GitHub)

1. Objectifs

   • Décrire les cinq phases du processus UX appliquées à un projet réel, avec leurs activités et leurs livrables
   • Planifier et suivre un projet UX dans un tableau Trello: listes, étiquettes, cartes, checklists
   • Découper le travail en tâches claires, attribuées et datées
   • Comparer des outils de maquettage avec une grille pondérée et un test pratique, puis justifier un choix
   • Versionner les livrables UX dans un dépôt GitHub: structure, commits, branche, pull request et tag

1. Prérequis

   • Avoir suivi les leçons du chapitre « Le processus UX : vue d'ensemble et outils » : Les cinq phases du processus UX, Organiser un projet UX avec Trello, Panorama des outils de maquettage, Versionner les livrables UX avec Git et GitHub.
   • Connaître les notions de base de Git et de GitHub.
   • Avoir créé (gratuitement) un compte Trello et un compte Figma avant la séance.
   • Aucune programmation n'est demandée : on planifie, on organise, on compare.

1. Présentation du projet

   • Le restaurant universitaire du campus veut remplacer son site internet vieillissant par une application pour téléphone : CantineCampus. Elle devrait permettre aux usagers de :
     • consulter les menus et les allergènes;
     • commander et payer leur repas ;
     • connaître l'affluence;
     • recharger leur carte ;
     • donner leur avis.
   • Le directeur vous confie la conduite UX du projet, que vous mènerez de TP en TP jusqu'à la maquette finale. Avant de rencontrer le moindre usager, il veut un cadre de travail: le plan des cinq phases, un tableau de suivi, le choix des outils de maquettage et un dépôt où chaque livrable sera rangé et daté.
   • Téléchargez l'archive du TP. Elle contient le classeur modeles/grille-projet.xlsx, le modèle de fiche de cadrage (modeles/README-modele.md), un fichier modeles/modele.gitignore et l'écran à reproduire (modeles/ecran-menu-du-jour.png).

• CantineCampus est fictif, mais le tableau Trello, les outils et le dépôt sont réels: vous les utiliserez dans tous les TP suivants du projet.
• Ce TP ne produit encore aucun écran définitif : il prépare le terrain. La recherche utilisateur commence au TP 5, dans le dossier que vous créez aujourd'hui.

1. Organisation du TP

   • Le TP est découpé en huit parties. Chacune indique sa durée, ses notions, ses consignes, une aide, un point de contrôle et des questions.
   • Chaque partie ajoute une pièce à votre fiche de cadrage. Le classeur modeles/grille-projet.xlsx contient les tableaux à remplir ; il calcule les scores, les totaux et les points de contrôle à partir de vos réponses.
   • Trois règles s'appliquent : une carte = un livrable; un outil se choisit sur des critères, pas sur sa réputation ; tout livrable est dans le dépôt.
   • À la fin de chaque partie, enregistrez votre travail sur GitHub : un commit par partie permet de suivre votre progression.

1. Partie 0 : créer le dépôt du projet

⏱ 20 min

Notions mobilisées : Versionner les livrables UX avec Git et GitHub

• Créez sur GitHub un dépôt public ui-ux-design-bts avec un fichier README.md, puis ajoutez votre binôme comme collaborateur (Settings > Collaborators). Ce dépôt vous suivra jusqu'à la fin du module : chaque TP du projet CantineCampus y ajoute son dossier.
• Clonez-le et créez un dossier par phase du processus UX (remplacez VOTRE-COMPTE par votre identifiant) :

git clone https://github.com/VOTRE-COMPTE/ui-ux-design-bts.git
cd ui-ux-design-bts
mkdir -p projet-cantinecampus/00-cadrage projet-cantinecampus/01-explorer projet-cantinecampus/02-definir projet-cantinecampus/03-ideer projet-cantinecampus/04-concevoir projet-cantinecampus/05-tester
for d in projet-cantinecampus/*/; do touch "$d.gitkeep"; done
cp ../tp4-cantinecampus-cadrage/modeles/modele.gitignore .gitignore
cp ../tp4-cantinecampus-cadrage/modeles/README-modele.md projet-cantinecampus/README.md
cp ../tp4-cantinecampus-cadrage/modeles/grille-projet.xlsx projet-cantinecampus/00-cadrage/
git add .
git commit -m "Démarre le TP 4 : structure du projet CantineCampus"
git push

• Adaptez le chemin ../tp4-cantinecampus-cadrage/ à l'endroit où vous avez décompressé l'archive. Complétez ensuite l'onglet « Mode d'emploi » du classeur (noms, liens) et l'en-tête de projet-cantinecampus/README.md: ce fichier deviendra votre fiche de cadrage.

📁 Dans le dossier : la structure du dépôt, le .gitignore et l'en-tête de la fiche de cadrage.

1. Partie 1 : cartographier les cinq phases

⏱ 30 min

Notions mobilisées : Les cinq phases du processus UX

• Dans l'onglet « Phases » du classeur, décrivez chaque phase pour le projet CantineCampus: la question à laquelle elle répond, les activités prévues, les méthodes, le livrable attendu, l'outil principal, la durée estimée et le responsable.
• Recopiez ensuite le tableau, sans la colonne « Méthodes », dans la section 2 de votre fiche de cadrage.

📁 Dans le dossier : l'onglet « Phases » et la section 2 de la fiche de cadrage.

1. Partie 2 : créer le tableau Trello

⏱ 30 min

Notions mobilisées : Organiser un projet UX avec Trello

• Créez un tableau Trello « UX – CantineCampus » et invitez votre binôme.
• Créez cinq listes qui décrivent l'état d'une tâche : Backlog, À faire, En cours, En revue, Terminé.
• Créez six étiquettes de couleur qui décrivent la phase: Exploration, Définition, Idéation, Conception, Test, et Organisation pour les tâches de gestion du projet.
• Dans la description du tableau, écrivez les règles de l'équipe : une carte = un livrable ; pas plus de deux cartes « En cours » par personne ; une carte passe par « En revue » avant « Terminé » ; le lien du livrable GitHub est joint à la carte.

📁 Dans le dossier : le lien du tableau dans la section 3 de la fiche de cadrage.

1. Partie 3 : découper le travail en cartes

⏱ 30 min

Notions mobilisées : Organiser un projet UX avec Trello · Les cinq phases du processus UX

• À partir de vos activités de la partie 1, créez au moins 12 cartes dans le Backlog, avec au moins deux cartes par phase. Pour chaque carte : un titre « verbe + livrable », une étiquette, un membre, une échéance, une checklist de trois à six étapes pour les cartes importantes, et le critère de fin dans la description.
• Recopiez vos cartes dans l'onglet « Cartes » du classeur : il compte les cartes par phase et par statut.
• Ajoutez les cartes déjà réalisées aujourd'hui (parties 0 à 2) et placez-les dans « Terminé ». Placez la carte de cette partie dans « En cours ». Joignez à la carte « Créer le dépôt » le lien de votre dépôt GitHub.
• Faites une capture du tableau entier et enregistrez-la dans 00-cadrage/trello-v1.png.

📁 Dans le dossier : l'onglet « Cartes » et la capture 00-cadrage/trello-v1.png.

1. Partie 4 : comparer les outils de maquettage

⏱ 30 min

Notions mobilisées : Panorama des outils de maquettage

• Dans l'onglet « Outils », donnez d'abord un poids de 1 à 3 à chaque critère, selon les besoins de votre équipe: un binôme qui travaille souvent à distance donnera un poids fort au travail à plusieurs.
• Ouvrez ensuite le site officiel de chaque outil (Balsamiq, ioDraw, Figma, Adobe XD) et vérifiez son état actuel : offre gratuite, fonctionnement dans le navigateur, mises à jour. Notez chaque outil de 0 à 3 sur chaque critère, et justifiez chaque note par un constat. Le classeur calcule le score pondéré et le classement.

📁 Dans le dossier : l'onglet « Outils » complété.

1. Partie 5 : tester deux outils sur le même écran

⏱ 40 min

Notions mobilisées : Panorama des outils de maquettage

• Reproduisez l'écran « Menu du jour » de CantineCampus (modeles/ecran-menu-du-jour.png) dans deux outils : ioDraw en basse fidélité, puis Figma en moyenne fidélité, dans un cadre de la taille d'un téléphone. Utilisez du vrai contenu (des noms de plats, pas de lorem ipsum).
• Un membre du binôme construit l'écran pendant que l'autre chronomètre et note les difficultés ; échangez les rôles pour le second outil. Saisissez les temps dans l'onglet « Chronométrage ».
• Exportez les deux écrans en PNG dans 00-cadrage/outils/ (menu-iodraw.png, menu-figma.png) et copiez le lien de partage du fichier Figma (en lecture seule) dans la fiche de cadrage.

📁 Dans le dossier : l'onglet « Chronométrage » et les deux exports dans 00-cadrage/outils/.

1. Partie 6 : rédiger la fiche de cadrage

⏱ 25 min

Notions mobilisées : Les cinq phases du processus UX · Organiser un projet UX avec Trello

• Créez une branche pour rédiger la fiche : les modifications seront relues par votre binôme avant d'arriver sur main.

git switch -c cadrage-cantinecampus

• Complétez les six sections de projet-cantinecampus/README.md selon le plan ci-dessous. Dans la section 4, rédigez votre recommandation d'outils en 6 à 10 lignes, appuyée sur la grille pondérée et sur le test chronométré.
• Listez au moins trois risques du projet dans l'onglet « Risques » (probabilité, impact, parade) : le classeur calcule leur criticité. Reportez-les dans la section 6.
• Faites un commit par section importante, puis envoyez la branche sur GitHub :

git add projet-cantinecampus
git commit -m "Ajoute la fiche de cadrage et les risques du projet"
git push -u origin cadrage-cantinecampus

📁 Dans le dossier : la fiche de cadrage README.md et l'onglet « Risques ».

1. Partie 7 : relire avec une pull request et présenter

⏱ 35 min

Notions mobilisées : Versionner les livrables UX avec Git et GitHub

• Sur GitHub, ouvrez une pull request de cadrage-cantinecampus vers main. Votre binôme relit la fiche, laisse au moins deux commentaires (une question, une suggestion), puis vous corrigez et il fusionne la pull request.
• Placez la carte « Rédiger la fiche de cadrage » dans « En revue » pendant la relecture, puis dans « Terminé » après la fusion, avec le lien de la pull request.
• Revenez sur main, récupérez la fusion et marquez la fin du cadrage par une étiquette :

git switch main
git pull
git tag -a cadrage-v1 -m "Fin du cadrage du projet CantineCampus"
git push origin cadrage-v1

• Préparez une présentation de 3 minutes pour le directeur : le plan des cinq phases, le tableau Trello, l'outil retenu et le risque principal.
• Variantes pour les binômes en avance : ajouter une automatisation Trello (une carte déplacée dans « Terminé » est cochée automatiquement) ; créer dans GitHub une issue par carte de la phase d'exploration ; ou reproduire l'écran dans un troisième outil.
• Relisez votre dépôt : chaque livrable est dans le bon dossier, aucun fichier personnel n'est envoyé, et l'historique montre au moins un commit par partie.

📁 Dans le dossier : la pull request fusionnée, le tag cadrage-v1 et le support de présentation dans 00-cadrage/.

1. Grille d'évaluation (sur 20)

1. Livrables

   • Le lien du dépôt GitHub ui-ux-design-bts, avec au moins un commit par partie, la pull request fusionnée et l'étiquette cadrage-v1.
   • La fiche de cadrage projet-cantinecampus/README.md.
   • Le classeur grille-projet.xlsx complété.
   • Le lien du tableau Trello (lecture seule), les deux exports d'écran et le support de présentation.

1. Erreurs fréquentes

1. Pour aller plus loin

   • Relier votre tableau Trello à GitHub avec le Power-Up GitHub, pour afficher les commits et les pull requests sur les cartes.
   • Mettre en place un template de pull request (.github/pull_request_template.md) avec une liste de vérification.
   • Commencer la phase d'exploration du projet CantineCampus, comme nous le ferons au TP 5.

1. Bilan

   • Le processus UX suit cinq phases, mais il est itératif: on revient en arrière dès qu'un résultat le demande.
   • Un tableau Trello utile sépare l'état d'une tâche (listes) de sa phase (étiquettes), et chaque carte produit un livrable vérifiable.
   • Un outil de maquettage se choisit sur des critères pondérés et un test réel, pas sur sa réputation.
   • Dans un projet UX, Git et GitHub servent à ranger, dater et faire relire chaque livrable.

Un projet bien rangé ne garantit pas une bonne expérience utilisateur, mais un projet mal rangé la rend presque impossible.