Création du site e-commerce d'un menuisier

#Branding

#Web Design

#Design UX/UI

Personnel

Client

Projet Fictif

Equipe

Guillaume Normand Jorge Formoso Maria-José Barba Alejandro

Date & durée

Date & durée

2023

11 jours

Rôle

Rôle

Recherche UX Wireframing Direction artistique Prototypage

Joel Martinez, un artisan espagnol passionné, rêve de vendre en ligne ses meubles faits main sous forme de kits. Pour ce projet fictif, inspiré de son histoire, notre mission était de concevoir en quelques jours un parcours utilisateur fluide, de la page d'accueil jusqu'à la confirmation de commande.

Ce défi s'inscrit dans un stage intensif en design UX/UI au sein d’Ironhack, une école de formation reconnue en Europe et habilitée par le Ministère du Travail à délivrer des certifications de type TP - Concepteur designer UI. La formation, dispensée entièrement en anglais, réunissait des participants de divers horizons, ce qui explique la présence de contenus anglophones dans cette étude.

Curieux d'en savoir plus ? Découvrez l’étude de cas détaillée sur Medium en cliquant sur le lien.

STRATEGIE & POSITIONNEMENT

Notre projet commence par une phase de recherche utilisateur. Après avoir conduit plusieurs interviews et partagé une enquête, nous avons pu isoler un persona et les difficultés qu'il peut rencontrer dans sa quête de meubles en ligne.

Présentation de Joel Martinez, notre client fictif, entouré de meubles.
Présentation de Joel Martinez, notre client fictif, entouré de meubles.
Présentation de Joel Martinez, notre client fictif, entouré de meubles.

Présentation de Joel Martinez.

Présentation de Martin Mustermann, notre persona.
Présentation de Martin Mustermann, notre persona.
Présentation de Martin Mustermann, notre persona.

Présentation de Martin Mustermann, notre persona basé sur notre recherche utilisateur.

Présentation du parcours utilisateur de notre persona lorsqu'il entreprend d'acheter un meuble sur le site d'un artisan.
Présentation du parcours utilisateur de notre persona lorsqu'il entreprend d'acheter un meuble sur le site d'un artisan.
Présentation du parcours utilisateur de notre persona lorsqu'il entreprend d'acheter un meuble 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.

OBJECTIF

Aider Joel Martinez à proposer sur son site internet un parcours de vente suffisamment clair à ses clients pour leur permettre d'acheter un meuble en kit avec toutes les informations nécessaires (dimensions, type de bois, finitions, instructions de montage, etc.).

CONTENU- WIREFRAMING

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.

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

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

BRANDING

ATTRIBUTS DE MARQUE

UNIQUE

FIABLE

ARTISANAL

Moodboard pour le site de Joel Martinez.
Moodboard pour le site de Joel Martinez.
Moodboard pour le site de Joel Martinez.
Style tile.
Style tile.
Style tile.

Notre guide de style.

RESULTAT FINAL

Après 11 jours de travail acharné et quelques jours supplémentaires de mon côté passés à affiner l'esthétique globale ainsi que l'expérience utilisateur, voici le produit de notre effort collectif.

Maquette - Page d'accueil et début de la page boutique.
Maquette - Page d'accueil et début de la page boutique.
Maquette - Page d'accueil et début de la page boutique.

Maquette - Page d'accueil et début de la page boutique.

Maquette - Fin de la page boutique - page de produit et page de checkout.
Maquette - Fin de la page boutique - page de produit et page de checkout.
Maquette - Fin de la page boutique - page de produit et page de checkout.

Maquette - Fin de la page boutique - page de produit et page de checkout.

Page de confirmation de commande.
Page de confirmation de commande.
Page de confirmation de commande.

Page de confirmation de commande.

Maquette - Résultat final.
Maquette - Résultat final.
Maquette - Résultat final.
  • Guillaume Normand - Studio

  • Guillaume Normand - Studio

  • Guillaume Normand - Studio