FLEX SHIRTS

Dans le cadre de mon programme de certification Certificat professionnel Google UX Design (v2) sur Coursera, j’ai eu à réaliser un site web pour un magasin de vêtement. J'ai travaillé comme chercheur principal en UX et développeur de concepts pendant la phase d'idéation. Après la mise en œuvre, j'ai pris la tête de l'interface utilisateur, me concentrant sur le design visuel et interactif.

PRÉSENTATION DU PROJET

Le produit

Flex Shirts est un magasin de vêtements qui propose des options de prix abordables. L'utilisateur type a entre 19 et 30 ans et la plupart des utilisateurs sont des étudiants ou des professionnels en début de carrière. L'objectif de Flex Shirts est de rendre le shopping amusant, rapide et facile pour tous les types d'utilisateurs.

Durée du projet

Avril 2025 à Juillet 2025

APERÇU DU PROJET

Problème

Les sites d'achat en ligne disponibles ont des designs encombrés, des systèmes inefficaces pour naviguer parmi les produits et des processus de paiement confus.

Objectif

Concevoir un site web Flex Shirts convivial en offrant une navigation claire et un processus de paiement rapide.

Mon rôle

UX/UI designer responsable de la conception du site web Flex Shirts

Responsabilité

Conduite d'entretiens, wireframing papier et numérique, prototypage basse et haute fidélité, réalisation d'études d'utilisabilité, prise en compte de l'accessibilité, itération sur les conceptions et responsive design.

Recherche utilisateur

J'ai mené des entretiens avec les utilisateurs, que j'ai ensuite transformés en cartes d'empathie afin de mieux comprendre l'utilisateur cible et ses besoins. J'ai découvert que de nombreux utilisateurs cibles considèrent le shopping en ligne comme une activité amusante et relaxante lorsqu'ils ont besoin de faire une pause à l'école ou au travail. Cependant, de nombreux sites web d'achat sont accablants et difficiles à naviguer, ce qui frustre de nombreux utilisateurs cibles. Une expérience normalement agréable devient alors un défi pour eux, ce qui va à l'encontre de l'objectif de détente.

Points douloureux

Navigation : Les sites web d'achat sont souvent trop chargés, ce qui rend la navigation confuse.
Interaction : Les petits boutons sur les sites web d'achat rendent la sélection des articles difficile, ce qui conduit parfois les utilisateurs à commettre des erreurs.
Expérience : Les sites d'achat en ligne n'offrent pas une expérience de navigation attrayante.

Persona

Problématique

Amandine est une étudiante très occupée qui a besoin d'une navigation intuitive sur le site web et de filtres de recherche parce qu'elle veut que les achats en ligne se fassent sans stress.

J'ai créé une carte du parcours d'utilisateur de l'expérience de Amandine sur le site pour l'aider à identifier les éventuels points de douleur et les possibilités d'amélioration.

Les difficultés de navigation sur le site web étant l'un des principaux problèmes rencontrés par les utilisateurs, j'ai utilisé mes connaissances pour créer un plan du site. Mon objectif était de prendre des décisions stratégiques en matière d'architecture de l'information afin d'améliorer la navigation générale sur le site web. La structure que j'ai choisie a été conçue pour rendre les choses simples et faciles.

Wireframes papiers

Ensuite, j'ai dessiné des schémas pour chaque écran de mon site, en gardant à l'esprit les problèmes rencontrés par les utilisateurs en matière de navigation, d'exploration et gestion de ses comptes..Les variations du schéma de papier de l'écran d'accueil ci-dessous visent à optimiser l'expérience de navigation pour les utilisateurs.

Wireframe papier affiné

J'ai utilisé des étoiles pour marquer les éléments de chaque croquis qui seraient utilisés dans les premières maquettes numériques.

Variation des tailles de l'écran

Les utilisateurs de Flex Shirts accédant au site sur différents appareils, j'ai commencé à travailler sur des conceptions pour des tailles d'écran supplémentaires afin de m'assurer que le site serait entièrement réactif.

Wireframe digital

Le passage du papier aux maquettes numériques a facilité ma compréhension de la manière dont le site pouvait aider à résoudre les problèmes des utilisateurs et à améliorer l'expérience de ces derniers.La priorité accordée à l'emplacement des boutons utiles et des éléments visuels sur la page d'accueil était un élément clé de ma stratégie.

Variation de la taille de l'écran

Prototype base fidélité

Pour créer un prototype basse-fidélité, j'ai connecté tous les écrans impliqués dans le flux principal de l'utilisateur, à savoir l'ajout d'un article au panier et le passage en caisse.

