Folium boutique, une marque française de vapotage
Folium est une marque française spécialisée dans le CBD, le vapotage et l’univers des fumeurs. Son e-commerce propose une large gamme de produits.
Une partie du catalogue étant vendue exclusivement en ligne, la boutique PrestaShop constitue un canal stratégique pour la marque.
Le projet
Après plusieurs années d’évolutions techniques, le site est devenu complexe et peu lisible. Malgré un fort potentiel commercial, la boutique avait une interface peu structurée et ne reflétait plus mage souhaitée. Un audit UX a donc été réalisé afin d’analyser le parcours client et identifier les points d’amélioration.
Suite à cet audit, une refonte complète du site e-commerce a été engagée avec un travail centré sur l’UX et l’UI design : amélioration du parcours utilisateur, restructuration de l’interface et modernisation du site.

Refonte UX : comment améliorer la navigation sur sa boutique ?
La refonte UX vise à supprimer les points de friction qui bloquent la navigation et freinent l’achat : manque de lisibilité, hiérarchie floue, CTA peu visibles.
En analysant le parcours utilisateur (homepage, catégories, fiches produits), on identifie rapidement les optimisations à fort impact qui permettront à votre site de convertir.
Chez ARPA3, cette approche commence par notre audit e-commerce gratuit pour obtenir une première analyse globale de votre boutique.
Page d’accueil : comment optimiser la première impression ?
La page d’accueil est le premier contact avec vos visiteurs et doit les guider dès les premières secondes.
Pour Folium, nous avons :
- Réduit le hero pour ne pas repousser les produits et catégories.
- Synthétisé les réassurances (livraison, avis, paiement sécurisé) sous forme de pictogrammes.
- Mis en avant les catégories principales pour y accéder plus facilement, même sur mobile.
Nous avons cherché a créer une homepage qui capte l’attention, rassure et oriente naturellement les visiteurs vers l’achat.

Page catégorie : guider l’utilisateur vers le bon produit
Les pages catégorie doivent guider l’utilisateur rapidement vers ce qu’il cherche.
Pour Folium, nous avons :
- Remis les produits plus en avant, en travaillant sur la hiérarchie de l’information et des filtres pertinents.
- Réduit les contenus secondaires pour ne pas distraire l’utilisateur.
- Organisé les catégories sur mobile en slider compact pour une lecture rapide.
Tips de notre expert UX : sur une catégorie, le produit est roi. Tout le reste doit orienter et ne pas encombrer la page.

Pages produit : faciliter la prise de décision
La page produit doit permettre à l’utilisateur de comprendre, être rassuré et passer à l’action rapidement.
Pour Folium, nous avons :
- Mis en avant le bouton “Ajouter au panier” avec un design plus visible et accessible.
- Clarifié les informations essentielles (prix, stock, variantes) pour une lecture immédiate.
- Structuré le contenu avec des onglets et des blocs rétractables pour alléger la page.
- Intégré les éléments de réassurance de manière plus discrète et efficace.
- Optimisé la version mobile pour un accès rapide au CTA et aux infos clés.
Tips de notre expert UX : une page produit doit lever les doutes, mais ne doit pas en créer de nouveaux. Chaque élément doit rapprocher l’utilisateur de l’achat.

Responsive : une expérience pensée pour le mobile
Aujourd’hui, la majorité du trafic e-commerce se fait sur mobile. L’expérience doit être rapide, lisible et accessible au pouce.
Pour Folium, nous avons :
- Allégé les interfaces pour améliorer la lisibilité et éviter la surcharge visuelle.
- Mis en avant les éléments clés (prix, CTA, stock) dès l’arrivée sur l’écran.
- Optimisé les interactions pour une navigation fluide et naturelle au pouce.
- Réorganisé certains blocs en sliders pour limiter le scroll et faciliter la lecture.
Tips de notre expert UX : sur mobile, chaque élément doit être accessible sans effort. Si l’utilisateur doit réfléchir ou zoomer, c’est déjà une friction.

Avant / Après : la transformation UI de Folium
Une interface dense et peu cohérente a laissé place à un design épuré, moderne et harmonisé. Les couleurs, typographies et composants ont été retravaillés pour créer une lecture plus fluide et mettre en valeur les éléments clés, notamment les produits et les CTA.



Fonctionnalités : des optimisations à fort impact
Au-delà de l’UX et de l’UI, certaines fonctionnalités ont été mises en place pour fluidifier le parcours et booster la conversion.
Ce sont souvent des petits détails fonctionnels qui font la différence sur la conversion.
DooFinder, la recherche intelligente
DooFinder permet de réduire la friction lors de la recherche, notamment grâce à une autocomplétion et aux suggestions visuelles, évitant l’abandon de recherche face à un moteur de recherche frustrant.

Barre de progression du franco de port
Cette barre rend les frais de port beaucoup plus concrets. Au lieu de devoir chercher l’information, l’utilisateur voit directement combien il lui manque pour bénéficier de la livraison offerte. C’est simple, visuel, et ça encourage naturellement à ajouter un produit sans créer de frustration au moment du paiement.

Cross Selling
Le cross-selling permet de proposer des produits complémentaires de façon simple et discrète. L’objectif est d’accompagner l’utilisateur dans son choix en lui proposant des options utiles qu’il n’aurait peut-être pas envisagées, sans pour autant alourdir la page.

Restriction d’âge
Pour respecter la réglementation et protéger les mineurs, une restriction d’âge a été intégrée. Les visiteurs doivent saisir leur date de naissance avant d’accéder à la boutique.

Et si vous lanciez la refonte de votre e-commerce ?
Votre boutique en ligne a du potentiel, mais vous sentez que quelque chose freine vos performances de vente ? Parcours peu clair, design vieillissant, conversion en baisse… une refonte UX/UI peut faire toute la différence.
Chez ARPA3, nous vous accompagnons pour identifier les points de friction et mettre en place des optimisations concrètes, adaptées à vos objectifs.
Profitez d’un audit gratuit pour faire le point sur votre boutique et découvrir vos axes d’amélioration.
