Fafa des bois

Etude de cas

Création d'une application de vente e-commerce.

Avis de non-responsabilité : Je ne suis affiliée à Fafa des bois à aucun titre.

Rôle

Ux /Ui designer

Missions

Webdesign
Aspect visuel
Prototypage
Test utilisateur

Timing

2 mois

Outils

logo  Adobe xd
Adobe XD
logo adobe illustrator
Illustrator

_1 Contexte | Problématique

illustration bonhomme coeur
J'ai toujours été très concernée par la cause écologique, le concept du "acheter moins mais mieux", la seconde main, les objets uniques qui sont faits avec temps et passion. Cependant, lorsque l'on voit la facilité d'achat et le prix complètement dérisoire des objets "manufacturés" disponibles sur les plus grands sites de vente en ligne, il est assez difficile d'imaginer susciter le même engouement pour des objets chers et dont les achats se font au bouche à oreille.

La problématique est donc toute trouvée pour un nouveau défi de taille !
Problématique
Comment mettre en lumière le travail d'un artisan et faciliter l'achat de ses créations?
Notre étude se fait sur le travail de l'artisan Fafa Des bois, dont le travail souffre d'un manque de visibilité et d'accessibilité fort.
[ au moment de cette étude de cas, Fafa Des bois ne possède pas de site ]

Depuis 2010 Fabrice, alias FAFA DES BOIS, imagine et crée des pièces uniques en détournant des objets du quotidien et des matières telles que le bois, le papier mâché, ou encore le métal. Dans sa grange de l’Eure, cet autodidacte créatif à l’imagination débordante manipule ainsi des embauchoirs à chaussures, des selles de vieux vélos, des étuis à violon, des cuillères à soupe, des plaques émaillées cabossées… pour en faire, notamment, des trophées ludiques et poétiques à hisser en tête de lit ou dans le salon, du mobilier original et décalé ou encore des animaux au design singulier ! Ses créations sont des pièces uniques ou réalisées en mini séries.

Mes Challenges :

Aller au final

_2 Solution

Comment faciliter les ventes ?
Création d'un site e-commerce
Comment mettre en valeur l'univers ?
Conception d'un Storytelling
application finale
la création d'une application de e-commerce pour permettra la visibilité et l'accès aux produits de l'artisan Fafa des bois. Tandis qu'un storytelling bien travaillé accentuera la valeur ajoutée des produits uniques de l'artisan.

Mes motivations :

_3 Procédé

timelapse
rond rouge
rond rouge
rond rouge
rond rouge
rond rouge

Recherches

Veille digitale
Comprendre l'utilisateur

Idéation

Personae
Experience map

Identité de marque

Veille graphique
Recherches graphiques
Storytelling
Charte graphique

Prototype

Architecture
sketchs
Wirefrimes
tests utilisateurs
Maquettes BD

Final

Application finale

_5 Idéation

- Personae

photo personae

Bio

Bourguignonne, Claire a grandi à la campagne mais travaille maintenant au centre de la capitale. Amatrice de beaux meubles, elle aime tout particulièrement ce qui lui rappelle son enfance à la campagne. Entre chic parisien et brut de campagne, elle aime passer du temps à chercher LA pièce qui manque à son loft lumineux!

Réseaux

logo facebook
Facebook
logo instagram
Intagram
logo pinterest
Pinterest

Claire Martin

photo du persona
_ Femme, 40 ans
_ CSP+
_ Paris
_ Mariée, 1 enfant
_ Responsable des équipes commerciales

Tendances

Technophile
niveau
Sportive
niveau
Confiance en soi
niveau
Elégante
niveau
heart

Tendances

Confiance : Peu enclin à acheter à un particulier car doute sur la qualité.
heart break

Freins

• Etre bien chez soi
• Arriver à retrouver le réconfort de la campagne en respectant son appartement chic!

Claire Martin

photo du persona
_ Femme, 40 ans
_ CSP+
_ Paris
_ Mariée, 1 enfant
_ Responsable des équipes commerciales

Bio

Bourguignonne, Claire a grandi à la campagne mais travaille maintenant au centre de la capitale. Amatrice de beaux meubles, elle aime tout particulièrement ce qui lui rappelle son enfance à la campagne. Entre chic parisien et brut de campagne, elle aime passer du temps à chercher LA pièce qui manque à son loft lumineux!

