Design UX/UI

|

Branding

Creation du site e-commerce d'un menuisier

Client

Joel Martinez

Equipe

Guillaume Normand Jorge Formoso Maria-José Barba Alejandro

Date et durée

2023

11 jours

Rôle

Recherche UX Wireframing Direction artistique Prototypage

Cinq écrans d'ordinateur affichant chacun un écran du flux utilisateur d'achat sur le site e-commerce de Martinez, menuisier.
Cinq écrans d'ordinateur affichant chacun un écran du flux utilisateur d'achat sur le site e-commerce de Martinez, menuisier.
Cinq écrans d'ordinateur affichant chacun un écran du flux utilisateur d'achat sur le site e-commerce de Martinez, menuisier.

Le projet suivant vous est présenté en français. Si vous souhaitez le parcourir en anglais ou si vous souhaitez en profiter plus en profondeur, je vous invite à lire l'étude de cas détaillée sur ma page Medium en cliquant sur le bouton suivant.

Joel Martinez est un menuisier espagnol qui souhaite vendre sur internet des meubles fabriqués à la main sous forme de kits. Nous avons effectué une recherche utilisateur (interviews, enquête) afin de déterminer son client type et les difficultés qu'il peut rencontrer dans sa quête de meubles en ligne à savoir, principalement, un besoin d'informations pertinentes pour faire un choix éclairé. Nous avons ensuite généré des idées pour répondre au mieux à cette problématique : images de qualité, turnaroud, affichage des dimensions sur hovering, etc. Notre projet consistait à créer un flux utilisateur allant de la page d'accueil à la confirmation de la commande.

Le projet prend place dans le cadre d'un stage intensif de design UX/UI réalisé auprès d'Ironhack, une structure de formation européenne habilitée par le Ministère du Travail à délivrer des certifications de type TP - Concepteur designer UI (cliquez sur le lien pour en savoir plus). La formation avait lieu intégralement en anglais et réunissait des individus issus de toute l'Europe ; c'est la raison pour laquelle certains matériaux / images de cette étude vous seront présentés en anglais.

Si vous souhaitez en apprendre davantage, je vous invite à lire l'étude de cas détaillée en anglais sur Medium (cliquez sur le lien pour en savoir plus).

Présentation de Joel Martinez, un menuisier espagnol.
Présentation de Joel Martinez, un menuisier espagnol.
Présentation de Joel Martinez, un menuisier espagnol.

Présentation de Joel Martinez.

Illustration de notre persona, Martin Musterman, un professeur berlinois.
Illustration de notre persona, Martin Musterman, un professeur berlinois.
Illustration de notre persona, Martin Musterman, un professeur berlinois.

Illustration de notre persona, Martin Musterman, un professeur berlinois.

Illustration du parcours utilisateur de notre persona lorsqu'il tente d'acheter un meuble en ligne sur le site d'un artisan.
Illustration du parcours utilisateur de notre persona lorsqu'il tente d'acheter un meuble en ligne sur le site d'un artisan.
Illustration du parcours utilisateur de notre persona lorsqu'il tente d'acheter un meuble en ligne sur le site d'un artisan.

Illustration du parcours utilisateur de notre persona lorsqu'il tente d'acheter un meuble en ligne sur le site d'un artisan.

Enoncé de notre problème : les amateurs de meubles artisanaux ont besoin d'informations détaillées sur les produits.
Enoncé de notre problème : les amateurs de meubles artisanaux ont besoin d'informations détaillées sur les produits.
Enoncé de notre problème : les amateurs de meubles artisanaux ont besoin d'informations détaillées sur les produits.

Enoncé du problème.

Premier croquis de la page d'accueil.
Premier croquis de la page d'accueil.
Premier croquis de la page d'accueil.

Premier croquis de la page d'accueil.

Flux utilisateur en basse (au-dessus) et moyenne (au-dessous) fidélité.
Flux utilisateur en basse (au-dessus) et moyenne (au-dessous) fidélité.
Flux utilisateur en basse (au-dessus) et moyenne (au-dessous) fidélité.

Flux utilisateur en basse (au-dessus) et moyenne (au-dessous) fidélité.

Moodboard
Moodboard
Moodboard

Moodboard

Style guide
Style guide
Style guide

Style guide

Version haute fidélité de la page d'accueil et de la moitié de la page boutique.
Version haute fidélité de la page d'accueil et de la moitié de la page boutique.
Version haute fidélité de la page d'accueil et de la moitié de la page boutique.
Fin de la page boutique, page détail du produit et page de checkout en haute fidélité.
Fin de la page boutique, page détail du produit et page de checkout en haute fidélité.
Fin de la page boutique, page détail du produit et page de checkout en haute fidélité.
Page de confirmation d'achat en haute fidélité.
Page de confirmation d'achat en haute fidélité.
Page de confirmation d'achat en haute fidélité.
Maquette représentant cinq écrans d'ordinateur affichant chacun une page du flux utilisateur, depuis la page d'accueil à la page de confirmation d'achat.
Maquette représentant cinq écrans d'ordinateur affichant chacun une page du flux utilisateur, depuis la page d'accueil à la page de confirmation d'achat.
Maquette représentant cinq écrans d'ordinateur affichant chacun une page du flux utilisateur, depuis la page d'accueil à la page de confirmation d'achat.

DECOUVRez LE PROTOTYPE EN VIDEO

DECOUVRez LE PROTOTYPE EN VIDEO

GUILLAUME
NORMAND
STUDIO

© Guillaume Normand 2024

GUILLAUME
NORMAND
STUDIO

© Guillaume Normand 2024

GUILLAUME
NORMAND
STUDIO

© Guillaume Normand 2024