Design web (UI), Ergonomie (UX)

Wild

Création d’un site e-commerce pour la vente de produits cosmétiques bio et éco-responsable

Contexte

La marque Wild fabrique des gammes de soins cosmétiques bio et éco-responsables. Ses produits sont fabriqués entièrement en France et elle n’utilise que des ingrédients 100% naturels et locaux. Elle souhaite proposer des produits accessibles au plus grand nombre afin de permettre aux petits budgets d’accéder à des soins sains pour l’Homme comme pour l’environnement.

 

Aujourd’hui, elle vend ses produits dans sa boutique située près d’Aix-en-Provence, mais désire développer son activité et vendre à travers la France par l’intermédiaire d’un site e-commerce. La marque désire mettre en avant ses produits, ses valeurs et la mission dans laquelle elle s’est engagée : produire des cosmétiques naturels et accessibles.

Business Canva

Afin de comprendre au mieux l’entreprise et le contexte dans lequel elle se situe, j’ai réalisé un Business Canva. Cet outil me permet de comprendre rapidement la stratégie marketing, sociale et environnementale de l’entreprise.

Business canva de l'entreprise Wild

Benchmark UX

Dans le but de se positionner au mieux face à ses concurrents, j’ai entrepris une analyse concurrentielle axée sur le design d’expérience et le design d’interface, ce qui m’a permis d’identifier leurs points forts et leurs points faibles. J’ai analysé les sites de 3 concurrents sur le marché des produits cosmétiques bio et éco-responsables : Avril cosmétique, Aroma-Zone et Pulpe de vie. 

 

  • Le site d’Aroma Zone se démarque grâce aux nombreux conseils, recettes et descriptifs très détaillés pour ses produits, ce qui permet de rassurer les utilisateurs et favoriser la fidélisation. De plus, le canal d’achat est simple, efficace et intuitif.

  • Pulpe de vie et ses couleurs dynamiques incitent l’utilisateur à poursuivre sa navigation. Ses valeurs et son engagement éco-responsable sont très bien mis en avant.

  • Avril cosmétique avec son design épuré permet une navigation fluide, simple et intuitive.


À  partir de ce benchmark, voici quelques recommandations à mettre en place pour se positionner sur ce marché : 

 

  • Travailler sur la mise en place de conseils et de descriptifs produit de qualité.

  • Créer un design percutant, ergonomique et reflétant l’image de marque de l’entreprise Wild.

  • Penser responsive pour faciliter les achats sur mobile.

  • Travailler sur le parcours utilisateur du canal d’achat afin d’éviter les abandons panier.

Interviews

Pour connaître l’avis et les besoins des utilisateurs, j’ai réalisé des entretiens individuels auprès de 5 personnes. Ces interviews me permettent d’en savoir plus sur les habitudes de consommation des clients potentiels et de mieux comprendre leurs objectifs lors d’un achat. Avant d’entamer les entretiens, j’ai créé un guide avec les questions qui leur seront posées : 

 

  • Pouvez-vous me parler un peu de vous ? Que faites-vous dans la vie ?

  • Quelles sont vos habitudes de consommation ?

  • Si je vous dis produits bio et éthique, à quoi pensez-vous ?

  • Est-ce quelque chose que vous avez déjà acheté ?
    • Si oui : où achetez-vous ces produits ? À quelle fréquence ?
    • Si non : pourquoi n’achetez-vous pas ce genre de produit ?
  • Que pensez-vous des cosmétiques bio ?

  • Quels sont selon-vous les critères importants lors de l’achat de cosmétiques bio ?
  • Avez-vous déjà acheté sur un site d’e-commerce pour l’achat de vos produits de cosmétiques bio ?
    • Si oui, pouvez-vous décrire votre expérience ?
    • Si non, quels sont vos freins à l’achat sur ce type de site ?
  • Qu’attendez-vous d’un site d’e-commerce qui vend des produits bio et éthiques ?
  • Y a-t-il quelque chose que vous aimeriez ajouter ?


Les réponses aux entretiens m’ont permis de tirer les conclusions suivantes :


Objectifs principaux :

  • La transparence sur les ingrédients et la mise en avant des certifications et labels bio.

  • Proposer des produits accessibles : système d’abonnement avec réduction du prix et/ou proposer des produits anti-gaspillage.

  • Miser sur les conseils et les vidéos explicatifs pour donner confiance aux gens et les satisfaire dans la recherche de leur produit.

Objectif secondaire :

  • Pouvoir créer des partenariats avec des boutiques pour les personnes moins adepte aux sites e-commerce et leur permettre de trouver les produits en commerce.

Personas

À partir des entretiens et des données recueillies, j’ai pu créer 3 personas reflétant les caractéristiques, les besoins et les objectifs des utilisateurs cible du site. Le but étant ici de pouvoir appréhender au mieux les attentes des clients potentiels.

Experience Maps

Toujours à partir des données issues des entretiens, j’ai réalisé 3 experience maps pour chacun des persona. Cette étape a pour objectif de mieux comprendre les interactions des utilisateurs lors d’un processus d’achat générique d’un site e-commerce de produits cosmétiques bio. 

À travers ce travail, j’ai pu soulever des opportunités visant à m’aider à la construction d’un parcours utilisateur adapté aux besoins des clients cible. Nos 3 persona ont certains besoins divergeant : 

 

  • Sophie recherche à obtenir des conseils d’utilisation ou encore sur le choix d’un produit adapté à sa peau.

     

  • Marie qui dispose d’un budget plus restreint, souhaites acheter des produits de qualité à des prix raisonnables.

     

  • Amélie, plus réticente à acheter ses produits cosmétiques sur un site, aimerait les trouver en magasin afin de les tester.

Arborescence du site et User Flow

Pour structurer le site et organiser l’ensemble des pages, j’ai élaboré une arborescence. Enfin, dans le but de créer un parcours fluide, intuitif et optimiser au maximum l’expérience utilisateur, j’ai créé un User Flow pour le processus d’achat qui est un point crucial pour générer des conversions.

Wireframes

À partir du travail en amont et des idées émises, j’ai pu créer le squelette du site par l’intermédiaire de wireframes.

UI Kit

Afin de garantir une homogénéité, une cohérence visuelle et aider dans le développement du site, j’ai mis en place un UI Kit avec les différents éléments graphiques.

UI-Kit

Prototypage

Pour cette dernière étape, j’ai créé les maquettes finales en y intégrant les couleurs, les typographies et tous les autres éléments graphiques.

Maquettes Wild
Maquettes Wild
Maquettes Wild