Réseaux

logo facebook
Facebook
logo pinterest
Facebook
logo instagram
Facebook

Tendances

Technophile
niveau
Sportive
niveau
Confiance en soi
niveau
Elégante
niveau
heart

Tendances

Confiance : Peu enclin à acheter à un particulier car doute sur la qualité.
heart break

Freins

• Etre bien chez soi
• Arriver à retrouver le réconfort de la campagne en respectant son appartement chic!

- Expérience map

Afin de mieux cerner nos besoins pour la création des premiers écrans, je crée une expérience map avec notre personae Claire. Je veux voir comment elle peut interagir avec l'application de vente en ligne de Fafa dans son quotidien.
experience map

On retient :

_6 Identité de marque

- Moodboard

moodboard
L'idée d'un retour au bois brut a guidé mes recherches avec des artistes comme Giuseppe Penone et Henrique Oliveira qui montrent le bois à nu mais à travers un travail titanesque. Je me suis beaucoup inspirée également d'artistes ou de marques comme Concept 1331 qui utilisent merveilleusement bien la délicatesse du trait en adéquation avec des aplats bruts et une ligne imparfaite.

- Recherches graphiques

recherches graphiques
Les recherches graphiques se sont basées sur le "fait main", Le noir est brut ainsi que le contraste qu'il produit, comme le bois utilisé par notre artisan. Le trait baveux, souligné par l'utilisation de l'encre de Chine, donne un aspect presque palpable.

- Storytelling

Pour trouver une personnalité à la marque Fafa je me suis penchée sur mon personae - Claire - et les données récoltées pendant la recherche de ma cible. La marque devra refléter des valeurs cohérentes avec les attentes de Claire. Je me suis arrêtée sur 3 termes :

Authentique

Humain

Unique

Fafa des bois travaille la matière brute, des objets de qualité avec soin et passion. Il est primordial que son site et sa communication reflète cette sincérité de création.
Il y a un humain derrière ces objets, des mains ont travaillé ce bois et poncé ce meuble ! Ces produits ne sortent pas de l'usine mais d'un atelier.
Chaque pièce est unique et limitée. Elles sont travaillées avec soin et acquièrent une réelle personnalité. Il y a des séries mais pas d'objets manufacturés.
Application :
Ne pas négliger les détails de provenance, matériaux, chaque objet doit être totalement transparent, sincère.
Application :
S'approprier les mots, les noms des objets, créer un petit monde où on peut sentir la créativité jusque dans les textes.
Application :
intégrer si possible une petite histoire à chaque objet, ou à certains.
exemple dans l'applicationexemple dans l'applicationexemple dans l'application

Authentique

Fafa des bois travaille la matière brute, des objets de qualité avec soin et passion. Il est primordial que son site et sa communication reflète cette sincérité de création.
Ne pas négliger les détails de provenance, matériaux, chaque objet doit être totalement transparent, sincère.
Application :
exemple dans l'application

Humain

Il y a un humain derrière ces objets, des mains ont travaillé ce bois et poncé ce meuble ! Ces produits ne sortent pas de l'usine mais d'un atelier.
Application :
S'approprier les mots, les noms des objets, créer un petit monde où on peut sentir la créativité jusque dans les textes.
exemple dans l'application

Unique

Chaque pièce est unique et limitée. Elles sont travaillées avec soin et acquièrent une réelle personnalité. Il y a des séries mais pas d'objets manufacturés.
Application :
intégrer si possible une petite histoire à chaque objet, ou à certains.
exemple dans l'application

- La charte

Logo
logo de fafa des bois
logo avec taille conseillée
logo inférieur à 200pxlogo inférieur à 50px
logo sur du bois
Palette
Couleurs primaires
Couleurs secondaires
#F2F2F2
#FFFFFF
#2E2925
#939393
#2AA0CC
#FF6600
Police
Polices
image typographie aileron semibold
image typographie aileron semibold italic
image typographie aileron light
Aileron
_semibold
Aileron
_semibold italic
Aileron
_light
Applications
typographies utilisées
Illustrations
illustrationillustrationillustrationillustrationillustration
Icones
icon menuicon retouricon full screenicon buyicon searchicon personnal dataicon shareicon wish
Design
system
exemple d'application de la charte graphique
Logo
logo de fafa des bois
logode fafa incrusté en bois
Palette
#F2F2F2
#FFFFFF
#F2F2F2
#939393
#2aa0cc
#FF6600
Polices
image typographie aileron semibold
Aileron
_semibold
image typographie aileron semibold italic
Aileron
_semibold italic
image typographie aileron light
Aileron
_light
Illustrations
illustrations
Icones
icon menuicon retouricon full screenicon buyicon searchicon personnal dataicon shareicon wish

