Catalogue par usage
Quatre modèles triés par usage réel — ville, route, performance, famille — avec les chiffres clés visibles avant de configurer.
← Retour portfolio
Business Prototype
Expérience e‑commerce ARVENN.
Une marque automobile fictive, un produit front-end complet : catalogue de gamme, comparaison, configurateur visuel à 60 combinaisons, intérieurs interactifs, financement simulé. Construit pour montrer comment EOCHE conçoit une expérience produit qui mène à l'achat.
Quatre modèles, soixante combinaisons, trois intérieurs.
Visuels générés pour le prototype, pilotés par une matrice nommée
modèle-teinte-jantes. ARVENN est une marque fictive.
Un produit complet, pas une page de démonstration.
L'expérience couvre tout le parcours d'achat d'une marque automobile : découvrir, comprendre, comparer, configurer, puis passer à l'action.
Technologie expliquée
Batterie, charge, cockpit, assistance, possession : une fiche produit honnête, sans certification inventée.
Comparaison utile
Les quatre modèles côte à côte — prix, autonomie, performances, places — avec configuration directe depuis le tableau.
Configurateur visuel
4 modèles × 5 teintes × 3 jantes : chaque choix charge le bon visuel parmi 60, préchargé et avec repli en cas d'échec.
Intérieurs interactifs
Trois ambiances matières photographiées ; le choix met à jour le visuel d'habitacle dans la galerie et dans le configurateur.
Flux d'achat simulé
Prix permanent, mensualité simulée paramétrable, livraison estimée, sauvegarde locale et demande d'essai — sans faux checkout.
Ce que ce prototype démontre.
Un configurateur n'est pas une page produit avec des boutons en plus : c'est de la logique d'options, des contraintes, et un prix qui doit rester juste à chaque état.
Démontré ici
- Expérience produit e-commerce complète : gamme, technologie, comparaison, configuration, récapitulatif.
- Configurateur à matrice d'images : 60 visuels extérieurs et 3 intérieurs résolus par l'état.
- État central data-driven : prix, visuels, caractéristiques et résumé toujours synchronisés.
- Logique métier simulée : packs indisponibles selon le modèle, repli automatique, jamais facturés.
- Financement simulé : apport, durée, mensualité recalculée en direct, sans promesse contractuelle.
- Sauvegarde locale de la configuration et demande d'essai simulée, sans envoi de données.
- Design system ARVENN dédié, volontairement distinct de l'identité EOCHE.
- Front statique léger : HTML, CSS scopé, JavaScript vanilla, WebP avec repli PNG.
Transposable à un vrai projet
- Configurateur produit : véhicule, menuiserie, mobilier, équipement, machine, abonnement.
- Page produit à options pour Shopify ou e-commerce sur mesure.
- Catalogue avec comparaison claire des variantes et des prix.
- Tunnel devis ou commande relié à un CRM, un ERP ou un outil métier.
- Design system produit pour une marque existante, sans la diluer.
Lecture studio
Une marque fictive traitée comme un vrai brief.
- Naming, palette, typographie et composants ARVENN définis avant la première ligne de code.
- Visuels produits générés en série cohérente, nommés et rangés comme un vrai DAM :
modèle-teinte-jantes. - Performance maîtrisée : variantes WebP de 6 à 9 Ko, préchargement progressif, aucun chargement massif au démarrage.
- Statut de prototype affiché à l'entrée, dans l'interface, dans le récapitulatif et en pied de page.
HTML / CSS scopé
JS vanilla
Matrice d'images WebP
Design system
Logique e-commerce
Responsive