Données d'exemple. Fieldnote est une entreprise fictive qui sert à remplir les 61 boards, pour que les exemples racontent une seule histoire.
Post-PMF, Ana esquisse en gris les trois écrans du parcours hors ligne pour que Tom et Karim discutent logique, pas couleurs.
Ce que l'équipe en a tiré
Tom a repéré que le bouton Enregistrer de l'écran 2 était grisé sur la première esquisse ; c'est la seule chose qui ne doit jamais dépendre du réseau. Deux autres écrans ont été supprimés.
Comment l'animer
Préparation
Invite le designer, le PM et le tech lead. Trois personnes, un écran chacun sur le board, pas d'observateurs.
Envoie le user flow ou la tranche de story map concernée la veille, plus la liste des écrans nécessaires. Wireframer sans flow produit de jolis écrans orphelins.
Prépare un cadre vide par écran sur le board, étiqueté avec l'étape qu'il sert. Palette strictement grise : pas de couleur, pas de logo, pas de vraie typographie.
Déroulé
15 min
Parcourir le flow Lis le flow étape par étape et confirme la liste des écrans. Écris sur chaque cadre la seule chose que l'utilisateur doit faire sur cet écran. Si tu ne peux pas l'écrire, l'écran n'existe pas.
30 min
Croquis solo, premier tour Chacun dessine tous les écrans seul avec des boîtes et des traits uniquement. Dix minutes par écran. Des mots dans les boîtes, pas d'icônes.
30 min
Comparer Mets les trois versions de chaque écran côte à côte. Pour chaque écran, nomme ce sur quoi les versions s'accordent (à garder) et la seule différence qui mérite discussion. Deux minutes par différence, puis vote.
45 min
Converger, deuxième tour Le designer redessine chaque écran à partir des éléments gagnants pendant que les deux autres regardent et challengent. Ajoute l'état vide et l'état d'erreur pour chaque écran avec un formulaire ou une liste.
35 min
Passe contenu Remplace chaque 'Lorem' et chaque 'Bouton' par les vrais mots. Les vrais libellés révèlent la moitié des problèmes de mise en page. Le PM écrit, le designer ajuste.
20 min
Vérification tech Le tech lead marque tout ce qui coûte plus d'un jour ou nécessite des données que le produit n'a pas. Ces marques vont dans l'estimation, pas dans une refonte.
5 min
Clôturer Numérote les écrans dans l'ordre du flow et exporte. Le board est maintenant la référence pour le sprint ; le design visuel part de là, pas de zéro.
Pièges
N'ouvre pas le design system pendant le wireframing. Dès qu'un vrai bouton apparaît, la conversation glisse de la logique au style.
Ne saute pas les états vides et les états d'erreur. C'est la moitié des écrans sur lesquels les développeurs posent vraiment des questions.
Ne wireframe pas un écran que personne ne peut décrire en une phrase. Retourne au flow à la place.
Ensuite
Les wireframes numérotés partent en design visuel et dans le sprint comme définition de chaque story. Teste-les avec trois utilisateurs avant la haute fidélité si le flow est nouveau ; saute le test si c'est la refonte d'une étape connue.