Bonjour tout le monde,
Aujourd’hui je reviens pour vous parler de mon projet final du bootcamp UX/UI Design chez Ironhack !
Pour celui-ci j’ai travaillé avec ma camarade Caroline et co-créatrice de la marque Arlette Paris.
Ce projet a été organisé en deux parties:
- trois semaines d’UX
- trois semaines d’UI
Qui est Arlette Paris?
Arlette Paris est une marque d’accessoires pour cheveux qui sortira très prochainement en 2022. Elle a été pensé par deux amies Looren et Caroline qui se sont associée pendant l’été 2021 pour créer et vendre des produits type foulards, turbans, bandeaux…
Initialement, le projet fut pensé pour les femmes avec le crâne dégarni suite à un traitement chimiothérapique par exemple. On va voir par la suite que les lignes ont bougée !
Notre mission:
Créer son e-shop et lui donner une identité visuelle forte afin de se démarquer de ses concurrents pour avoir des clients réguliers qui la recommandent.
D’ailleurs petit disclaimer important: les photos qu’on a utilisées sur les prototypes ne sont malheureusement pas les officielles ! Je mettrai à jour cet article une fois qu’on les aura bien reçus :)
Partie UX
Recherche quantitative
Dans un premier temps nous avions fait tourner un sondage ( avec l’aide de nos proches, réseaux sociaux, canaux slacks..) afin d’avoir des précisions sur les consommateurs d’accessoires pour cheveux et les utilisateurs d’e-shop en général.
On a reçu environ 60 réponses qui nous ont beaucoup aidé et donné des pistes pour la suite des nos recherches. ( D’ailleurs je remercie infiniment les personnes qui ont pris du temps pour y répondre !)
Les points clés de nos recherches:
- Les consommateurs achètent des accessoires pour des raisons diverses et pas seulement pour des causes de maladie. ( La mode est celle qui est le plus ressorti lors de ce sondage)
- Ils préfèrent acheter ce genre de produit en boutique afin de mieux voir la matière et la taille.
- Ils sont plus intéressés par les promotions, les différentes collections et les nouveautés d’un e-shop.
- Ils aiment connaitre les valeurs d’une marque mais ce n’est pas la priorité lors de l’achat.
- C’est important pour eux de voir les commentaires/retours des autres clients.
Recherche qualitative
Suite au sondage on a pris rendez-vous pour 5 entretiens utilisateurs afin d’avoir des précisions et plus d’informations sur les préférences d’achats, leurs relations avec les marques et aussi avec les accessoires pour cheveux.
Les informations clés de nos entretiens:
- Les consommateurs ont souvent du mal à porter leurs accessoires pour cheveux, elles rencontrent des problèmes pour le nouer ou trouver des nouvelles manières de les porter.
- Il est important de lire les avis utilisateurs pour créer une confiance envers le site.
- Elles s’abonnent peu aux newsletters, ou alors seulement dans le but d’avoir des promotions.
- Elles se créent des comptes sur les sites qu’elles aiment et fréquentent souvent, mais il est important d’avoir la possibilité de continuer en tant qu’invité.
- Elles lisent les fiches-produits rapidement, le plus important est la composition.
- Les réseaux sociaux peuvent les influencer à acheter, surtout instagram.
- Les valeurs des marques sont importantes mais pas imposantes.
- L’univers de la marque influence fortement l’achat.
Pour conclure les attentes des nos utilisateurs:
- L’univers de la marque influence fortement l’achat.
- 100% des personnes ne savent pas comment porter des accessoires de types foulards.
- Les utilisateurs aiment voir les retours des autres clients sur les produits.
Analyse de la concurrence
Les analyses de la concurrence nous ont permis de voir les différentes fonctionnalités de chaque e-shop et nous situer par rapport à elles.
Ça nous a permis de constater qu’elles ciblent leurs utilisateurs en fonction de la raison d’achat: culturelle, religieuse, maladie ou mode.
Cela nous a amené à élargir notre cible et penser Arlette pour toutes les femmes qui souhaitent acheter un accessoire pour cheveux pour quelconque raison.
Strategy Blueprint
Persona et journey map
On a pu réaliser notre persona primaire et secondaire que je vous présente ci-dessous;
HMW et MOSCOW
Afin de répondre à chacune de ses questions on a utilisé la méthode MOSCOW pour trouver les fonctionnalités les plus importantes qu’on souhaite avoir sur l’e-shop d’Arlette:
Site Map
Moodboard UX
Nos enjeux
Avant de vous montrer nos premiers low-fis, les prototypes et les évolutions je je vais vous présenter nos enjeux lors de la réalisation de ce site.
“ Comment pourrions-nous permettre aux potentielles acheteuses de bénéficier d’une expérience d’achat rassurante, éclairante et non stigmatisante pour qu’elles ne fassent pas d’abandon de panier et recommandent la marque Arlette Paris ?”
Les mots-clés sont: Rassurer, éclairer et être inclusif. :)
Les solutions
Je vais vous présenter les fonctionnalités qu’on a mises en place afin de retrouver ces enjeux-là.
Pour le côté inclusif:
- Dès la home page les trois collections Arlette: L’élégante, la flamboyante et la romantique qui vont toutes les trois avoir des univers différents, et dont chaque client pourra trouver un qui lui correspond.
- Des recommandations personnalisées qui seront présentes sur la page du panier.
Pour éclairer on aura :
- un Chatbot qui pourra apporter des soutiens et répondre aux questions des clients.
- Nos avantages concurrentiels.
- Les tutoriels qui montrent comment porter et/ou nouer les produits.
- Une jauge de matière sur la page des produits afin d’avoir plus de précisions sur l’accessoire.
Et enfin pour rassurer:
- Un feed instagram pour qu’on puisse voir les produits portés par les autres clients.
- Les retours des utilisateurs sur chaque produit.
Low-fis
On a dès les premiers low-fis testé nos prototypes avec des utilisateurs, voici quelques points qui sont ressorti:
- Description des collections Arlette dès la home page ( pour qu’on puisse comprendre a quoi ça correspond).
- Espace tutoriel trop présente sur toutes les pages.
- Mettre plus de produits sur la page d’accueil.
- Mettre prix et nom du produit en dessous, pas en overlay.
- Pour les produits: mettre des filtres par exemple pour savoir si un foulard est carré, rectangle etc..
- Montrer les moyens de paiement disponibles plus tôt.
Mid-fis
On a passé pas mal de temps sur nos mid-fis, en les faisant tester à des utilisateurs très frequemment. On a au total fait 5 version haha, je vais vous présenter la première version et la dernière !
Premier mid-fi
Mid-fi final !
Partie UI
Moodboard UI
Nous avons eu tout le branding de la marque à créer, avec pour inspiration Lana Del Rey et son univers rétro couplé avec de la modernité. L’objectif a été d’équilibrer ces deux univers.
Style tile final
On a joué avec des couleurs et des typographies plutôt rétro. Nous avons aussi choisi d’utiliser un dégradé de rouge pour le cachet et faire penser à l’univers des dinner américain des années 50.
Comme les couleurs et les typographies sont des éléments forts visuellement on a tenté de jouer sur le moderne avec nos layouts, pictogrammes, illustrations et les boutons.
On a voulu apporter de la légèreté en utilisant des encadrés décalés sur les boutons et les photos.
Nous voulions également de la convivialité apportée par le discours direct tenu sur le site.
Notre plus gros challenge a été de mettre en avant trois univers pour une seule marque, du coup on a opté pour l’utilisation de formes géométriques différentes pour chaque collection ce qui nous donne un site créatif.
Hi-fis et les évolutions
On a fait pas mal de testes de désirabilités avant d’arriver à nôtre version finale.
Lors des premiers testings on s’est rendu compte que le mot “rétro” est beaucoup ressorti par rapport au mot “moderne”, le but pour nous est de balancer ces deux univers. Pour ceci on a modifié certains boutons et champs de textes en les rendant moins arrondi pour renforcer le côté moderne.
On a aussi modifié certaines couleurs pour une meilleure lisibilité, et mis en valeur la barre de navigation et la newsletter.
Prototype final !
Et une petite vidéo du prototype également ;)
Voilà ! Je vous remercie d’avoir lu mon article, personnellement je suis très fière de ce projet et j’ai hâte de voir le lancement d’Arlette Paris l’année prochaine !
