Étude de cas · Démonstration de savoir-faire
A Grotta Nera : concevoir une boutique en ligne pour un produit qu’on ne peut pas goûter
A Grotta Nera est un site fictif, construit pour traiter une question de conception e-commerce : comment faire acheter en ligne un produit que le visiteur ne peut ni voir ni goûter ?
Le contexte et l’objectif
Le sujet retenu est une cave d’affinage corse qui veut vendre en ligne. La difficulté est celle de toutes les boutiques de produits artisanaux : la page doit recréer ce que le client vit en magasin : voir, comprendre le travail, et accepter le prix. La conception est partie d’un objectif unique : que le visiteur ajoute un produit à son panier, et le reste en découle.
Les partis pris
Premier choix de conception : faire du défilement le moteur du récit plutôt qu’un simple déplacement dans la page. En descendant, le visiteur entre dans la cave et la pièce vieillit sous ses yeux. L’argument de vente est joué, pas rédigé, ce qui évite le paragraphe de présentation que personne ne lit.
Second choix : aller jusqu’au bout du parcours d’achat. Une démonstration de boutique ne prouve rien si elle s’arrête à la vitrine, d’où des fiches détaillées, un panier et une commande complète, au même niveau d’exigence qu’un site marchand en production.
La réalisation
Un site marchand complet : une ouverture animée, six fiches produits qui s’ouvrent sans quitter la page, un panier qui fonctionne et une commande en trois étapes jusqu’à la page de paiement. Le tout sans plateforme marchande derrière, le panier vivant dans le navigateur du visiteur : la boutique reste rapide là où une boutique bâtie sur une plateforme toute faite s’alourdit.
Ce que ça change concrètement
Sur ce type de catalogue, la conversion se joue sur la valeur perçue : un visiteur qui a compris le travail derrière la pièce ne compare plus seulement les prix. Et une boutique en ligne étend la vente au-delà du marché local et de la saison touristique, ce qu’une page vitrine ne fait pas.
Les difficultés techniques
L’animation de vieillissement a demandé une quinzaine d’essais. Les premières versions faisaient bouger tout le décor en même temps que le sujet, ou produisaient un rendu artificiel. La solution a été de détourer précisément la pièce, de ne modifier que sa surface, et de générer une séquence d’images où seul le sujet évolue pendant que l’arrière-plan reste rigoureusement immobile.
Cette séquence est ensuite encodée en vidéo pilotée au défilement, image par image, comme la séquence d’approche de Casa Petra. Il a fallu que la dernière image du travelling d’entrée soit exactement la première du vieillissement, sinon la coupure se voyait à l’écran.
Sur mobile, le pilotage au défilement est abandonné au profit d’une image fixe : l’effet ne vaut pas une vidéo lourde à télécharger sur un téléphone, et la page doit rester légère pour le référencement.
Pages statiques, panier entièrement côté navigateur, images en WebP, vidéo pilotée au défilement sur grand écran et image fixe sur mobile.
Voir la démonstration
Ouvrir A Grotta NeraLe site de démonstration complet, à parcourir comme un vrai visiteur : vieillissement du jambon, fiches produits, commande complète.Parlons de votre projet
La meilleure façon de commencer, c’est d’en discuter.
Un projet de boutique en ligne en tête ? Parlons-en