Guide pratique : Le design thinking appliqué au web

Le Design Thinking : une méthode puissante pour concevoir des solutions web centrées utilisateur

Le design thinking n’est pas qu’un buzzword — c’est une méthodologie structurée utilisée par les plus grandes entreprises technologiques pour résoudre des problèmes complexes. Pour les développeurs et designers web au Sénégal, maîtriser cette approche peut transformer radicalement la qualité de vos projets digitaux.

Chez ITSkillsCenter, nous intégrons le design thinking dans nos formations car il permet de créer des produits qui répondent réellement aux besoins des utilisateurs sénégalais et ouest-africains, plutôt que de copier des solutions occidentales inadaptées.

Les 5 étapes du Design Thinking appliquées au web

1. Empathie — Comprendre vos utilisateurs réels

L’empathie est la fondation du design thinking. Avant de coder une seule ligne, vous devez comprendre profondément les personnes qui utiliseront votre site ou application.

Techniques d’empathie pour le contexte sénégalais :

• Interviews terrain — Allez rencontrer vos utilisateurs à Dakar, Thiès ou Saint-Louis. Observez comment ils utilisent leur téléphone, quel navigateur ils préfèrent, quelle est leur connexion internet
• Observation contextuelle — Regardez comment les gens interagissent avec les services digitaux existants (Wave, Orange Money, Jumia). Quels patterns sont déjà familiers ?
• Cartes d’empathie — Documentez ce que vos utilisateurs pensent, ressentent, voient et font quand ils interagissent avec des services web
• Personas locaux — Créez des profils réalistes : Fatou, commerçante au marché Sandaga qui utilise un smartphone Android basique avec une connexion 3G intermittente

Exemple concret : Pour un projet e-commerce au Sénégal, l’étape d’empathie révèle souvent que 85% des utilisateurs naviguent sur mobile, que beaucoup partagent un appareil en famille, et que la confiance envers le paiement en ligne reste un frein majeur. Ces insights changent complètement votre approche de conception.

2. Définition — Formuler le bon problème

La phase de définition synthétise vos observations en un énoncé de problème clair et actionnable. Un mauvais énoncé mène à une mauvaise solution, peu importe la qualité du code.

La méthode du Point of View (POV) :

Format : [UTILISATEUR] a besoin de [BESOIN] parce que [INSIGHT]

Mauvais : "Les utilisateurs veulent un beau site"
Bon : "Les commerçants sénégalais ont besoin d'un moyen simple 
de gérer leur catalogue produits depuis leur téléphone parce qu'ils 
n'ont pas accès à un ordinateur pendant leurs heures de travail"

Mauvais : "Il faut un système de paiement"
Bon : "Les acheteurs en ligne au Sénégal ont besoin de pouvoir 
payer via Wave ou Orange Money parce que moins de 10% possèdent 
une carte bancaire internationale"

Critères d’un bon énoncé de problème :

• Centré sur l’humain, pas sur la technologie
• Suffisamment large pour permettre des solutions créatives
• Suffisamment précis pour être actionnable
• Basé sur des observations réelles, pas des suppositions

3. Idéation — Générer des solutions créatives

L’idéation est la phase où vous explorez le maximum de solutions possibles avant de vous engager dans une direction. C’est le moment d’être audacieux et créatif.

Techniques d’idéation efficaces :

• Brainstorming structuré — Fixez un timer de 15 minutes, visez la quantité (pas la qualité), interdisez la critique. Objectif : 30+ idées minimum
• Crazy 8s — Pliez une feuille en 8, dessinez 8 solutions différentes en 8 minutes. Chaque case = une approche distincte de l’interface
• SCAMPER — Substituer, Combiner, Adapter, Modifier, Proposer d’autres usages, Éliminer, Réorganiser. Appliquez chaque verbe à votre problème
• How Might We (HMW) — Transformez votre problème en questions « Comment pourrions-nous… » pour ouvrir l’espace des solutions

Exemple d’idéation pour un site de formation en ligne au Sénégal :

• Comment pourrions-nous permettre l’apprentissage hors-ligne pour les zones à faible connectivité ?
• Comment pourrions-nous intégrer le paiement mobile (Wave/OM) sans friction ?
• Comment pourrions-nous adapter le contenu aux horaires des professionnels sénégalais ?
• Comment pourrions-nous utiliser le wolof ou le français local dans l’interface ?