_7 Prototype

- Arborescence

L'arborescence permet une navigation efficace dans le site en se basant sur le principe d'une navigation fluide qui permet à l'utilisateur de trouver rapidement ce qu'il cherche mais également de papillonner de produit en produit sans interruption.
animation de l'arborescence

- Accessibilité

Les maquettes sont faites dans le respect de la zone de confort de la grande majorité des utilisateurs. Par exemple, en fonction de la prise en main de l'appareil, des zones sont plus accessibles que d'autres. Il est donc plus pratique pour l'utilisateur que les éléments les plus fréquemment utilisés soient au bas de l'écran comme le menu.
94% des utilisateurs utilisent leur portable à la verticale
6% des utilisateurs utilisent leur portable à l'horizontale
zone de confort dans l'utilisation du portable
94% des utilisateurs utilisent leur portable à la verticale
6% des utilisateurs utilisent leur portable à l'horizontale
zone de confort dans l'utilisation du portable
(source : Luke Wroblewski / données 2015)

- Recherches papier

Avec l'analyse de la concurrence de Fafa Des bois et d’autres applications de e-commerce très sollicitées (Amazon, Asos, La Redoute, Fnac...) j’ai fait des observations sur les mises en pages qui fonctionnaient le mieux pour éviter les effets rebonds ou les abandons. J'ai esquissé des solutions possibles sur papier pour les écrans principaux avant de m'engager dans des designs plus précis. Cela m'a permis de prototyper plusieurs types de mises en pages plutôt que de me concentrer sur les détails de conception.
sketch de l'application

- Wireframes

Suite à cette première ébauche j'ai pu créer l'interface de l'application de façon à avoir l'ensemble des éléments. Les écrans en nombre réduit permettent une première approche et la création d'un scénario de test pour les utilisateurs. L'utilisation des wirefrimes m'a fait économiser beaucoup de temps lors des modifications.
wirefrimes

- Usertest

J'ai créé avec l'application d'Adobe xd une maquette testable (non finalisée) afin de vérifier l'usabilité de l'application sur les utilisateurs. Le test a été passé sur 3 utilisateurs, en scénarios guidés et en 2 parties :
Les participants sont pévenus que les missions sont une façon de les guider. Il est primordial qu'ils agissent en les effectuant comme s'ils voulaient vraiment acheter les meubles donc avec les exigences et les attentes d'acheteur potentiel, certaines missions peuvent avorter si en tant qu'acheteur des éléments ne leur conviennent pas, et pourquoi.

Test Partie 1 : navigation dans l'application

zoom icone
détails du test utilisateur
Mission
Mettre le trophée "Cerf selle" dans son panier
Obstacles
  • Solutions
Réduire la hauteur de la partie titre pour inviter l'utilisateur au scroll
  • l'arrivée sur la partie des trophées prête à confusion: le titre/illustration sur certains portables s'affiche en hauteur de 100%, elle est prise pour une page de chargement
Indiquer le nombre de personnes ayant l'article dans leur panier pour les pièces uniques
La fiche produit ne montre pas si le produit risque de ne plus être disponible lors de l'achat
Vérifier s'il est bien dans le panier
  • l'utilisateur ne montre aucune difficulté
L'apparition d'une vignette sur l'icône du panier suffit à rassurer l'utilisateur sur la prise en compte de son action
Mettre la lampe "Rond'ampoule" dans ses favoris
  • Confusion d'un utilisateur sur la présence des favoris dans le menu, il clique dessus pour ajouter aux favoris et se retrouve dans la partie favoris
Remplir l'icône du menu
Ajouter le meuble "Rinos'bibli" dans le panier
  • Les utilisateurs mettent le meuble dans le panier sans se rendre compte que la livraison n'est pas possible pour cet objet.
