Design System
Contribution à l'optimisation du Design System de PerfectDraft
Refonte du design system de PerfectDraft au sein de la Core Design Team. Un travail collaboratif visant à améliorer la cohérence, l’accessibilité et l’efficacité du design web et mobile.
Team
1 Lead Product Designer, 1 Product Designer senior, 1 product designer (moi), 1 Lead Frontend Developer
Skills
Design system, Design tokens, Documentation, UI Design
Timeline
2021 - 2023
Contexte
Objectifs
storefront
Centraliser les plateformes sur un site unique.
globe
Assurer une expérience homogène pour tous les marchés.
trending_up
Fluidifier les parcours pour améliorer la conversion.
smartphone
Aligner l’expérience entre le site et l’app mobile.
sentiment_satisfied
Améliorer la satisfaction utilisateur et encourager les recommandations avec un Net Promoter Score (NPS) élevé.
Analyse de l'existant
Audit UX complet des sites existants, basé sur les recommandations Baymard.
Analyse qualitative : basée sur les retours clients collectés lors des entretiens, sur le NPS et sur les enseignements issus des tests utilisateurs.
Analyse quantitative réalisée avec l’outil Piano Analytics, en collaboration étroite avec l’équipe data.
Mappage et Amélioration de l’Expérience Utilisateur
À partir des données collectées, nous avons créé des User Journey Maps détaillant les étapes clés, le tunnel des pages consultées, les critères UX à implémenter, ainsi que les verbatims, émotions et data. Elles identifient les opportunités d’amélioration et les équipes concernées, tout en priorisant les optimisations selon leur impact et leur complexité.
Analyse de la concurrence &
wireframes
Benchmark
Nous avons réalisé un benchmark des bonnes pratiques e-commerce, en nous inspirant de références du marché (notamment des sites Shopify et autres leaders).
Ce benchmark a permis d’enrichir notre réflexion avec des standards éprouvés, tout en tenant compte des résultats de notre audit et de nos analyses de données.
Wireframes
Conception des pages essentielles du parcours e-commerce (Homepage, liste et fiche produit, navigation, panier, checkout, compte client), en s’appuyant sur les analyses et audits réalisés en amont.
Collaboration interéquipes
Échanges continus avec les équipes Produit, Marketing et Tech tout au long de la conception des wireframes.
Exemple de bench pour la fiche PDP
Exemple de bench pour la fiche PDP
Wireframes PLP
Wireframes Sign in
Tests utilisateurs
Tests des wireframes auprès d’utilisateurs finaux via un protocole de test, afin de recueillir des feedbacks et affiner les optimisations avant la création des maquettes.
Protocole test utilisateur ©Louise Heyndels
Design Final
Nous avons conçu des maquettes haute fidélité avec le design system PerfectDraft, en intégrant les retours des utilisateurs et des équipes. Elles ont été présentées avec des comparatifs avant/après pour montrer les bénéfices. L’argumentaire se concentrait sur la valeur utilisateur et les impacts business pour convaincre les parties prenantes.
Nouvelle page produit Machines
Next steps
Finalisation des maquettes, tests utilisateurs et collaboration avec les équipes Tech pour la mise en production progressive.