Accueil » Portfolio » Projet – Création d’un site web sur les tutos de bricolage

BRICO tutos

Projet fictif réalisé dans le cadre de la certification Google :
Conception d’un site web responsive.
Le sujet est la réalisation d’un site web responsive permettant de trouver des tutoriels de bricolage.

DATE

Mars 2024
ROLE
UX design
COMPÉTENCES
  • Recherche utilisateur
  • Création de personas
  • Rédaction du parcours utilisateur
  • Enoncé et hypothèse des problèmes
  • Création de wireframes
  • Création des maquettes
  • Création des prototypes

Le problème

Permettre aux utilisateurs de trouver facilement des tutoriels sur le bricolage avec des avis utilisateur et des informations sur les difficultés et les coûts.

L'objectif

L’objectif est que la recherche soit facile et que toutes les informations relatives aux tutoriels soient présentent.

Recherche utilisateur

Suite aux entretiens avec les utilisateurs, j’ai constaté qu’ils étaient perdus dans tous les tutoriels qu’ils pouvaient voir sur les réseaux sociaux, ou les sites spécialisés.

Le manque d’avis et le manque d’informations créé de la frustration chez beaucoup d’utilisateurs.
Le bricolage peut être une source de stress, donc l’objectif est de faciliter les recherches de tutoriel et de fournir un maximum d’informations.

Persona 1

Fiche de persona

Énoncé du problème :
Lisa est une néophyte en bricolage, qui a besoin de trouver facilement des tutoriels de bricolage, parce qu’elle souhaite aménager son van pour partir en vacances cet été.

User journey map

Parcours utilisateur du persona 1

Objectif :
Trouver facilement un tutoriel de bricolage, qui indique clairement le temps de réalisation des travaux, le coût ainsi que les matériaux nécessaires.

Plan de site

Plan de site pour la conception du site web responsive.
L’objectif est de guider la structure organisationnelle de la conception de chaque écran afin d’assurer une expérience cohérente.

Plan de site du site web de tutoriel de bricolage

Conceptualisation

Conceptualisation rapide pour trouver des idées sur la façon d’afficher les tutoriels de bricolage sur la page d’accueil.
Affichage des 5 versions différentes, puis de la version finale.

Wireframes 5 versions de la page d'accueil

Conceptualisation mobile

Wireframe finale de la page d’accueil mobile.
Les éléments sont adaptés au changement de dimension d’écran.
Wireframes finale de la page d'accueil mobile

Wireframe desktop

Conception initiale de la page d’accueil du site internet.
Centrée sur la recherche et l’affichage de tutoriels de bricolage.
Wireframe numérique de la page d'accueil desktop

Wireframe mobile

Conception initiale de la page d’accueil du site internet.
Centrée sur la recherche et l’affichage de tutoriels de bricolage.
Recherche par la barre de recherche et pas filtres.
Wireframe numérique de la page d'accueil mobile

Prototype low-fi

Pour préparer les tests d’utilisabilité, création d’un prototype basse fidélité qui connecte le flux utilisateur permettant la recherche d’un tutoriel de bricolage.
Prototype basse fidélité du site web

Étude d’utilisabilité

Type d'étude

Étude d’utilisabilité non modérée

Participants

5 participants

Durée

10 à 15 minutes

Principales conclusions révélées par l’étude d’utilisabilité

Les utilisateurs manquent d’informations sur les tutoriels présentés.
Les utilisateurs n’arrivent pas à effectuer une recherche. La barre de recherche et les filtres sont trop proches.
Sur la page d’accueil, il manque des boutons d’action permettant d’accéder à la page du tutoriel.

Conception des maquettes

Maquettes

Sur la base des informations récoltées lors de l’étude d’utilisabilité, des modifications de conception ont été effectuées notamment la séparation de la barre de recherche des filtres de recherche.

Avant l’étude d’utilisabilité
Présentation de la wireframe avant l'étude d'utilisabilité
Après l’étude d’utilisabilité
Présentation de la wireframe avant l'étude d'utilisabilité
Modification de conception supplémentaire concernant l’affichage des informations des tutoriels.
Ajout d’informations sur les difficultés, le prix et le temps pour réaliser les tutoriels.
Ajout d’un carrousel des derniers avis.
Avant l’étude d’utilisabilité
Présentation de la wireframe avant l'étude d'utilisabilité
Après l’étude d’utilisabilité
Présentation de la maquette après l'étude d'utilisabilité

Flux utilisateur desktop

Maquette de la page d'accueil
Maquette de la page de résultat de recherche
Maquette de recherche par thème en passant par les filtres
Maquette de la page d'un tutoriel

Flux utilisateur mobile

Maquette de la page d'accueil mobile
Maquette de la page de résultat de recherche mobile
Maquette de la page d'un tutoriel
Maquette de la pop-in pour déposer un avis

Prototype desktop haute fidélité

Le prototype haute fidélité suit le même processus que le prototype basse fidélité.
Prototype de la version desktop du site web, haute fidélité

Prototype mobile haute fidélité

Le prototype haute fidélité suit le même processus que le prototype basse fidélité.
Prototype de la version mobile du site web, haute fidélité

Impact

D’après certains utilisateurs du prototype, le design est clair et aéré, ce qui facilite la compréhension du design.
La recherche par filtre est à améliorer, ainsi que la longueur des explications dans les tutoriels. Il est envisagé de condenser les descriptions dans des onglets pour éviter trop de scroll.

Ce que j’ai appris

Les utilisateurs sont en demande d’informations claires, précises et trouvables facilement.