SweatKrea
Conception site web Responsive avec Adobe XD
Dans le cadre de la formation UX Design de Google Career Certificates, j’ai réalisé ce projet pour lequel j’ai utilisé le logiciel Adobe XD.
Aperçu du projet
Le produit
SweatKrea est une boutique en ligne pour commander des sweat-shirts personnalisés. L'utilisateur est âgé de 35 à 60 ans. La plupart des utilisateurs souhaitent personnaliser des sweats essentiellement pour offrir mais aiment bien aussi en commander pour communiquer sur leur société quand ils sont à leur compte. L'objectif de SweatKrea est de rendre la personnalisation et la commande simple et rapide pour tous les types d'utilisateurs.
Durée du projet
Du 1er au 18 novembre 2023
Le problème
Les sites Web de personnalisation et de commande en ligne sont souvent compliqués, longs, ne permettent pas à l'utilisateur de visualiser parfaitement le résultat et enfin, ils n'offrent pas assez de possibilités pour la zone de personnalisation.
L'objectif
Concevoir un site Web convivial pour SweatKrea offrant une navigation claire et un processus de personnalisation et de commande simple et rapide.
Mon rôle
Designer UX responsable de la conception du site Web de SweatKrea.
Responsabilités
Conduite d'entretiens, conception de maquette fonctionnelle papier et numérique, prototypage basse et haute-fidélité, réalisation d'étude d'utilisabilité, prise en compte de l'accessibilité et itération des conceptions et conception réactive.
Comprendre l'utilisateur
Recherche utilisateur
Résumé
J’ai mené des entretiens avec les utilisateurs que j’ai ensuite transformés en cartes d’empathie pour mieux comprendre l’utilisateur cible et ses besoins. J’ai découvert que de nombreux utilisateurs cibles considèrent la personnalisation de vêtements en ligne comme une très bonne idée pour offrir des cadeaux mais aussi pour communiquer sur leur entreprise. Cependant, de nombreux sites Web de personnalisation et de commande en ligne sont souvent compliqués, avec un processus de personnalisation trop long, ne permettent pas à l’utilisateur de visualiser parfaitement le résultat et enfin, ils n’offrent pas assez de possibilités pour la zone de personnalisation. Cela a souvent pour effet d’inciter l’utilisateur à abandonner une expérience originale et plutôt satisfaisante pour celui-ci de par sa participation à la création du produit.
Points sensibles
Personnalisation longue
Le flux de personnalisation est en général trop long, ce qui entraîne souvent un abandon de l’achat.
Zone de personnalisation restreinte
L’utilisateur n’a pas assez de liberté sur la zone de personnalisation prédéfinie, ce qui crée souvent un mécontentement de l’utilisateur voire un abandon de l’achat.
Résultat pas assez visible
La prévisualisation du résultat de la personnalisation n’est pas toujours assez claire, ce qui conduit parfois à un abandon de l’achat.
Persona
Énoncé de problème
Maëva est une personne impatiente qui a besoin d’un processus de personnalisation de sweat-shirt en ligne simple et rapide, parce qu’elle souhaite économiser du temps tout en créant un produit personnalisé qui la satisfait rapidement.
Carte du parcours utilisateur
J’ai créé une carte du parcours utilisateur à partir de l’expérience de Maëva lors de son utilisation du site afin d’aider à identifier les éventuels points de friction et les opportunités d’amélioration.
Objectif : trouver un processus pour personnaliser et commander facilement et rapidement un sweat-shirt en ligne.
Démarrer la conception
Plan de site
La difficulté de navigation sur le site Web pour personnaliser un sweat était l’un des principaux problèmes pour les utilisateurs. J’ai donc utilisé ces connaissances pour créer un plan de site.
Mon objectif ici était de prendre des décisions stratégiques sur l’architecture des informations qui amélioreraient la navigation globale sur le site Web. La structure que j’ai choisie a été conçue pour rendre les choses simples, faciles et rapides.
Maquettes papier
Ensuite, j’ai esquissé des maquettes papier pour chaque écran de mon application, en gardant à l’esprit les problèmes de l’utilisateur concernant la personnalisation d’un sweat et le processus de paiement.
Les différentes maquettes papier de l’écran d’accueil à droite se concentrent sur l’optimisation de l’expérience de navigation pour les utilisateurs.
Des étoiles ont été utilisées pour marquer les éléments de chaque croquis qui seraient utilisés dans les maquettes numériques initiales.
Maquette papier peaufinée
Maquettes papier - Différentes tailles d'écran
Étant donné que les clients de SweatKrea accèdent au site via différents types d’appareils (PC, mobile, tablette, etc.), j’ai commencé à travailler sur des conceptions pour des tailles d’écran supplémentaires afin de m’assurer que le site serait parfaitement responsive (adapté aux différents écrans).
Maquettes papier de la page d’accueil – Versions PC et mobile
Maquettes numériques
Le passage des maquettes papier aux maquettes numériques a simplifié la compréhension de la façon dont la conception repensée pourrait résoudre les problèmes des utilisateurs et améliorer leur expérience globale.
Accorder une importance particulière à l’arrangement des boutons fonctionnels et à la disposition des éléments visuels sur la page d’accueil était un aspect essentiel de ma stratégie.
Maquettes numériques - Différentes tailles d'écran
Maquettes numériques de la page d’accueil – Versions PC et mobile
Prototype basse-fidelité
Pour créer un prototype basse fidélité, j’ai connecté tous les écrans intervenant dans le flux principal de l’utilisateur : la personnalisation d’un sweat, l’ajout du produit au panier et le paiement.
À ce stade, les personnes interrogées m’avaient fait part de leurs commentaires sur mes conceptions, en particulier en ce qui concerne l’emplacement des boutons et la structure des pages. J’ai pris soin de prendre en compte leurs retours et d’intégrer plusieurs suggestions dans des sections visant à résoudre les problèmes signalés par les utilisateurs.
Étude d'utilisabilité
Paramètres
Type d'étude
Étude d'utilisabilité modérée
Localisation
France, à distance
Participants
5 participants
Durée
15 à 20 minutes
Conclusions
Voici les principales conclusions révélées par l’étude d’utilisabilité :
Panier
Une fois arrivés sur l'écran de paiement, les utilisateurs n'avaient aucun moyen de modifier la quantité d'articles dans le panier.
Personnalisation
Les utilisateurs cherchaient la personnalisation directement sur la page d'accueil.
Rechercher
Les utilisateurs avaient l'habitude d'utiliser le champ de Recherche tout en haut de la page.
Affiner la conception
Maquettes
Pour rendre le processus de personnalisation encore plus simple et plus accessible pour les utilisateurs, j’ai ajouté un bouton Personnaliser sur la page d’accueil.
L’étude d’utilisabilité a démontré que plusieurs utilisateurs souhaitaient commander plusieurs exemplaires du sweat qu’ils venaient de personnaliser. J’ai donc ajouté la possibilité pour un utilisateur de modifier la quantité d’articles dans le panier à l’aide d’une simple option « + » ou « – » ou de le supprimer en cliquant sur l’icône représentant une corbeille. Cela a permis aux utilisateurs de modifier leur panier grâce à quelques clics seulement.
Maquettes : taille d’écran d’origine
Maquettes : différentes tailles d’écran
J’ai repensé les mises en page pour les tailles d’écran supplémentaires dans mes maquettes, sur la base de mes précédentes maquettes fonctionnelles (par exemple, les images ont été soit disposées différemment soit représentées dans un carrousel). Étant donné que les utilisateurs achètent en utilisant différents appareils, il était important d’optimiser l’expérience de navigation pour une gamme de tailles d’appareils, telles que les mobiles et les tablettes, afin que les utilisateurs aient l’expérience la plus fluide possible.
Maquettes de la page d’accueil – Versions PC et mobile
Prototype haute-fidelité
Mon prototype haute-fidélité suivait le même flux utilisateur que le prototype basse-fidélité et incluait les modifications de conception apportées après l’étude d’utilisabilité.
Considérations relatives à l’accessibilité
J'ai utilisé une police lisible avec différentes tailles pour une hiérarchie visuelle claire .
J'ai veillé à ce que le texte et les images aient un contraste suffisant par rapport à leur arrière-plan. Cela améliore la lisibilité pour les personnes ayant des problèmes de vision.
J'ai utilisé des points de repère pour aider les utilisateurs à naviguer sur le site, y compris les utilisateurs qui s'appuient sur des technologies d'assistance.
Pour aller de l'avant
Points à retenir
Incidence
Les utilisateurs cible ont réussi à personnaliser facilement et rapidement leur sweat-shirt. Ils ont apprécié la navigation intuitive, la charte graphique épurée, les images attrayantes et une hiérarchie visuelle claire.
Ce que j'ai appris
J’ai appris qu’il faut réussir à simplifier au maximum un flux afin de permettre à l’utilisateur d’atteindre ses objectifs rapidement. Je retiens également que pour rendre un site responsive, il faut revoir la présentation du site pour le rendre facilement accessible sur tous les types de supports.
Prochaines étapes
Réaliser des tests d'utilisabilité pour vérifier la qualité de l'expérience utilisateur sur SweatKrea.
Faire évoluer le site web de SweatKrea en ajoutant de nouvelles fonctionnalités afin de répondre à de nouveaux besoins et d'améliorer encore plus l'expérience utilisateur.
Mesurer l'efficacité en analysant les Indicateurs Clés de Performance (ICP).
Merci d’avoir examiné mon travail sur le site web SweatKrea !
Si vous souhaitez en savoir plus, contactez-moi.