4. Prototypage — Construire pour apprendre

Le prototypage transforme vos idées abstraites en quelque chose de tangible et testable. L’objectif n’est PAS de construire le produit final, mais d’apprendre rapidement.

Niveaux de prototypage web :

Niveau 1 — Papier (30 minutes) : Dessinez les écrans principaux sur papier. Testez le flux de navigation en demandant à quelqu’un de « cliquer » sur les éléments dessinés. C’est gratuit et incroyablement efficace pour valider la structure.

Niveau 2 — Wireframes digitaux (2-4 heures) : Utilisez Figma (gratuit) pour créer des wireframes cliquables. Pas de couleurs ni d’images — concentrez-vous sur la hiérarchie de l’information et les interactions clés.

Niveau 3 — Prototype HTML/CSS (1-2 jours) : Codez un prototype fonctionnel minimal. Utilisez Bootstrap ou Tailwind pour aller vite. L’objectif est de tester les interactions réelles sur mobile.

<!-- Prototype rapide d'un bouton de paiement mobile -->
<div class="payment-options">
  <button class="btn-wave" onclick="showWaveQR()">
    Payer avec Wave — 15 000 FCFA
  </button>
  <button class="btn-om" onclick="showOMUssd()">
    Payer avec Orange Money — 15 000 FCFA
  </button>
  <p class="reassurance">
    Paiement sécurisé • Confirmation immédiate par SMS
  </p>
</div>

Règle d’or : Votre prototype doit être suffisamment réaliste pour obtenir des retours honnêtes, mais suffisamment rapide à construire pour que vous n’hésitiez pas à le jeter et recommencer.

5. Test — Valider avec de vrais utilisateurs

Le test confronte votre prototype à la réalité. C’est le moment de vérité où vous découvrez si votre solution fonctionne vraiment.

Protocole de test utilisateur simplifié :

1. Recrutez 5 testeurs — C’est suffisant pour identifier 85% des problèmes d’utilisabilité. Choisissez des profils variés représentant vos personas
2. Préparez des scénarios — « Vous voulez acheter un cours de développement web. Montrez-moi comment vous feriez. » Ne guidez jamais le testeur
3. Observez en silence — Résistez à l’envie d’expliquer ou d’aider. Notez où les gens hésitent, cliquent au mauvais endroit, ou expriment de la frustration
4. Posez des questions ouvertes — « Qu’est-ce que vous pensiez trouver en cliquant ici ? » plutôt que « Est-ce que c’était facile ? »
5. Synthétisez les patterns — Si 3 testeurs sur 5 rencontrent le même problème, c’est un problème de design, pas un problème d’utilisateur

Métriques à observer :

• Taux de complétion — Combien de testeurs réussissent la tâche sans aide ?
• Temps sur tâche — Combien de temps pour accomplir l’action clé ?
• Erreurs — Où les utilisateurs se trompent-ils ?
• Satisfaction — Demandez une note de 1 à 5 après chaque tâche

Étude de cas : Design Thinking pour une plateforme de cours en ligne sénégalaise

Voici comment appliquer les 5 étapes concrètement pour un projet réel :

Contexte : Création d’une plateforme de formation en développement web pour les jeunes professionnels au Sénégal.

Phase Empathie : Interviews avec 15 jeunes développeurs à Dakar. Découvertes clés : ils apprennent principalement sur YouTube, la connexion internet est instable (coupures fréquentes), ils préfèrent les contenus en français avec des exemples locaux, et le budget formation est limité (5 000-20 000 FCFA/mois).

Phase Définition : « Les jeunes développeurs sénégalais ont besoin d’accéder à des formations techniques de qualité qui fonctionnent même avec une connexion instable, parce que les plateformes internationales comme Udemy nécessitent une connexion permanente et proposent du contenu déconnecté de leur réalité professionnelle. »

Phase Idéation : 40+ idées générées, dont : contenu téléchargeable hors-ligne, exercices pratiques basés sur des projets locaux (site pour un restaurant thiéboudienne, app de gestion pour un atelier de couture), mentorat par des développeurs sénégalais seniors, paiement fractionné via Wave.

Phase Prototype : Prototype Figma testé sur mobile avec 3 parcours : découverte d’un cours, inscription avec paiement Wave, et téléchargement d’une leçon pour consultation hors-ligne.

