Comment utiliser le design thinking pour créer des sites web centrés sur l’utilisateur

|
Publié le 17 septembre 2024
Illustration 3D kawaii montrant Cindy marchant le long d'un chemin représentant le parcours utilisateur, avec des panneaux indiquant 'Idée', 'Prototype', et 'Test', symbolisant le processus de design thinking pour sites web. Autour d'elle flottent des éléments de design web, comme des grilles de sites et des icônes. Le fond sombre avec des accents lumineux oranges crée une atmosphère professionnelle et ludique.

Sommaire

Dans cet article, je vais t’expliquer comment utiliser le design thinking pour améliorer l’expérience utilisateur d’un site web. Pour t’immerger dans ce processus, je vais te guider à travers un cas d’étude fictif : la refonte du site web d’une ONG dédiée à l’éducation dans les zones rurales. Le défi ? Rendre leur plateforme plus accessible aux enseignants et volontaires afin de faciliter l’accès aux ressources pédagogiques et à la coordination des projets sur le terrain. Prêt.e ? Allons-y !

Étape 1 : L’empathie — Se plonger dans l’univers des utilisateurs

L’empathie, c’est l’étape où tu vas à la rencontre de tes utilisateurs. Dans notre cas, il s’agit d’enseignants et de volontaires qui cherchent à accéder à des ressources éducatives ou à participer à des projets. Pour vraiment comprendre leurs besoins, il faut les écouter, observer comment ils naviguent sur le site actuel et identifier leurs points de douleur.

Comment faire ? Organise des interviews et des ateliers où tu leur demandes de partager leurs expériences. Tu peux aussi les observer lors de leur utilisation du site, en prenant note de chaque frustration qu’ils rencontrent.

Ce que l’on découvre : Les enseignants se plaignent qu’il est difficile de trouver les ressources nécessaires sans passer par des menus complexes. Ils souhaitent un accès rapide aux documents et une possibilité de filtrer les résultats par sujet et par niveau scolaire. De leur côté, les volontaires veulent pouvoir rejoindre un projet en quelques clics, mais trouvent le processus d’inscription laborieux.

Étape 2 : Définir le problème — Clarifier les besoins réels

Maintenant que tu as passé du temps avec tes utilisateurs et que tu as compris leurs frustrations, il est temps de formuler un problème clair. Cette étape va guider toute la suite du projet. Dans notre cas, tu vas te concentrer sur deux problématiques majeures :

  1. Les enseignants ont besoin d’une meilleure organisation des ressources pour faciliter leur accès, particulièrement dans des environnements où la connexion internet est limitée.
  2. Les volontaires souhaitent un processus d’inscription aux projets qui soit rapide et intuitif.

Problème formulé : « Comment pouvons-nous simplifier l’accès aux ressources pédagogiques et rendre l’inscription aux projets plus fluide pour les volontaires et enseignants dans les zones rurales ? »

Étape 3 : Idéation — Générer des idées créatives

C’est là que ça devient intéressant ! Une fois le problème défini, on entre dans la phase d’idéation, où tu te lâches complètement et proposes un maximum d’idées pour répondre aux besoins identifiés. On brainstorme sans filtre : même les idées les plus folles sont les bienvenues.

Exemples d’idées pour notre ONG :

  • Créer une carte interactive des projets par région, permettant aux volontaires de rejoindre directement une mission près de chez eux.
  • Mettre en place un système de favoris où les enseignants peuvent sauvegarder leurs ressources préférées pour un accès hors ligne.
  • Simplifier l’inscription aux projets grâce à un bouton “Je veux participer” disponible directement sur la page d’accueil avec une inscription en une seule étape.

Étape 4 : Prototyper — Donner vie à tes idées

Maintenant que tu as une liste d’idées prometteuses, il est temps de passer au prototypage. L’idée est de créer une version simplifiée de ton concept pour le tester rapidement auprès des utilisateurs. Il ne s’agit pas d’un produit final, mais d’une maquette fonctionnelle qui permet de visualiser les fonctionnalités principales.

Prototype pour l’ONG : Tu peux créer une maquette interactive de la carte des projets et du nouveau système de gestion des ressources. Ces prototypes peuvent être développés avec des outils comme Figma ou Adobe XD. Tu testes également une nouvelle page d’accueil avec un accès direct aux projets et une fonctionnalité de recherche simplifiée pour les ressources.

Étape 5 : Tester — Valider avec les utilisateurs

Dernière étape, mais pas des moindres : tester tes prototypes avec les utilisateurs. Pour l’ONG, tu vas organiser des sessions de tests avec des enseignants et des volontaires, les regarder interagir avec le prototype et recueillir leurs retours. Tu peux organiser des tests utilisateurs à distance ou sur le terrain (très pertinent dans ce contexte).

Résultats des tests : Les volontaires adorent la nouvelle carte interactive, mais trouvent que certaines informations manquent sur les projets. Les enseignants, quant à eux, apprécient le système de favoris, mais aimeraient pouvoir classer les ressources par date de mise à jour pour accéder aux plus récentes. Ces retours te permettent de peaufiner ton design avant de passer à la version finale.

Comment le design thinking a transformé ce projet

Grâce à cette démarche en cinq étapes, tu as pu transformer le site web de l’ONG en une plateforme intuitive, adaptée aux besoins réels des enseignants et volontaires. Le design thinking t’a permis de rester centré sur l’utilisateur à chaque étape, en testant et ajustant constamment tes solutions. Et c’est exactement ce qui fait la différence : tu crées un site qui résout les vrais problèmes et qui est directement validé par ceux qui l’utilisent.

Webby Tools

La boîte à outils ultime pour les designers

Webby tools : des outils et des ressources pour les web designers

+200 ressources en ligne pour tes projets de design !

Photos / illustrations / icônes / vidéos / musique / mockups / jeux / etc..

Articles similaires

S'abonner à la Webby News

LA WEBBY NEWS

Tu ne veux
rien rater ?

Reçois les mises à jour de Webby Booster, des tutoriels et des conseils directement dans ta boîte mail.

Newsletter