UX/UI Design

|

Branding

Creating an e-commerce website for a carpenter

Client

Joel Martinez

Team

Guillaume Normand Jorge Formoso Maria-José Barba Alejandro

Date and duration

2023

11 days

Role

UX Research Wireframing Artistic direction Prototyping

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.

The following project is presented to you in French. If you want to browse it in English or if you want to delve deeper, I invite you to read the detailed case study on my Medium page by clicking the button below:

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.

DISCOVER THE PROTOTYPE IN VIDEO

DISCOVER THE PROTOTYPE IN VIDEO

GUILLAUME
NORMAND
STUDIO

© Guillaume Normand 2024

GUILLAUME
NORMAND
STUDIO

© Guillaume Normand 2024

GUILLAUME
NORMAND
STUDIO

© Guillaume Normand 2024