Phase Test : 5 testeurs ont révélé que le bouton de téléchargement n’était pas assez visible, que les utilisateurs cherchaient un prix total plutôt qu’un abonnement, et que la navigation par catégories était confuse. Trois itérations ont permis d’atteindre un taux de complétion de 90%.

Les outils du Design Thinking pour les projets web

Voici les outils essentiels, des gratuits aux professionnels :

Pour l’empathie et la recherche

• Google Forms (gratuit) — Créez des questionnaires pour collecter des données utilisateur à grande échelle
• Hotjar (version gratuite disponible) — Cartes de chaleur et enregistrements de sessions pour comprendre le comportement réel sur votre site
• Notion ou Google Docs (gratuit) — Documentez vos interviews et observations de manière structurée

Pour l’idéation

• FigJam (gratuit) — Tableau blanc collaboratif idéal pour le brainstorming en équipe, même à distance
• Miro (version gratuite) — Alternative puissante avec des templates de design thinking prêts à l’emploi
• Post-its physiques — Parfois le plus simple est le plus efficace. Un mur + des post-its = une session d’idéation productive

Pour le prototypage

• Figma (gratuit) — L’outil standard pour le prototypage interactif. Créez des maquettes cliquables sans coder
• CodePen (gratuit) — Prototypez rapidement des composants HTML/CSS/JS en ligne
• VS Code + Live Server (gratuit) — Pour des prototypes HTML plus complets testables sur mobile via le réseau local

Pour les tests utilisateur

• Maze (version gratuite) — Tests utilisateur non modérés sur vos prototypes Figma
• Loom (gratuit) — Enregistrez vos sessions de test en vidéo pour les analyser ensuite
• Google Meet (gratuit) — Tests à distance avec partage d’écran pour les utilisateurs hors de Dakar

Erreurs fréquentes à éviter

• Sauter l’empathie — « Je connais déjà mes utilisateurs » est la phrase la plus dangereuse en design. Vous n’êtes pas votre utilisateur
• Tomber amoureux de sa première idée — L’idéation doit produire des dizaines d’idées. Si vous n’en avez que 3, vous n’avez pas assez exploré
• Prototype trop poussé — Un prototype qui a demandé 2 semaines de travail sera difficile à jeter. Restez léger et rapide
• Tester avec des collègues — Vos collègues développeurs ne sont pas vos utilisateurs. Testez avec de vraies personnes qui correspondent à vos personas
• Ignorer les résultats négatifs — Si les tests montrent que votre solution ne fonctionne pas, c’est une victoire : vous avez évité de gaspiller des mois de développement
• Processus linéaire — Le design thinking est itératif. Les résultats des tests doivent vous ramener à l’empathie ou à l’idéation si nécessaire

Intégrer le Design Thinking dans votre workflow de développement

Le design thinking ne remplace pas les méthodologies agiles — il les complète. Voici comment les combiner :

• Sprint 0 (1-2 semaines) — Empathie + Définition. Avant d’écrire du code, comprenez le problème. Livrable : personas, énoncé de problème, critères de succès
• Sprint 1 (1 semaine) — Idéation + Prototypage. Explorez les solutions et construisez un prototype testable. Livrable : prototype cliquable
• Sprint 2 (1 semaine) — Test + Itération. Testez avec 5 utilisateurs, analysez les résultats, itérez. Livrable : prototype validé
• Sprints suivants — Développement agile classique basé sur le prototype validé. Continuez à tester régulièrement à chaque sprint

Cette approche vous fait gagner du temps sur le long terme : mieux vaut passer 3 semaines à valider une solution qu’à coder pendant 3 mois un produit que personne n’utilisera.

Prochaines étapes pour maîtriser le Design Thinking

Le design thinking est une compétence qui se développe avec la pratique. Commencez par appliquer la méthode sur un petit projet personnel, puis élargissez progressivement à vos projets professionnels.

Chez ITSkillsCenter, nos formations en design web et UX intègrent le design thinking de manière pratique. Chaque module inclut des exercices d’empathie, d’idéation et de prototypage basés sur des cas réels du marché sénégalais. Nos formateurs, designers et développeurs actifs à Dakar, vous guident à travers chaque étape avec des retours personnalisés.

La différence entre un développeur qui code des sites et un développeur qui crée des produits qui réussissent ? Le design thinking. C’est cette capacité à comprendre profondément les besoins humains avant de les traduire en code qui fait toute la différence.