Ma façon de travailler
J’étais la Lead UX Designer, rattachée au Global Head of E-commerce. J’encadrais une équipe UX interne et une agence créative, et je travaillais chaque jour avec les product owners, les développeurs, l’équipe CRO et les équipes métier.
Rattachée à
Encadre
- Senior UX Designer, en freelance
- Senior UI Designer, en freelance
- 2 stagiaires UX/UI Designer
- Chef de projet
- 2 UX Designers
- UX Researcher
Travaille avec & livre à
Voici deux des projets que j’y ai pilotés.
Étude de cas 1
Sélecteur de coupe
Comment augmenter les conversions et réduire les retours en aidant les clients à choisir la bonne coupe dès la page de liste produits ?
Le processus
Analyse concurrentielle
J’ai passé au crible 25 concurrents. Sur toutes les pages de liste produits que j’ai étudiées, aucune n’affichait de bannière classique (une grande image avec du texte).
Historique produit
Quand j’ai proposé un sélecteur de coupe visuel pour remplacer la bannière, les product owners m’ont répondu qu’ils avaient déjà essayé : un sélecteur de coupe avec des images de jeans, en 2021. Il avait perdu son test A/B.
Test A/B de 2021 : le sélecteur de coupe (à gauche et au centre) face à la bannière classique (à droite). La bannière l’a emporté : le panier moyen a augmenté de 1,9 %.
Selon moi, le test de 2021 a échoué à cause du design, de l’interaction et du contenu, pas de l’idée :
- Les jeans du sélecteur se ressemblaient trop.
- Une fois une coupe sélectionnée, les autres options semblaient désactivées : les clients devaient revenir en arrière au lieu de passer d’une coupe à l’autre.
- Personne n’avait vérifié si les clients comprenaient les noms des coupes (tapered, straight, relaxed…).
Wireframes et interaction principale
J’ai exploré deux façons de faire fonctionner le sélecteur avec les filtres.
Concept 1 · Choisir une coupe, puis une autre
Concept 1
Quand l’utilisateur choisit une coupe, il est redirigé vers une sous-page dédiée de la page de liste des jeans. Il peut ainsi appliquer d’autres filtres en plus de la coupe choisie.
Concept 2
Quand l’utilisateur choisit une coupe, le filtre de coupe correspondant s’applique automatiquement. Il peut ensuite ajouter d’autres filtres, qui se combinent ainsi : coupe ET [filtre] OU [filtre].
Dans ce concept, choisir une nouvelle coupe désélectionne automatiquement la précédente.
Concept 2 · Choisir une coupe, puis une autre
Premier test utilisateur
- Objectifs
- Valider le concept de design
- Observer les parcours et les interactions
- Recueillir des retours sur les textes
- Recueillir des retours sur les visuels
- Dispositif
- UserTesting.com
- 15 participants
- États-Unis
- Hommes de 20 à 35 ans
- Revenus du foyer de 50 000 à 100 000 $
Le parcours testé : un participant cherche des jeans sur Google, arrive sur la page jeans et passe d’une coupe à l’autre.
Ce qu’ont dit les participants
- « J’aime l’idée générale du slider de coupes, et l’usage qu’on peut en faire. »
- « Le slider de coupes, c’est exactement ce que j’aimerais voir quand j’achète un jean. »
- « J’ai vraiment apprécié qu’il soit en haut, c’est la première chose que j’ai vue. »
- « Je l’ai aimé parce que j’allais presque cliquer sur le bouton des filtres, mais le slider était juste au-dessus et mon regard est allé directement dessus. »
- « Je ne vois pas bien la différence entre regular et straight, ni entre tapered et regular. »
- « Certains termes sont subjectifs, alors des descriptions pour clarifier, ce serait super. »
- « Sur les [images] à fond sombre, on voyait mal le style, parce que les jeans eux-mêmes étaient aussi de couleur foncée. »
Ce que nous avons constaté
- Seuls 53 % des utilisateurs étaient d’accord avec l’affirmation « les photos illustrent clairement les différents types de jeans ».
- Les termes « relaxed », « tapered » et « regular » étaient les plus déroutants.
- Seuls 7 utilisateurs ont remarqué que plusieurs filtres étaient appliqués après avoir choisi la coupe « Relaxed ».
Actions
Les utilisateurs étaient perdus face à des termes comme straight, regular et relaxed. Pour mesurer l’impact, j’ai travaillé avec le service commercial sur les données de ventes et de retours. Les produits les plus retournés, comme « Relaxed Straight », « Regular Straight » et « Straight », correspondaient justement aux termes que les utilisateurs trouvaient les plus déroutants.
Solution proposée : indiquer clairement que straight et tapered décrivent la forme du bas de la jambe, et donner à chaque coupe une courte description.
À partir des retours utilisateurs, j’ai aussi demandé à l’équipe contenu de nouvelles photos, qui montrent clairement la coupe propre à chaque jean.
Nouvelles consignes de shooting
- Fond clair (le produit se voit mieux).
- La pose doit mettre en valeur la particularité de la catégorie (voir les flèches).
- La tenue ne doit pas évoquer clairement une saison (pas de bonnet ni de veste d’hiver).
- L’attention doit rester sur le jean (pas d’accessoires longs).
Design final
Nous avons de nouveau testé le design final avec des utilisateurs. Voici ce qu’ils en ont dit, avec leurs propres mots :
Le nouveau sélecteur de coupe a remplacé la bannière en haut des pages jeans. Cette fois, il a remporté son test A/B, avec une meilleure conversion, et il est en ligne depuis.
Étude de cas 2
Nouvelle page produit
Comment améliorer la page produit pour rendre les produits plus désirables, renforcer la marque et booster les ventes ?
J’ai piloté la refonte complète de la page produit, en mettant la narration visuelle et le produit au premier plan. Des photos plus grandes, en haute résolution, montrent les détails de chaque article, tandis qu’une colonne d’informations fixe garde la taille, la coupe, la matière et l’entretien sous les yeux pendant le défilement. Résultat : une page à la fois plus marquante et plus simple à utiliser.