Mettre un message d'alerte afin d'éviter toute erreur de compréhension
Missions
Obstacles
Solutions
Mettre le trophée "Cerf selle" dans son panier
  • l'arrivée sur la partie des trophées prête à confusion: le titre/illustration sur certains portables s'affiche en hauteur de 100%, elle est prise pour une page de chargement
Réduire la hauteur de la partie titre pour inviter l'utilisateur au scroll
  • La fiche produit ne montre pas si le produit risque de ne plus être disponible lors de l'achat
Indiquer le nombre de personnes ayant l'article dans leur panier pour les pièces uniques
Vérifier s'il est bien dans le panier
  • l'utilisateur ne montre aucune difficulté
L'apparition d'une vignette sur l'icône du panier suffit à rassurer l'utilisateur sur la prise en compte de son action
Mettre la lampe "Rond'ampoule" dans ses favoris
  • Confusion d'un utilisateur sur la présence des favoris dans le menu, il clique dessus pour ajouter aux favoris et se retrouve dans la partie favoris
Remplir l'icône du menu
Ajouter le meuble "Rinos'bibli" dans le panier
  • Les utilisateurs mettent le meuble dans le panier sans se rendre compte que la livraison n'est pas possible pour cet objet.
Mettre un message d'alerte afin d'éviter toute erreur de compréhension
La navigation se fait sans trop d'accrocs, l'organisation des éléments est très familière aux utilisateurs qui ne perdent pas leurs repères. Le bilan de ce premier test est très positif et les points d'améliorations soulevés permettront d'optimiser au maximum l'application finale.

Test Partie 2 : Le tunnel d'achat

zoom icone
détails du test utilisateur
Mission
Finaliser la commande avec le compte actuel
Obstacles
  • Solutions
aucun problème
  • La rapidité possible d'une commande sans compte est soulignée comme une bonne idée
Supprimer un article lors de la vérification
  • aucun problème
En cas de suppression regrettée, l'utilisateur peut annuler
Mettre la lampe "Rond'ampoule" dans ses favoris
  • aucun problème
une case est à cocher s'il s'agit d'un cadeau
Missions
Obstacles
Solutions
Finaliser la commande avec le compte actuel
  • aucun problème
La rapidité possible d'une commande sans compte est soulignée comme une bonne idée
Supprimer un article lors de la vérification
  • aucun problème
En cas de suppression regrettée, l'utilisateur peut annuler
Cette commande est pour un ami
  • aucun problème
une case est à cocher s'il s'agit d'un cadeau
Le tunnel d'achat est un succès, la navigation est fluide et les utilisateurs passent l'épreuve du test sans le moindre stress. De plus, la rapidité de ce tunnel et la gamification de la progression sont satisfaisants.

On retient :

_8 Final

- La maquette testable

Le prototype de l'application permet de la tester comme si elle était déjà développée. Le scénario créé est le scénario passé par les testeurs afin de tester l'ensemble des zones de l'application et de finir sur le tunnel d'achat jusqu'au paiement.

- La navigation

écran panier
Accueil
Suite à l'animation du logo qui marque l'entrée dans l'application, l'utilisateur est invité à découvrir l'univers de Fafa des bois, ou à parcourir les créations au hasard du scroll.
écran page produits
Page produits
Les pages produits présentent ceux-ci avec une touche personnelle et donnent un aperçu de la qualité des produits en spécifiant les matériaux.
écran fiche produit
Fiche produit
Elle est totalement transparente sur la provenance mais va plus loin en dévoilant les histoires des objets ainsi que leur description détaillée.
écran  wishlist / favoris
Favoris
Peu d'actions sont proposées dans les favoris, l'idée est de faire passer les articles de favoris à panier le plus facilement possible.
écran compte
Compte
Le compte permet de gérer rapidement son historique, données et mot de passe le plus efficacement possible.
écran panier
Panier
Les articles étant souvent uniques, le panier permet de demander une réservation pour les coups de cœur. Le bouton de panier est exceptionnellement imposant et coloré afin d'attirer le regard. Sa position, au plus près du doigt permet une action rapide.
screen home
screen produits
screen fiche produit
Accueil
Suite à l'animation du logo qui marque l'entrée dans l'application, l'utilisateur est invité à découvrir l'univers de Fafa des bois, ou à parcourir les créations au hasard du scroll.
Page produits
Les pages produits présentent ceux-ci avec une touche personnelle et donnent un aperçu de la qualité des produits en spécifiant les matériaux.
Fiche produit
Elle est totalement transparente sur la provenance mais va plus loin en dévoilant les histoires des objets ainsi que leur description détaillée.
screen favoris
screen compte
screen panier
Favoris
Peu d'actions sont proposées dans les favoris, l'idée est de faire passer les articles de favoris à panier le plus facilement possible.
Compte
Le compte permet de gérer rapidement son historique, données et mot de passe le plus efficacement possible.
Panier
Les articles étant souvent uniques, le panier permet de demander une réservation pour les coups de cœur. Le bouton de panier est exceptionnellement imposant et coloré afin d'attirer le regard. Sa position, au plus près du doigt permet une action rapide.

