Léa Ladjevardi

Conception site web Responsive SweatKrea

SweatKrea

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

Projet SweatKrea

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

Numéro 1

Personnalisation longue

Le flux de personnalisation est en général trop long, ce qui entraîne souvent un abandon de l’achat.

Numéro 2

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.

Numéro 3

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.

Maquette papier SweatKrea - Accueil 01
Maquette papier SweatKrea - Accueil 02
Maquette papier SweatKrea - Accueil 03
Maquette papier SweatKrea - Accueil 04

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 SweatKrea - Accueil

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).

SweatKrea Wireframe papier variantes accueil

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 SweatKrea

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

Numéro 1

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.

Numéro 2

Personnalisation

Les utilisateurs cherchaient la personnalisation directement sur la page d'accueil.

Numéro 3

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.

Maquettes SweatKrea avant et après étude d'utilisabilité 1

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 SweatKrea avant et après étude d'utilisabilité 2

Maquettes : taille d’écran d’origine

SweatKrea - maquette 1
SweatKrea - maquette 2
SweatKrea - maquette 3
SweatKrea - maquette 4
SweatKrea - maquette 5
SweatKrea - maquette 6

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é

Numéro 1

J'ai utilisé une police lisible avec différentes tailles pour une hiérarchie visuelle claire

Numéro 2

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.

Numéro 3

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

Numéro 1

Réaliser des tests d'utilisabilité pour vérifier la qualité de l'expérience utilisateur sur SweatKrea.

Numéro 2

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.

Numéro 3

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.