À ce stade, des camarades étudiants de ma formation, m'ont fait part de leurs commentaires sur mes conceptions, notamment sur l'emplacement des boutons et l'organisation des pages. J'ai veillé à écouter leurs commentaires et j'ai mis en œuvre plusieurs suggestions qui répondaient à des problèmes rencontrés par les utilisateurs.

Flex Shirts prototype basse fidélité

Étude d'utilisabilité : Paramètres

Type d'étude : Étude d'utilisabilité non modérée
Participants : 5 participants
Localisation : France, à distance
Durée : 20-30 min

Étude d'utilisabilité : Conclusion

Telles sont les principales conclusions de l'étude de convivialité :

Panier

Une fois dans l'écran de paiement, les utilisateurs n'avaient pas la possibilité de modifier la quantité d'articles dans le panier.

Vérification et paiement

Les utilisateurs ne pouvaient pas copier facilement les informations relatives à l'adresse de livraison dans le champ des informations de facturation.

Compte

Au cours du processus de paiement, il n'y avait pas de moyen clair pour les utilisateurs de se connecter à leur compte afin de pré-remplir les informations de facturation et d'expédition.

Mockups

Sur la base des conclusions de l'étude d'utilisabilité, j'ai apporté des modifications afin d'améliorer le processus de paiement du site. J'ai notamment ajouté la possibilité de modifier la quantité d'articles dans le panier d'un utilisateur à l'aide d'une simple option « + » ou « - ». Cela a donné aux utilisateurs plus de liberté pour modifier leur panier sans passer par un processus compliqué pour ajouter ou supprimer des articles.

Pour faciliter encore le processus de paiement, j'ai ajouté une case à cocher permettant aux utilisateurs d'utiliser la même adresse pour la facturation et l'expédition.

Avant / Après

Mockups: Taille originale de l'écran

Mockups : Variation de la taille des écrans

J'ai inclus des considérations pour d'autres tailles d'écran dans mes maquettes en me basant sur mes wireframes précédents. Comme les utilisateurs font leurs achats à partir de différents appareils, j'ai pensé qu'il était important d'optimiser l'expérience de navigation pour différentes tailles d'appareils, tels que les mobiles et les tablettes, afin que les utilisateurs aient l'expérience la plus fluide possible.

Prototype haute fidélité

Mon prototype hi-fi a suivi le même flux d'utilisateurs que le prototype lo-fi et a inclus les modifications de conception apportées après l'étude d'utilisabilité, ainsi que plusieurs changements suggérés par mes camarades étudiants.

Voir Flex Shirts Prototype Hi-Fi

Solution

La solution est un site web e-commerce, Flex Shirts, dont la conception a été guidée par la recherche et les retours utilisateurs. Le produit final propose une navigation claire et un tunnel de paiement optimisé qui s'attaque directement aux points de friction identifiés. En réponse directe aux tests d'utilisabilité, la solution implémentée inclut :

Un ajustement facile du panier : Les utilisateurs peuvent modifier la quantité d'articles directement depuis l'écran de paiement via des boutons "+" et "-".
Un formulaire de paiement simplifié : Une case à cocher "Mon adresse de facturation est la même que mon adresse de livraison" a été ajoutée pour éliminer la saisie redondante.

Une interface épurée : Le design final réduit le "bruit" visuel pour se conformer à l'objectif initial : une expérience de shopping "amusante, rapide et facile".

À retenir

Ce projet a été une leçon concrète sur l'impact direct des tests utilisateurs sur le produit final. Ma principale leçon est la suivante : une modification perçue comme mineure en design peut résoudre une frustration majeure pour l'utilisateur.L'ajout de la simple case à cocher pour l'adresse ou des boutons de quantité n'était pas dans mes wireframes initiaux. C'est l'observation directe des utilisateurs en difficulté lors de l'étude d'utilisabilité qui a prouvé leur nécessité. Cela a renforcé ma conviction que l'itération basée sur des données réelles est le moyen le plus efficace d'améliorer un produit et de ne pas se fier uniquement à ses propres hypothèses.

Prochaines étapes

Le design est un cycle continu. Les prochaines étapes logiques pour ce projet seraient :

Valider les solutions (Test & Itération) : Mener une seconde session de tests d'utilisabilité, cette fois sur le prototype haute-fidélité, pour mesurer le succès des modifications apportées au tunnel de paiement.
Implémenter le feedback manquant : Concevoir une fonctionnalité claire de Connexion / S'inscrire en tant qu'invité au début du paiement, répondant au troisième point de douleur découvert lors de la première étude (pré-remplir les informations).

Développer les fonctionnalités annexes : Concevoir l'architecture et les écrans de l'espace Mon Compte (historique des commandes, adresses enregistrées, etc.) pour créer une expérience client complète au-delà du simple achat.