ORIVA : concept de boutique audio avec salle d’écoute et commande en trois étapes

VITON¹³ conçoit des sites concepts pour montrer sa palette dans des secteurs où elle n’a pas encore de projet client à présenter. ORIVA en fait partie : la boutique en ligne d’un atelier acoustique fictif qui vend casques, enceintes, amplificateurs, vinyles et accessoires. La marque, les produits, les prix et les boutiques sont inventés, et le site est rédigé en russe.

La boutique devait fonctionner de bout en bout, pas seulement avoir l’air haut de gamme. Un acheteur doit pouvoir affiner le catalogue, choisir une couleur sur la fiche produit, appliquer un code promo, passer une commande dont chaque champ est vérifié et voir la confirmation. Un visiteur qui n’est pas prêt à acheter doit pouvoir trouver une boutique et réserver une séance d’écoute.

18 pages : accueil, catalogue, produit, panier, commande, confirmation, compte, favoris, journal, boutiques, atelier, livraison, assistance, contact, confidentialité, conditions, cookies et une 404. Le catalogue réunit 13 produits filtrables par catégorie, prix, couleur et badges, avec tri et puces pour les filtres actifs. La fiche produit offre une galerie avec lightbox, le choix de la couleur et de la quantité, des accordéons, des avis et des produits associés.

Le panier accepte 2 codes promo de démonstration et affiche une barre de progression vers la livraison gratuite dès 30 000 roubles, un seuil de démonstration. La commande compte trois étapes avec validation : coordonnées, livraison, paiement. Le compte de démonstration couvre connexion et inscription, commandes, favoris, adresses et garanties. Les boutiques de 6 villes figurent sur une carte interactive avec filtre par ville et réservation d’une séance d’écoute.

La salle d’écoute est un lecteur dessiné comme un disque qui tourne sous son bras de lecture : une liste de 5 morceaux, une barre de progression, le volume et l’enchaînement automatique. Les morceaux, environ 16 Mo au total, sont hébergés sur le site sous licence Pixabay. Le journal, la page livraison, paiement et retours, la FAQ de l’assistance et les pages légales complètent l’ensemble.

L’accueil s’ouvre sur une vidéo plein écran et se poursuit en récit au défilement, avec des compteurs. L’animation repose sur GSAP avec ScrollTrigger et le défilement fluide de Lenis, avec des courbes de mouvement douces. Le parcours clé va du catalogue à la fiche produit puis à la commande : le panier glisse en tiroir, la recherche s’ouvre en surimpression et un bandeau cookies apparaît à la première visite.

Le site est écrit en HTML, CSS et JavaScript, sans étape de build. L’en-tête, le pied de page et les surimpressions sont rendus par un seul script partagé : toutes les pages restent identiques. Comptes, paniers et réservations sont gardés dans le localStorage du navigateur, et rien n’est envoyé nulle part. La carte utilise Leaflet avec des tuiles OpenStreetMap/CARTO ; les photos sont des images de stock Unsplash et la vidéo vient de Pexels, chargées par liens directs vers leur CDN.

Il existe aujourd’hui un concept qui fonctionne : 18 pages, 13 produits, des boutiques dans 6 villes et une salle d’écoute de 5 morceaux, utilisables du catalogue à la confirmation de commande sans serveur. Les contrôles du 22 septembre 2026 sur 17 pages ont relevé un H1 sur chacune, un texte alternatif sur 100 % des images et 0 lien interne cassé.

Lighthouse a donné à l’accueil un score SEO de 100 et une accessibilité de 99 sur mobile comme sur ordinateur, et une performance de 97 sur ordinateur contre 66 sur mobile. Ce qui pèse sur le score mobile, c’est le poids : la page envoie 12,8 Mo au téléphone, dont une vidéo d’accueil en Full HD et des images, et le LCP atteint 7,3 s.

ORIVA est un concept réalisé par VITON¹³ pour montrer sa palette, pas une commande de client. L’atelier, ses produits, ses prix, ses avis et ses boutiques sont fictifs. Le site n’a ni domaine, ni visiteurs, ni trafic de recherche, ni ventes : il ne prouve rien sur la conversion ou le chiffre d’affaires. Les photos et vidéos sont des images et vidéos de stock sous licence, issues d’Unsplash et de Pexels.

Les chiffres Lighthouse sont des mesures de laboratoire de la page d’accueil, prises un seul jour, pas des données d’utilisateurs réels. Un score SEO de 100 ne couvre que les bases : canonical, Open Graph, JSON-LD, sitemap.xml et robots.txt ne sont pas en place. La commande n’encaisse rien et n’envoie rien : commandes et comptes n’existent que dans le navigateur du visiteur.