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 1^er 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

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é :

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é

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

Merci d’avoir examiné mon travail sur le site web SweatKrea !
Si vous souhaitez en savoir plus, contactez-moi.