Marketplace e-commerce · étude de cas UX/UI
Streetwear Factory.
Une conception web et mobile centrée sur la structuration du catalogue, du parcours produit et des parcours utilisateurs.
Projet présenté dans le CV — aucune attribution à un client ou à une entreprise n’est ajoutée.
Contexte / Problème
Le besoin avant la réponse.
Contexte
Streetwear Factory est un projet de marketplace e-commerce consacré à l’organisation du catalogue, des contenus produit et des parcours web et mobile.
Problématique
Traduire les besoins d’une marketplace e-commerce en une structure de catalogue et un parcours produit cohérents sur desktop et mobile.
02 / MON RÔLE
Un périmètre précis. Une contribution assumée.
Analyse des besoins, structuration des parcours utilisateurs, du catalogue et du parcours produit, puis conception des maquettes web et mobile.
Démarche / Étapes
Du besoin au livrable.
Analyser les besoins fonctionnels de la marketplace.
Organiser la structure du catalogue et les informations produit.
Définir les parcours utilisateurs et le parcours produit.
Concevoir les maquettes web et mobile.
Vérifier la cohérence entre la structure et les écrans conçus.
Structure avant style
DERRIÈRELE STYLE,LA STRUCTURE.
Six écrans de référenceAccueil, catalogue et fiche produit.
La représentation met en évidence la hiérarchie, les composants et leur recomposition responsive.
Un parcours produit en trois décisions.
- 01Découvrir
Accueil desktop/mobile : catégories, créateurs et produits phares.
- 02Parcourir
Catalogue desktop/mobile : collections, filtre et produits.
- 03Décider
Fiche produit desktop/mobile : galerie, options et achat.
Périmètre strict : aucun menu ouvert, filtre ouvert, résultat de recherche, panier, checkout ou écran non visible n’a été reconstruit.
Entrer par la découverte.
L’accueil fait alterner éditorial, catégories, créateurs et produits. La recherche reste superposée au hero, puis le parcours se prolonge vers la composition d’un look et le choix d’un créateur.
- Desktop
- Hero + carrousel / grille 4 colonnes
- Mobile
- Hero recentré / lecture séquentielle
- Invariant
- Découverte → look → personnalisation
Densité desktop. Rythme mobile.
La même hiérarchie change de cadence : quatre collections en grille puis quatorze produits sur desktop ; quatre collections empilées, six produits et une carte éditoriale sur mobile.
- Desktop
- 4 colonnes / 14 produits
- Mobile
- 1 colonne / 6 produits + promo
- Invariant
- Collections → filtre → catalogue
Réduire la distance à la décision.
Galerie, informations, couleurs, tailles et détails sont placés en regard sur desktop, puis transformés en séquence sur mobile. Le prix et l’ajout au panier conservent un bloc distinct dans les deux cas.
- Galerie
- 1 vue principale + 2 secondaires
- Options
- 5 couleurs / 6 tailles
- Suite
- Narration → produits similaires
Décisions / Raisons
Choisir, puis expliquer.
Structurer le catalogue avant de détailler les écrans.
Faire du parcours produit un fil conducteur de la conception.
Prévoir les usages web et mobile dans une même démarche.
06 / SOLUTION
La réponse, sans la sur-vendre.
Des maquettes web et mobile organisées autour d’un catalogue structuré, d’un parcours produit identifiable et de parcours utilisateurs cohérents.
Livrables
Analyse des besoins fonctionnels.
Structuration du catalogue et du parcours produit.
Parcours utilisateurs.
Maquettes web et mobile dans Figma.
Recul / Transparence
Résultat et limites.
Technologies / outils
- Figma
- Analyse des besoins
- Architecture de l’information
- Parcours utilisateurs
- Parcours produit
- Maquettes responsive
Résultat / livrables
Un ensemble de livrables de conception reliant les besoins, la structure du catalogue, le parcours produit et les interfaces web/mobile.
Limites / améliorations
Les informations disponibles décrivent la conception des parcours et des maquettes ; aucun développement, déploiement ou résultat commercial n’est revendiqué.