Aucune impasse que des solutions !
Etude de cas
Contexte
Instruction de Sharpen dans le cadre du Certificat Google UX Design : "Concevez un flux pour commander des sweat-shirts personnalisés"
Aperçu du projet
Le projet :
Dans le cadre de l’instruction de Sharpen "Concevez un flux pour commander des sweat-shirts personnalisés", nous créons une nouveau site web pour permettre aux utilisateurs de personnaliser des sweat-shirts de manière simple, créative et interactive.
Le site web offre plusieurs fonctionnalités tels que la personnalisation de sweat-shirt assistée par une intelligence artificielle.
Durée du projet:
Le projet a durée de novembre à décembre 2024.
Mon rôle :
Etant le seul designer UX dans ce projet, j’ai eu un rôle généraliste qui englobait plusieurs rôles et responsabilités.
Le problème :
Il est parfois difficile d’offrir ou de s’offrir des sweat-shirts originaux. Les utilisateurs veulent pouvoir personnaliser un sweat-shirt rapidement avec un résultat original afin d’offrir ou de s’offrir un cadeau unique, esthétique et abordable qui fera plaisir.
Voici des captures d'écran du début et de la fin du flux utilisateur.
Responsabilités :
Voici certaines de mes responsabilités :
- Recherche utilisateur
- Audit concurenciel
- Architecture de l'information
- Visual design
- Wireframing
- Etude d’utilisabilité
- Prototypage
L’objectif :
Concevoir un site Web pour Sweet Sweat permettant de personnaliser facilement et rapidement des sweat-shirts.
Comprendre l’utilisateur
-
Recherches utilisateurs
-
Quelques idées issus d’un brainstorming
-
Audit concurrentiel
-
Personas
-
Énoncés de problèmes
-
Carte de parcours utilisateur
-
Tâche d’utilisateur et étapes de flux utilisateur
-
Storyboard « Vue d’ensemble »
-
Storyboard « Gros plan »
Recherches : résumé
Il y a eu quatre étapes principales :
-
Une recherche utilisateur : grâce à des entretiens et des cartes d’empathies, la recherche utilisateur a permis de connaître les besoins des utilisateurs, ici des personnes voulant personnaliser des sweat-shirts rapidement et avoir un résultat esthétique, créatif et original.
-
Un audit concurrentiel : nous avons pu voir les points forts, les points faibles de 4 de nos concurrents et voir les manques.
-
Une étude d’utilisabilité faite au moment du prototype lo-fi.
-
Un deuxième test auprès des mêmes utilisateurs.
Recherche utilisateurs : résumé
Après un brainstorming, nous avons réalisé des entretiens et des cartes d’empathie pour comprendre les futurs utilisateurs de notre site Web et leurs besoins.
Après recherche, nous avons identifié comme groupe d’utilisateur principal des personnes âgés de 18 à 35 ans, qui souhaitent personnaliser des vêtements en ligne. Nous avons pris en compte le fait que certains utilisateurs ont déjà personnalisé des sweat-shirts en ligne et que d’autres ne l’avaient jamais fait.
​
3 des 5 des utilisateurs ont déjà personnalisé et acheté des sweat-shirt en ligne.
Notre recherche auprès de ce groupe d’utilisateur nous a permis de mettre en avant d’autres besoins mais nous avons pris le parti de nous concentrer sur la personnalisation assistée par intelligence artificielle.
Recherche utilisateurs : points de douleur
1
Créer facilement un
sweat-shirt original
Les utilisateurs ont besoin de créer facilement et rapidement des sweats-shirts. Il est difficile de créer un design original.
2
Personnaliser
Il faut non seulement créer mais être capable de personnaliser le design mais aussi les caractéristiques du sweat-shirt.
3
Commander rapidement
Une des problématiques était de pouvoir créer et commander rapidement.
Il faut que tout le flux utilisateur soit rapide et facile et que l’utilisateur ne bloque par sur une des étapes comme la commande.
Quelques idées issus d’un brainstorming
-
IA génère un design basé sur une description faite par l’utilisateur
-
Possibilité de choisir entre différents styles de police et de design
-
Possibilité de dessiner à la main ou d’importer ses créations voire de les faire évoluer avec l’IA
-
Ajustement automatique de dessin ou du texte par rapport à la taille du pull
-
Recommandation selon les goûts de l’utilisateur
-
Possibilité pour l’IA de trouver des slogans
-
IA peut adapter les idées de l’utilisateur selon la mode actuelle ou une mode d’une certaine année
-
Possibilité de publier un design sur les réseaux sociaux
-
Système de vote ou conseil sur un design par d’autres utilisateurs
-
Personnalisation du paquet cadeau
-
Concours de design avec des votes et le gagnant obtient son sweat shirt gratuitement
Audit concurrentiel
-
Objectif: Comparer l'expérience utilisateur de chaque concurrent du site internet
PDF du tableau et PDF du rapport
Persona : Clara A.
Énoncé de problème :
Clara est une jeune femme amoureuse, créative mais hésitante lorsqu'il s'agit de choisir un cadeau personnalisé pour son copain qui a besoin d'un site simple et inspirant pour personnaliser un sweat-shirt pour son copain parce qu’elle manque d'idées créatives, elle souhaite que le processus de personnalisation soit facile et rapide.
Récit utilisateur :
En tant que jeune femme active cherchant un cadeau pour mon petit ami, je veux pouvoir personnaliser un sweat-shirt rapidement avec un résultat original afin d’offrir un cadeau unique, esthétique et abordable qui lui fera plaisir.
Persona : Amadou D.
Énoncé de problème :
Amadou cherche un moyen simple et rapide pour créer des sweat-shirts personnalisés et les vendre via sa boutique en ligne. Il trouve les plateformes existantes trop complexes ou limitées en options de personnalisation, et il manque d’outils pour prévisualiser facilement le rendu final des produits.
Récit utilisateur :
En tant que jeune entrepreneur passionné par le streetwear et l’univers automobile, je veux pouvoir créer et vendre des sweat-shirts personnalisés facilement, avec des designs originaux et professionnels, afin de développer ma marque sans avoir à gérer la production et la logistique.
Carte du parcours utilisateur : Persona : Clara A.
Objectif : Je veux lui offrir un pull personnalisé qui montre que je m’intéresse à sa culture geek.
Tâche d’utilisateur et étapes de flux utilisateur
Tâche d’utilisateur : Utiliser le site pour personnaliser un sweat-shirt avec l’intelligence artificielle.
Etapes de flux utilisateur du point d'entrée à l'achèvement de la tâche pour l'application :
1. Aller sur le site internet
2. Page d'accueil
3. Aller sur Créer avec l'intelligence artificielle
4. Entrez les mots clés correspondant à vos attentes dans la boite de dialogue de l’intelligence artificielle
5. Modifiez la taille d’un des designs graphiques sur l’avant du pull
6. Validez la personnalisation du sweat-shirt
7. Sélectionnez Ajouter au panier et terminez la procédure de paiement
Storyboard « Gros plan »
Scénario : Clara, jeune femme amoureuse et créative, cherche un site simple et inspirant pour personnaliser un sweat-shirt pour son copain. Manquant d’idées, elle veut un outil rapide et intuitif.
Storyboard « Vue d’ensemble »
Commencer le design
-
Wireframes papier
-
Wireframes numériques
-
Prototype basse-fidélité
-
Étude d’utilisabilité
Wireframes papier
Voici différentes itérations de la page d’accueil avec des variations de taille d'écran incluant les ordinateurs, mobiles et les tablettes. Pour des raisons de gestion du temps, il n’y a pas eu d’itérations de chaque écran sur papier. Les itérations ont été faites de manière digitale après chaque session de critique de design.
1
2
3
4
5
6
8
7
9
15
14
13
10
11
12
6
8
7
9
1
2
3
4
5
15
14
13
10
11
12
6
7
9
1
2
3
4
5
15
14
13
10
11
12
Quelques éléments importants : 1 Tutoriel ; 2 Crée ; 3 Créée avec IA ; 4 Crée avec un styliste ; 5 Thèmes et idées ; 6 Menu ; 7 Compte ; 8 Langue ; 9 Panier ; 10 FAQ ; 11 A propos ; 12 Livraisons et retours ; 13 Réseaux sociaux ; 14 Carrousel mise en avant ; 15 Autres mises en avant
Wireframes numériques
Il était important que les utilisateurs puissent accéder à différents moyens de création de sweats-shirts et de pouvoir facilement accéder à des idées de conception.
Depuis le design du site a encore évolué.
Les utilisateurs vont pouvoir créer des designs de sweat-shirt facilement grâce à l’intelligence artificielle.
Wireframes numériques
Maquette numérique la page Créer avec l’intelligence artificielle de différentes tailles d'écran (Web, tablette, et smartphone) avant le premier test
Prototype basse-fidélité
Voici le lien vers ce prototype lo-fi.
Il s’agit du prototype issus du premier test utilisateur.
Nous vous invitons à vous concentrer sur la génération d’un design de sweat grâce à l’intelligence artificielle et à terminer le processus de commande.
Étude d'utilisabilité : paramètres
Type d'étude :
Étude d'utilisabilité non modérée
Participants :
5 participants
Localisation :
Istanbul, à distance
Durée :
15 à 20 minutes
Étude d'utilisabilité : résultats
J'ai mené deux séries d'études d'utilisabilité non modérées avec 5 participants (3 femmes et 2 hommes âgés entre 18 et 35 ans). Nous voulions déterminer, entre autres, si l'expérience utilisateur principale, la création, la personnalisation et la commande d’un sweat-shirt, était facile à réaliser pour les utilisateurs.
Les indicateurs clés de performance étaient le temps consacré à la personnalisation complète d’un sweat-shirt via l’IA, le taux de conversion, échelle de facilité d'utilisation du système et la satisfaction des utilisateurs.
1
Sauvegarder dans une bibliothèque
Les utilisateurs ne pouvaient pas sauvegarder leurs sweats-shirts personnalisés dans une bibliothèque.
2
Modifier les informations de paiement et d'expédition
Sur ce site, les utilisateurs avaient des difficultés lors de la commande et du paiement notamment au niveau des informations saisies.
3
Signal annonçant le changement du prix
Les utilisateurs se sentaient quelque peu pris au dépourvu en se rendant compte que le prix du sweat-shirt avait changé lors de la personnalisation.
Affiner le design
-
Design system
-
Maquettes
-
Prototype haute fidélité
-
Accessibilité
Design system
Maquettes
Les utilisateurs sont désormais avertis par un message du changement de prix de leur produit.
Avant l’étude d'utilisabilité
Après l’étude d'utilisabilité
Maquettes
Les utilisateurs peuvent désormais ajouter et modifier leur adresse de livraison et leur moyen de paiement plus facilement. Ils peuvent également payer sans enregistrer leur carte de paiement.
Avant l’étude d'utilisabilité
Après l’étude d'utilisabilité
Maquettes clés
Les utilisateurs peuvent désormais ajouter et modifier leur adresse de livraison et leur moyen de paiement plus facilement. Ils peuvent également payer sans enregistrer leur carte de paiement.
Prototype haute fidélité
Voici le lien vers le prototype haute-fidélité. Il ne s'agit que du flux utilisateur principal !
Prise en compte de l'accessibilité
1
Nous avons fait attention à la typographie. La classification de la police est Sans serif. Cela permet aux personnes ayants des difficultés de lecture comme les personnes dyslexiques de lire plus facilement. Nous avons aussi fait attention aux choix de la police de caractère et de la police d’écriture.
2
Les couleurs des textes, des fonds, des boutons, etc., ont été choisis pour permettre une meilleure emphase ce permet une meilleure visibilité pour les personnes ayant des problèmes visuels et cela permet de faciliter le flux utilisateur.
3
Le choix de la hiérarchie permettra à terme de pouvoir utiliser des outils d’accessibilité comme le TalkBack ce qui sera utile pour les personnes ayant des déficiences visuelles.
Conception responsive
-
Architecture des informations
-
Conception responsive
Plan de site
Voici le premier plan du site. Il a quelque peu évolué depuis.
Conceptions responsive
Les conceptions pour les variations de taille d'écran incluaient les mobiles, les tablettes et les ordinateurs de bureau.
J’ai déplacé les menus principaux vers le bas pour mettre en avant en priorité les propositions de designs de sweat-shirts pour attirer et donner envie à l’utilisateur de créer à son tour.
Ordinateur
Tablette
Site Web mobile
Aller de l’avant
-
Points à retenir
-
Les prochaines étapes
Points à retenir
Impact :
Le design a la volonté de répondre aux besoins des utilisateurs, c’est-à-dire qu’il répond, en l’état, au besoin créer et de personnaliser des sweat-shirts.
Un extrait du feed-back des pairs :
« L’utilisation de l’intelligence artificielle permet de créer facilement et de recommencer encore et encore la génération de design. »
Ce que j’ai appris :
Lors de la conception de ce site Web, nous avons appris que les recherches comme les études d’utilisabilité et les sessions de critique de design ont permis de surpasser les préjugés, d’ouvrir notre point de vue et d’améliorer sans cesse le design lors des itérations.
Les prochaines étapes
1
Permettre le partage d’avis, de création sur le site comme sur les réseaux sociaux et réaliser des tests d’utilisabilité.
2
Développer les autres options de création comme la création assistée par un styliste.
3
Permettre une meilleure accessibilité de l’application aux personnes ayant des handicaps.
Connectons-nous
E-mail : feyziocan.uxdesign@gmail.com
LinkedIn : www.linkedin.com/in/feyzi-ocan
Site Web : https://www.feyziocanuxdesign.com/
Merci
Merci d'avoir pris le temps de parcourir mon projet de site Sweet Sweat !
Il s'agit du second projet que j'ai réalisé.
Il y a très certainement de nombreuses améliorations possibles.
N'hésitez pas à me contacter pour me partager vos avis et critiques.