Retail & luxe · Borne interactive en point de vente.
Une application kiosk full-vidéo pour une expérience en boutique sans interface visible.
Le contexte
Un acteur majeur du secteur cosmétique premium souhaitait déployer des bornes et tablettes interactives dans ses points de vente dans plusieurs pays. L'outil devait servir de guide d'utilisation des produits pour les clients et de support de formation pour les conseillères en boutique. Les contraintes étaient strictes : l'expérience devait être visuellement immersive (vidéo HD plein écran), intuitive sans aucune courbe d'apprentissage, cohérente avec l'image haut de gamme de la marque, fonctionnelle sur 5 formats d'écrans différents, disponible en 5 langues, et autonome une fois déployée. Les vidéos — conçues, tournées et montées par une équipe de production spécialisée — étaient les contenus au cœur de l'expérience. Mon rôle : construire l'application capable de les faire vivre.
Ce que j'ai construit
Une application kiosk full-video dans laquelle l'interface disparaît complètement. La navigation se fait par des zones tactiles invisibles superposées à la vidéo HD. L'utilisateur touche une zone de l'écran — une partie du visage, une texture, un geste — et l'application joue la séquence correspondante avec une transition fluide. Tous les médias sont préchargés en Blobs au démarrage pour une fluidité totale. Aucun chargement perceptible entre les séquences, aucun bouton visible, aucune coupure.
Mon Rôle
Conception et développement complet de l'application. Architecture du moteur de séquençage vidéo, développement du système de zones tactiles dynamiques par résolution, gestion du préchargement asynchrone par Blobs, moteur de navigation conditionnelle (time-based), mode kiosk (idle timer, retour automatique, résistance aux crashs), déploiement Docker avec CI/CD.
Architecture technique
| Couche | Technologie |
|---|---|
| Framework frontend | Vue 3 (Composition API) · Vite |
| Lecture vidéo | HTML5 Video API · séquences et playlists |
| Interaction | Zones tactiles SVG dynamiques par résolution |
| Chargement médias | Préchargement asynchrone par Blobs |
| Navigation | Moteur time-based · logique conditionnelle |
| Kiosk mode | Idle timer · retour auto · plein écran permanent |
| Debug | Mode superposition zones · logs via paramètre URL |
| Déploiement | Docker · GitLab CI/CD · gestion des branches et MEP |
| Internationalisation | 5 langues (FR, EN, DE, CN-TR, CN-SP) |
Défis techniques
Interface sans interface : Système de zones tactiles invisibles (dictionnaire de coordonnées x/y/w/h/rotation par résolution) superposées à la vidéo — le design n'est jamais compromis.
Zéro latence entre séquences : Tous les médias sont préchargés en Blobs dès le démarrage. Le passage d'une séquence à l'autre est instantané.
Adaptation à 5 résolutions : Chaque zone tactile a son propre dictionnaire de coordonnées par format. Un mode debug permet de les ajuster au pixel près sur le device cible.
Bascule de langue instantanée : Les vidéos de toutes les langues sont préchargées. Le switch ne provoque aucune coupure.
Robustesse autonome : Idle timer ramenant à l'accueil après 1 minute. Mode kiosk avec plein écran permanent et résistance aux crashs navigateur.
Maintenance sans développeur : Architecture data-driven — modifier les zones tactiles ou ajouter une langue se fait via le fichier de configuration, sans toucher au code.
Pipeline GitLab CI/CD : Le déploiement sur les bornes est géré via des pipelines Docker automatisés déclenchés par les pushs sur les branches dédiées. La mise en production ne nécessite aucune intervention manuelle.
Problèmes résolus
| Avant | Après |
|---|---|
| Aucune application capable d'exploiter les vidéos dans un contexte premium | Application kiosk full-video → les vidéos deviennent l'interface elle-même |
| Interface classique incompatible avec l'image luxe de la marque | Zéro bouton visible → expérience cinématographique, identité haut de gamme préservée |
| Latence perceptible entre les séquences vidéo | Préchargement Blobs → transitions instantanées, immersion totale |
| Affichage dégradé selon les différents modèles de bornes | Coordonnées par résolution + mode debug → affichage parfait sur tous les formats |
| Borne qui se décroche sans surveillance en magasin | Kiosk mode + retour auto → fonctionnement autonome 24/7 |
Résultats
"L'application transforme des vidéos de production en une expérience interactive immersive, sans jamais exposer une interface classique. Elle fonctionne de façon autonome dans 5 langues et sur 5 formats d'écrans différents. Les contenus sont modifiables sans intervention technique. Le résultat est à la hauteur des exigences d'une marque premium."
En chiffres
25 fichiers vidéo HD préchargés en Blobs
5 langues avec bascule instantanée
5 résolutions gérées nativement
12 étapes interactives avec navigation conditionnelle
Zéro bouton visible — navigation 100% par zones tactiles
Pour vous
Vous disposez de contenus vidéo de qualité et souhaitez les exploiter dans un contexte interactif en boutique, showroom ou espace d'exposition ? Vous cherchez une expérience kiosk autonome, sans friction et à la hauteur de votre image de marque ? Cette architecture s'applique au retail, au luxe, aux musées, aux showrooms et à tout espace d'accueil premium.