- Le tunnel d'achat

Le tunnel d'achat est la partie la plus importante du site. Afin d'éviter au maximum le nombre d'abandon des utilisateurs, il doit être optimisé, rapide et surtout rassurant.
Le tunnel d'achat de l'application reprend les codes connus de tout utilisateur familiers de l'achat en ligne. Il est composé d'une timeline qui permet de revenir à l'action précédente tout au long du processus, pour minimiser l'effet de stress. Le menu est absent du tunnel d'achat afin d'éviter un surplus d'informations, le seul moyen d'abandonner la commande est le retour au panier, en haut à gauche.
screen tunnel d'achat étape connexion
screen tunnel d'achat étape livraison
screen tunnel d'achat étape vérification
Connexion
Il est possible de commander en tant qu'invité, ce qui permet à l'utilisateur de réduire le nombre de données qu'il entre dans l'application, gain de temps et de confiance.
Livraison
En plus des classiques "à domicile" et "en point relais", l'acheteur peut également demander un rendez-vous et aller chercher le meuble sur place. Une option qui rappelle que l'on fait achat avec un artisan !
Vérification
Cette étape, très importante, permet de diminuer drastiquement le stress de l'utilisateur. Il peut supprimer un article mais le retour arrière est très facile. Des options lui permettent de faire un cadeau ou d'ajouter des articles.
screen tunnel d'achat étape paiement
screen tunnel d'achat étape confirmation
Paiement
Les logos sont très importants pour rassurer l'acheteur dans son achat en ligne. L'option Paypal permet aussi d'accentuer la confiance, et pour l'acheteur de ne pas rentrer sa carte s'il n'en a pas l'envie.
Confirmation
La confirmation de l'achat met un point final à la commande et permet de suivre son achat par mail, seul moyen pour les acheteurs invités de voir leur commande.
écran connexion
1 - Connexion
Il est possible de commander en tant qu'invité, ce qui permet à l'utilisateur de réduire le nombre de données qu'il entre dans l'application, gain de temps et de confiance.
écran livraison
2 - Livraison
En plus des classiques "à domicile" et "en point relais", l'acheteur peut également demander un rendez-vous et aller chercher le meuble sur place. Une option qui rappelle que l'on fait achat avec un artisan !
écran vérification
3 - Vérification
Cette étape, très importante, permet de diminuer drastiquement le stress de l'utilisateur. Il peut supprimer un article mais le retour arrière est très facile. Des options lui permettent de faire un cadeau ou d'ajouter des articles.
écran paiement
4 - Paiement
Les logos sont très importants pour rassurer l'acheteur dans son achat en ligne. L'option Paypal permet aussi d'accentuer la confiance, et pour l'acheteur de ne pas rentrer sa carte s'il n'en a pas l'envie.
écran confirmation
5 - Confirmation
La confirmation de l'achat met un point final à la commande et permet de suivre son achat par mail, seul moyen pour les acheteurs invités de voir leur commande.
écran panier
Panier
Les articles étant souvent uniques, le panier permet de demander une réservation pour les coups de cœur. Le bouton de panier est exceptionnellement imposant et coloré afin d'attirer le regard. Sa position, au plus près du doigt permet une action rapide.

_9 Points clés

Ce que j'ai appris :

Mes autres projets

TOP