Prototypage rapide en design : de l’idée à l’expérience testable

Ce que vous saurez faire à la fin

• Passer de l’idée à un prototype testable avec utilisateurs en 5 jours ouvrés
• Choisir le bon niveau de fidélité (papier, wireframe, haute fidélité cliquable) selon votre objectif
• Utiliser Figma pour assembler un prototype cliquable sans savoir coder
• Organiser une session de test utilisateur à Dakar ou Abidjan qui produit des insights exploitables
• Itérer en moins de 48h après chaque vague de tests

Prérequis

• Un problème utilisateur clairement formulé (pas une solution)
• Compte Figma gratuit (figma.com)
• 5 à 8 utilisateurs cibles joignables pour tester
• Un carnet, des feutres et des post-it pour la phase papier

Étape 1 — Poser le problème, pas la solution

Erreur #1 des PME : prototyper directement une solution avant d’avoir formulé le problème. Écrivez une phrase au format :

"[Persona] rencontre [frustration] quand [contexte], et cela le coûte [impact mesurable]."

Exemple : « Un gérant de boutique de pièces détachées à Dakar perd 30 minutes par client en cherchant manuellement les références compatibles, ce qui le fait perdre 3 ventes par jour aux heures de pointe. »

Étape 2 — Prototype papier en 2 heures

Avant Figma, faites du papier. C’est plus rapide, plus honnête, et les utilisateurs osent critiquer.

1. Dessinez 5 écrans clés sur des feuilles A5 distinctes
2. Numérotez les interactions : « bouton A → écran 3 »
3. Testez avec un collègue : il pointe, vous changez la feuille manuellement
4. Notez ce qui bloque, pas ce qu’il dit poliment

Étape 3 — Wireframe basse fidélité sur Figma

Ouvrez Figma, créez un nouveau fichier. Utilisez uniquement noir/blanc/gris à ce stade.

1. Installez le plugin Wireframe ou Content Reel
2. Créez des frames de taille téléphone (375×812) ou desktop (1440×900)
3. Placez les blocs : header, contenu, CTA, footer
4. Remplissez avec du lorem ipsum ou données réalistes sénégalaises
5. Objectif : 4 à 6 écrans couvrant le parcours principal en 2 heures

Étape 4 — Prototype haute fidélité cliquable

Une fois le flux validé, passez au design final.

1. Dupliquez vos wireframes, ajoutez couleurs de marque et typographie
2. Utilisez la grille 8px pour un résultat propre
3. Mode Prototype Figma : reliez chaque bouton à l’écran cible avec « On tap → Navigate to »
4. Ajoutez les transitions : Smart animate pour les carrousels, Dissolve pour les popups
5. Partagez avec un lien public figma.com/proto/... : l’utilisateur teste sur son propre téléphone

Étape 5 — Recruter 5 testeurs en 48h

La règle Nielsen : 5 utilisateurs bien choisis trouvent 85 % des problèmes. Pas besoin de plus.

• Recrutez par WhatsApp via votre réseau ou groupes Facebook ciblés
• Dédommagez chaque testeur : 5 000 FCFA ou bon d’achat équivalent
• Évitez amis et famille : ils mentent pour ne pas vous vexer
• Prévoyez 45 minutes par session, 10 minutes de buffer entre deux

Étape 6 — Conduire un test utilisateur qui produit des insights

1. Rassurez : « C’est le prototype qu’on teste, pas vous. Il n’y a pas de bonne ou mauvaise réponse. »
2. Donnez une tâche réaliste : « Essayez de trouver une pièce pour une Toyota Corolla 2015. »
3. Demandez à l’utilisateur de parler à voix haute : « Racontez ce que vous essayez de faire. »
4. Ne guidez JAMAIS : si l’utilisateur est perdu, c’est un vrai problème à noter
5. Enregistrez l’écran et la voix (avec accord) : indispensable pour revoir plus tard

Étape 7 — Synthétiser en 24h

Ne laissez pas tiédir. Dans les 24h après le dernier test :

1. Listez chaque problème observé dans un tableau Airtable ou Google Sheets
2. Colonnes : Problème, Nombre d’utilisateurs touchés, Gravité (1-3), Effort correction (h)
3. Priorisez : Gravité × Utilisateurs ÷ Effort
4. Planifiez le prochain tour de prototypage sur les 3 problèmes top

Erreurs courantes

• Trop fidélité trop tôt : vous faites du pixel-perfect alors que le flux n’est pas validé
• Ne tester qu’avec son équipe : biais fatal, vos collègues connaissent votre métier
• Ne pas enregistrer : vous oubliez 60 % des insights sans vidéo
• Trop itérer dans Figma sans re-tester : chaque itération non validée = risque de dériver

Prochaines étapes

• Passer au prototype fonctionnel avec FlutterFlow ou Bubble pour tester en conditions réelles
• Mesurer les KPIs utilisateur en prod : taux de complétion, temps par tâche, taux d’abandon
• Constituer un design system réutilisable dans Figma (tokens, composants, variants)