Refonte du site e-commerce Materiel.net – Groupe LDLC
Quoi ?
Nouvelle direction artistique et conception UX Mobile First pour le site e-commerce
Comment ?
Adobe XD – Photoshop – Routine Scrum – Ateliers de co-création
Materiel.net est un acteur majeur de l’e-commerce informatique et high-tech depuis plus de 20 ans, spécialisé dans la vente de composants, PC gamers et produits high-tech.
Le contexte : après son rachat par le Groupe LDLC mi-2017, le site Materiel.net devait rattraper une importante dette design. L’ancien site, vieillissant et non responsive, ne répondait plus aux usages actuels du e-commerce.
La solution envisagée : lancer une refonte complète, technique et design, en s’appuyant sur la plateforme mutualisée du Groupe LDLC tout en préservant la liberté créative et fonctionnelle propre à Materiel.net, deux marques proche mais aux cibles bien distinctes.
En tant que UI/UX Designer Senior, j’ai été le seul Designer intégré au projet de refonte au sein d’une équipe Scrum d’une douzaines de personnes (Dévs Front/Back, DevOps, PO, QA), avec un MVP conçu en 12 mois environ.
Mes objectifs : améliorer les taux de conversion et de rétention via des maquettes optimisées desktop/mobile, concevoir l’expérience utilisateur pour des fonctionnalités complexes (configurateur PC, megamenu…) et structurer le Design grâce à un Design System.
Un projet de refonte stratégique
Materiel.net est un pionnier du e-commerce informatique en France depuis 1998. Le site bénéficiait d’un fort capital sympathie auprès d’une clientèle avisée, mais le retard structurel accumulé au cours du temps devenait un problème crucial, face à une concurrence de plus en plus forte.
Erosion du trafic et du chiffre d’affaires, parcours d’achat alourdis par rapport aux standards du marché, absence d’expérience mobile et positionnement de marque vieillissant en décalage avec un secteur en pleine croissance, la refonte n’était pas un simple projet design : c’était un chantier stratégique de reconquête, destiné à réaffirmer la légitimité de Materiel.net sur son cœur de marché tout en élargissant son audience à une nouvelle génération d’acheteurs.
Un nouveau Design pour une audience experte
Cette refonte, avec des enjeux cruciaux pour la marque, se base sur un équilibre entre modernisation pour attirer une nouvelle clientèle et fondamentaux pour ne pas dépayser la clientèle historique.
J’ai donc fait évolué l’identité visuelle globale sans rompre le lien avec l’ancien site, en conservant les couleurs fortement reconnaissables de la marque. Les nouvelles interfaces ont été conçues avec l’objectif de s’adapter aux différents usages, quelque soit le type de device utilisé. De meilleurs contrastes, une hiérarchie de contenu maitrisée pour faciliter la lecture de l’information, une prise en compte de l’aspect SEO (indispensable pour le business) ont largement contribué à la réussite du projet.
Une expérience utilisateur centrée sur la conversion
Des parcours d’achat clarifiés
Sur un site e-commerce, les parcours d’achat sont sensibles, tant ils sont étroitement liés au taux de conversion. Une part importante du travail a porté sur la fluidité UX des étapes clés du tunnel de conversion : listings filtrés, fiche produit, panier, livraison, paiement, confirmation de commande.
Chaque étape a été réfléchie en Mobile First et analysée en ateliers de co-conception grâce à des wireframes et des prototypes interactifs, avec l’objectif de fluidifier la navigation en réduisant au maximum les points de friction.
Hiérarchiser un contenu produit dense
Materiel.net dispose d’un contenu produit riche, entre caractéristiques techniques, avis clients, stocks produits en temps réel, délais de livraison etc. Ce volume d’informations, présent sur les pages clé comme les fiches produits ou les listings, se devait d’être correctement hiérarchisé sans être appauvri.
J’ai structuré chaque type de page autour de blocs fonctionnels clairement identifiables, sans surcharger le Design inutilement, pour faciliter l’accès aux informations. Ces interfaces complexes restent parfaitement lisibles et accessibles pour les utilisateurs, y compris sur mobile.
Une démarche d’amélioration et d’évolution continue
Au-delà de la refonte initiale, mon rôle s’est inscrit, après la mise en production, dans une logique de product design itératif. Le site a évolué au rythme des priorités business. Sur chaque évolution, mon travail s’est porté sur la conception UX et UI : wireframes, prototypes, Design final, incorporation sur le site et accompagnement des développements.
Questions/réponses : le lien direct entre Materiel.net et ses clients
Cette fonctionnalité permet à un utilisateur de poser une question depuis une fiche produit, à laquelle un conseiller Materiel.net répond publiquement, enrichissant ainsi une base de connaissances accessible à tous.
Double objectif : lever les freins à l’achat sur des produits techniques et souvent chers, et valoriser l’expertise des conseillers, une forte différenciation face aux pure players généralistes. Côté expérience, un volet s’ouvre en bas d’écran pour poser la question sans quitter la fiche des yeux et une page dédiée regroupe l’ensemble des réponses.
Variants produits : simplifier le choix sur les déclinaisons de produits
De nombreuses références (smartphones, accessoires, périphériques) n’existaient que sur leurs fiches distinctes, obligeant l’utilisateur a de multiples allers-retours pour choisir son produit, au détriment du parcours d’achat.
L’intégration des variants a nécessité d’adapter le Design de la fiche produit sans pénaliser les autres informations. L’interface regroupe les déclinaisons au dessus du bouton d’ajout au panier pour favoriser la prise de décision d’achat. Les sélecteurs sont conçus sous forme de tag texte/image pour plus de clarté, et mettent à jour dynamiquement visuel principal, prix et disponibilité, de façon totalement transparente pour l’utilisateur.