XDesign

XDesign est une plateforme d’apprentissage en ligne dédiée au design, offrant des cours interactifs et des ressources pour les débutants et les professionnels. Le site est entièrement responsive, garantissant une expérience utilisateur optimale sur tous les appareils. Grâce à une interface intuitive et des contenus de qualité, XDesign facilite l’acquisition de compétences en design à tous les niveaux.

  • Recherche UX
  • Personas / user stories
  • Brainstorming (Crasy Height , How Might We)
  • Wireframing
  • Test d’utilisabilité
  • Prototypage Lo-Fi / Hi-Fi
  • Design system
  • Responsive Design
  • Accessibilité
  • Design Thinking
  • AdobeXD

👉 Voir étude de cas complète

Description du processus


Recherche utilisateur

J’ai recueilli les voix des utilisateurs et les ai traduites en cartes d’empathie. Ce qui en ressort ? L’apprentissage est perçu comme une source de plaisir et de motivation. Pourtant, la complexité de certains sites de tutoriels transforme ce moment en parcours du combattant. Une expérience censée être enrichissante devient frustrante — et l’envie d’apprendre s’efface derrière l’effort de naviguer.

🪶 Ce que disent les utilisateurs, c’est l’histoire de leur parcours.

Trois écueils reviennent sans cesse :

  • Perdus dans le labyrinthe : une navigation confuse qui fait perdre du temps et de l’envie.
  • Savoir flou : des contenus peu clairs qui obligent à chercher ailleurs pour comprendre.
  • Curiosité éteinte : un format peu engageant qui laisse la motivation s’échapper.

🌿 Donner un visage aux besoins, c’est leur donner du poids.

J’ai donc façonné Delphine : freelance passionnée, en quête de tutoriels de design clairs et complets. Face à des contenus flous, elle s’épuise à chercher ailleurs, perd l’élan d’apprendre. À partir de son histoire, j’ai tracé une carte de parcours pour révéler les frictions et ouvrir des pistes d’amélioration.

Idéation: croquis papier pour page d’accueil

La création des croquis papier pour la page d’accueil m’a permis d’explorer une variété d’options pour concevoir la page d’accueil. Pour les problèmes d’accessibilité et la facilité de navigation.

Sitemap

À partir des interviews des utilisateurs, j’ai créé un plan de site pour la page Web réactive. J’ai choisi une structure hiérarchique pour l’architecture de l’information afin de rendre le site Web clair et facile à naviguer.

Wireframes

Du papier à l’écran, les idées prennent forme.

Le passage aux maquettes numériques a révélé, d’un simple regard, comment la nouvelle conception pouvait lever les blocages et enrichir l’expérience. Placer chaque bouton au bon endroit, orchestrer les visuels sur la page d’accueil : autant de choix pensés comme des points d’ancrage pour guider et fluidifier le parcours.

Étude d’utilisabilité

J’ai conduit une étude d’utilisabilité sur prototype basse fidélité → refonte vers un prototype haute fidélité, plus clair et centré utilisateur. Les principaux enseignements étaient :

  • Recherche : efficace, à affiner avec suggestions et filtres.
  • Paiement : offres confuses, saisie longue, coûts peu transparents.
  • Expérience globale : design apprécié, mais navigation et abonnements à simplifier.

Mockups

Amélioration du parcours d’abonnement → ajout de l’affichage des tarifs avant souscription, pour plus de clarté et de transparence.

Paiement simplifié → saisie épurée et accès direct au centre d’aide pour une expérience plus fluide.

Livrables

Mockups

Design System

Un design system, c’est le langage commun du produit : couleurs, typographies, composants et règles qui assurent cohérence, fluidité et harmonie à chaque interface.

Responsive Design

J’ai créé des maquettes pour les tailles d’écran web et mobile.

Prototype haute fidélité

Le dernier prototype de haute fidélité a présenté un flux d’utilisateur plus clair pour s’inscrire sur une plateforme de d’apprentissage en ligne.

Accessibilité

J’ai misé sur l’utilisation de titres clairs qui orientent le regard, repères comme des phares pour guider chaque pas, et textes alternatifs qui ouvrent la voie aux lecteurs d’écran. Une expérience pensée pour que chacun avance librement, sans jamais buter sur un obstacle.

Points à retenir

  • Impact — Les retours de nos utilisateurs cibles sont sans appel : la navigation se fait naturellement, les visuels captent davantage l’attention et la hiérarchie visuelle guide le regard avec clarté.
  • Ce que j’ai appris — Cette expérience m’a montré qu’un simple ajustement de conception peut transformer en profondeur l’expérience vécue par l’utilisateur. Plus que jamais, j’ai compris que la clé réside dans l’écoute attentive des besoins réels : c’est en partant de ce qui compte vraiment pour l’utilisateur que l’on forge des idées et des solutions qui font sens, et qui, surtout, laissent une empreinte positive.

Prochaines étapes

  • Réaliser des tests d’utilisabilité de suivi sur le nouveau site web.
  • Identifier tout besoin supplémentaire et conceptualiser de nouvelles fonctionnalités

Aperçu du projet