Politique de gestion des cookies
Afin de toujours améliorer votre parcours de navigation sur notre site, nous utilisons des statistiques anonymes de navigation.Ecomatelas
Refonte d'un site e-commerce de vente de matelas reconditionnés.
Réalisation et gestion en binôme avec Margaux Legoux, UX designer freelance
Ecomatelas est le premier site de vente de matelas reconditionnés fabriqués en France. Les matelas récupérés dans des hôtels sont découpés, désinfectés et ré-houssés pour être proposé à la vente en ligne ou en magasin. Une solution économique et écologique !
Le contexte du projet
Suite à une refonte en 2022, le taux de conversion sur le site à chuté. L’objectif d’Ecomatelas était d’identifier les raisons de cette chute, et de mettre en place des solutions UX/UI et SEO pour faire remonter ce taux de conversion.
J’ai été contactée par Margaux Legoux, UX designer également freelance, qui travaillait sur la recherche utilisateurs d’Ecomatelas pour identifier les points faibles du site, les freins à l’achat mais aussi les points forts du concept. Nous avons constitué un binôme pour travailler sur une nouvelle version du site, Margaux s’occupait des tests utilisateurs et réalisait les wireframes sur lesquels nous échangions (designer + SEO + dev + client) avant de produire les maquettes graphiques : ma mission !
Le constat auprès des utilisateurs
Voici en bref le constat suite aux recherches et tests utilisateurs réalisés par Margaux, sur un échantillon de 100 personnes.
Sur le concept :
- Séduits par l’aspect écologique et économique des produits
- Mais manque de réassurance (Différence entre occasion et reconditionné ? Est-ce que c’est propre ? Fabriqué où ?)
Sur le site :
- Une image globale propre mais peu qualitative
- Des freins sur le parcours d’achat (sélection des tailles de matelas, ajout au panier, frais de livraison…)
- Un usage mobile peu optimisé
Les actions UX + SEO
Tests utilisateurs et recherche
Deux sessions de tests et analyses utilisateurs ont été réalisées par Margaux :
- la première pour identifier les modifications à réaliser et prioriser notre travail
- la seconde pour valider (ou pas !) nos hypothèses, en présentant nos maquettes à un panel d’utilisateurs.
Leurs retours sur cette deuxième phase nous ont permis d’ajuster nos maquettes pour bien s’adapter à leur besoin, et s’assurer d’aller dans la bonne direction avant de commencer le développement.
Pour l’anecdote, nous avions proposé aux utilisateurs deux versions de nos maquettes : l’une très épurée pour guider l’attention sur l’info principale, l’autre plus chargée avec beaucoup de réassurance. C’est cette seconde version que les utilisateurs ont largement préféré !
Wireframes
Les wireframes ont été réalisés en tenant compte des retours utilisateurs pour proposer une nouvelle page d’accueil, comparatif des matelas et parcours d’achat.
Une étape importante qui a permis à toute l’équipe projet de communiquer, en identifiant les contenus à produire et les contraintes techniques de développement, pour que la nouvelle version du site soit cohérente avec les besoins des utilisateurs et les objectifs d’Ecomatelas.
Les changements UI
Direction artistique
Pas question de faire une refonte de l’identité visuelle sur ce projet, mais améliorer l’existant :
Palette de couleurs
Ecomatelas utilise depuis le début des couleurs douces : des teintes de bleu avec une pointe de jaune. J’ai repris les couleurs existantes en définissant bien l’usage de chacune, ce qui a permis de créer une palette dynamique et accessible grâce à un meilleur contraste entre elles.
Typographie
La typo à eu droit à son petit coup de frais également, pour donner une image plus moderne et apporter un peu plus d’identité à la marque Ecomatelas.
Photos
Un travail a été fait sur les visuels, Ecomatelas possédait une banque de photos qualitatives que nous avons pu exploiter, et nous avons fait appel au studio Hervé pour la réalisation des visuels de coupe des matelas en 3D. Des visuels importants pour comprendre d’un coup d’œil de quoi sont constitués les matelas pour les différencier !
Maquettes graphiques
Home
La page d’accueil intègre désormais plus de réassurance dès le header et une meilleure mise en avant des produits. Le process de reconditionnement qui faisait l’objet d’une page entière a été simplifié pour être plus clair et concis dès la première visite.
Fiche produit
Il existe deux types de fiche produit pour les matelas : la version matelas individuel et la page pack (matelas + sommier etc.). Nous avons retravaillé ces pages pour apporter plus de clarté et améliorer l’expérience utilisateur au niveau de la sélection des options du produit (dimensions, produits complémentaires, etc.)
Panier
Le panier a également été amélioré et contient désormais une info sur le montant à atteindre pour avoir livraison gratuite, des produits complémentaires et à nouveau, de la réassurance. La version mobile a été complètement revue pour optimiser le parcours d’achat.
Réseaux sociaux
J’ai eu l’occasion de réaliser quelques visuels pour les comptes Instagram et Facebook d’Ecomatelas, pour présenter une offre et aussi pour rassurer les clients potentiels sur l’hygiène des matelas, notamment pendant la polémique des punaises de lit qui a eu un impact non négligeable sur les ventes.
À la recherche d’un webdesigner ?
Vous avez un projet de création ou refonte de site e-commerce, plateforme Saas ou application mobile ?
👉 Spécialisée en UX/UI design depuis 8 ans, je serais ravie de vous accompagner dans votre projet !