Vialife · Viapresse.com
Refonte UX mobile du parcours d'achat
1 an d'alternance au sein de l'équipe marketing de Viapresse, spécialiste n°1 de la vente d'abonnements magazines en ligne, illustré par la refonte UX mobile du parcours d'achat : filtre catégorie et menu burger, tous deux déployés en production.
Contexte
Viapresse est une plateforme e-commerce française spécialisée dans la vente d'abonnements magazines depuis 1997, référençant plus de 800 titres et près de 500 000 visiteurs uniques par mois. Depuis 2016, elle fait partie du groupe Vialife SA.
Intégré à l'équipe marketing en tant qu'alternant UX/UI Designer, mes missions couvraient deux axes : la création de contenus visuels pour les opérations commerciales, et l'optimisation UX/UI du site viapresse.com. C'est sur ce second axe que j'ai pu exprimer pleinement ma démarche de designer.
Le déclencheur du projet a été un audit UX mené par l'agence partenaire SEMJI début 2023, révélant des points de friction majeurs dans le parcours d'achat mobile, notamment sur le filtre de catégorie et le menu burger. Ces deux éléments, parmi les plus consultés sur mobile, souffraient d'une ergonomie insuffisante et généraient des abandons de parcours.
Problématique
Sur mobile, deux éléments clés du parcours posaient problème. Le filtre catégorie, présenté sous forme linéaire, obligeait l'utilisateur à scroller horizontalement pour accéder aux options. Le menu burger, parmi les éléments les plus cliqués de la page d'accueil mobile (6,5% des clics en heat map), souffrait d'une navigation peu intuitive et générait des clics de colère sur certains éléments. L'enjeu était de simplifier ces deux interfaces sans dénaturer l'esprit Viapresse, tout en réduisant la friction dans le parcours d'achat.
Démarche UX
Pour chaque composant, j'ai démarré par un benchmark des tendances mobiles en analysant les approches de plateformes e-commerce concurrentes (eBay, Cdiscount, Zalando, Fnac) pour identifier les patterns les plus efficaces. Des wireframes ont été réalisés en amont pour structurer la réflexion avant d'entrer en phase de conception.
Pour le filtre mobile, deux approches ont été proposées : un parcours en plein écran par étapes, et une version hybride affichant directement tous les filtres au clic d'un bouton compact. C'est cette seconde solution, plus proche des habitudes des utilisateurs, qui a été validée en réunion d'équipe. Pour le menu burger, trois versions ont été itérées jusqu'à aboutir à une architecture claire structurée autour des Catégories, du Guide d'achat, des Services et de la déconnexion.
UI Design
Les maquettes ont été conçues sur Figma dans le respect de la charte graphique de Viapresse. Pour le filtre, les boutons "Filtrer" et "Trier" permettent d'accéder à l'ensemble des options avec affichage des filtres actifs et suppression en un clic. Pour le menu burger, une hiérarchie de couleurs distingue les titres principaux, les sous-titres de section et les catégories de magazines.
Filtre catégorie
Menu burger
Avant
Après
Résultat
Les deux solutions ont été validées et transmises à l'agence de développement partenaire pour mise en production.
Filtre catégorie déployé
Les données Google Analytics montrent une progression de +16% du nombre d'utilisateurs sur mobile dans le mois suivant la mise en production, avec une amélioration de l'engagement sur la page catégorie.
Menu burger déployé
Le nombre de transactions sur la page d'accueil mobile est passé de 8 à 17 dans le mois suivant la mise en production, avec un revenu généré en hausse (de 542€ à 768€), premières indications positives d'un parcours fluidifié.
Démarche adoptée
Le processus benchmark, wireframe, maquette Figma et validation a été appliqué sur l'ensemble des missions UX de l'alternance, contribuant à l'amélioration globale des KPIs de Viapresse.
Vous travaillez sur un produit digital ?
Je peux vous accompagner dans la conception ou l'amélioration de votre interface.