Redesign de la Product Card
pour le e-commerce B2C
Le site e-commerce de Scott Sports doit être entièrement modernisé afin d’offrir une expérience plus actuelle, performante et orientée conversion. Dans ce cadre, j’ai mené un travail exploratoire sur un élément clé du parcours : la carte produit, pivot entre inspiration, comparaison et ajout au panier.
Problème à résoudre
Les cartes produits existantes valorisent peu le visuel, rendent la comparaison difficile et ne tirent pas pleinement parti des interactions possibles (variantes, listes de souhaits, recommandations, etc.). Dans un contexte de refonte globale, la Product Card devra :
Renforcer l’impact visuel et émotionnel des produits.
Faciliter la comparaison et la prise de décision.
Mieux préparer la conversion tout en restant fidèle au design system Scott Sports.
Objectifs UX & business
Clarifier les informations clés dès la carte (visuel, prix, variantes, signalétique promo).
Réduire la charge cognitive sur les pages listant de nombreux produits.
Soutenir les objectifs de conversion sans alourdir les performances.
Mon rôle
En tant qu’UX/UI Expert, j’ai cadré le problème, défini l’approche, conçu les solutions pour la réalisation de cette nouvelle product card.
Ce travail est une base d'exploration à la refonte globale du site, en définissant un modèle de carte produit réutilisable et aligné sur la vision e-commerce de Scott Sports.
Approche
Analyse de l’existant et benchmark rapide des standards e-commerce (performance, architecture de la carte, interactions clés).
Définition des scénarios prioritaires (découverte produit, comparaison, ajout au panier ou à la liste de souhaits).
Conception de user flows et de wireframes pour valider la place et le rôle de la Product Card dans le tunnel d’achat.
Tests rapides et feedbacks internes/terrain pour affiner les choix.
User flows
Des parcours utilisateurs ont été cartographiés pour visualiser comment la carte produit intervient à chaque étape : découverte depuis la home ou les catégories, cross-selling depuis les fiches produits, comparaison de plusieurs modèles, ajout à la wishlist ou au panier.
Wireframes
Des maquettes basse fidélité ont permis de tester différentes organisations de la carte (ordre des infos, mise en avant des variantes, placement des call-to-action). Cette phase a servi à anticiper les points de friction, simplifier la lecture et garantir la cohérence avec l’ensemble du site Scott Sports.
UI design & décisions clés
Outils & design system
Le projet s’appuie sur une utilisation avancée de Figma :
Composants et variantes pour gérer les différents états (promo, rupture, nouveau produit, etc.).
Auto-layout pour garantir la réactivité et l’adaptabilité de la carte selon les contextes (desktop, grille dense, carrousel…).
Design tokens alignés sur le design system Scott (couleurs, typographies, espacements) pour faciliter la maintenance et l’industrialisation.
