HOURLINE : une plateforme de réservation concept, côté client et back-office du studio

VITON¹³ conçoit des produits concepts pour montrer comment elle aborde le logiciel d’entreprise, et pas seulement les sites web. HOURLINE est la plateforme de réservation de cette série : la réservation en ligne pour des studios et des cliniques haut de gamme, présentée à travers Maison Hourline, une maison fictive de trois studios à Moscou, Dubaï et Londres, où neuf praticiens proposent massages, soins du visage, coiffure, ongles et kinésithérapie. L’entreprise, ses équipes, ses clients et ses prix sont inventés, et la démo le dit sur chaque écran.

La commande que nous nous sommes donnée avait trois volets. Le client devait réserver sur son téléphone en quelques secondes, sans appeler. Les horaires proposés devaient être réels, calculés à partir des horaires des praticiens, de leurs pauses, des réservations existantes et du temps de préparation, dans le fuseau horaire de chaque studio, et non une grille décorative. Et le studio devait voir une réservation à l’instant où elle est faite et disposer d’outils pour protéger sa journée : un agenda qu’il peut réorganiser à la main, une alerte quand un rendez-vous risque d’être manqué et un moyen de remplir le temps libre.

Le côté client compte deux vues, Réserver et Mes réservations, pensées d’abord pour le téléphone. La réservation passe du studio au soin, au praticien, à une bande de dates avec une grille horaire, au nom et au téléphone, puis à la confirmation, avec un chronomètre dans la carte. Chaque studio affiche son heure locale et s’il est ouvert. Des suggestions proposent le premier créneau libre, l’horaire habituel du client, appris de ses visites précédentes, et un créneau avec son praticien habituel ; « réserver avec un proche » trouve deux praticiens libres à la même heure. La confirmation est un pass façon Wallet avec un fichier de calendrier (.ics) généré dans le navigateur. Dans Mes réservations, un rendez-vous se déplace en le faisant glisser le long de la journée du praticien, où il s’aligne sur les débuts libres, ou s’annule selon la politique du studio, avec sa période gratuite et ses frais d’annulation tardive.

Le côté studio compte cinq vues. L’agenda montre une journée avec une colonne par praticien, regroupées par studio, chacune à son heure locale avec sa propre ligne « maintenant », ainsi qu’une semaine. Un rendez-vous peut être glissé vers une autre heure ou un autre praticien, étiré par le bord inférieur ou créé d’un clic ; chaque changement passe par les mêmes règles que côté client, et un dépôt qui en enfreint une revient en tremblant avec la raison, par exemple un chevauchement avec une autre réservation. Le tableau de bord affiche le chiffre d’affaires, une carte de chaleur de l’occupation par jour et par heure, les clients nouveaux et fidèles, les annulations, les absences et le délai de réservation ; Clients réunit étiquettes, valeur cumulée, historique et notes ; Réglages modifie soins, prix, horaires, pauses, marges et politique d’annulation et d’acompte, et la page de réservation suit aussitôt.

La cinquième vue, Intelligence, est ce que nous appelons l’IA de démonstration, et elle est signalée comme telle sur la page : des règles plus des statistiques, calculées dans le navigateur. Chaque rendez-vous à venir reçoit un risque d’absence issu d’un modèle bayésien naïf entraîné sur l’historique de la démo elle-même (première visite, délai de réservation, absences passées, moment de la journée, jour de la semaine), corrigé par des règles quand le rappel est confirmé ou l’acompte payé ; chaque score liste ses facteurs et propose une action, comme demander un acompte. « Combler les trous » repère le temps libre d’aujourd’hui et de demain et le rapproche de personnes inscrites sur une liste d’attente simulée ; une offre acceptée réserve le créneau.

La démo est écrite en JavaScript et en CSS natifs, sans framework, et empaquetée avec esbuild dans un dossier statique aux URL relatives, si bien qu’elle fonctionne depuis n’importe quel chemin : sur le portfolio, elle se trouve dans /demos/hourline/. Le côté client se charge d’abord, le côté studio arrive dans un fichier à part. Un seul magasin de données sert les deux côtés et l’enregistre dans le localStorage : une réservation faite côté client est aussitôt dans l’agenda du studio, et dans tout autre onglet ouvert grâce à l’événement storage du navigateur. Les données sont générées pour chaque visiteur : une base de clients par studio, huit semaines d’historique et quatre à venir, construites avec les mêmes règles de disponibilité que le produit, si bien que l’agenda s’ouvre rempli et cohérent.

Un seul moteur de disponibilité répond à toutes les questions du produit : ce praticien peut-il faire ce soin à cette minute de ce jour, compte tenu de ses horaires et de sa pause, des réservations en cours, de la marge après chaque rendez-vous, du délai minimal et de l’horizon de réservation, dans le fuseau du studio ? Les créneaux du client, les suggestions, les paires pour réserver à deux, les déplacements, le glisser-déposer du studio et la recherche de trous l’interrogent tous. Le design associe une palette crème et pierre à un accent aubergine, Cormorant pour les titres et Manrope pour le texte, toutes deux hébergées sur le serveur ; les animations à ressort et l’intro deviennent des changements instantanés pour qui demande moins de mouvement. Toute l’interface est en anglais et en russe.

Aujourd’hui existe un concept qui fonctionne à l’adresse tarasovvitalii.com/demos/hourline/, avec sept vues, deux pour le client et cinq pour le studio. Le 28 septembre 2026, nous l’avons mesuré dans Chrome headless sur un MacBook, l’horloge de la démo figée au 1er octobre à 15 h 40 : une réservation scriptée sur un écran de téléphone de 390 px, avec une pause de 0,9 seconde après chaque toucher, a pris 6 secondes du premier toucher à la confirmation selon le chronomètre de la démo (médiane de 14 essais, de 6 à 16 secondes). Une réservation faite dans un onglet est apparue dans l’agenda du studio ouvert dans un autre, et un prix modifié dans les réglages a atteint la page de réservation.

Une vérification indépendante par force brute dans la page a retesté les 658 créneaux proposés par le moteur sur dix jours, trois studios et neuf soins, au regard des horaires, des pauses, des réservations avec leurs marges, du délai minimal et de l’aller-retour de fuseau horaire : aucun créneau faux, aucune double réservation, aucune marge enfreinte ; la même vérification, l’horloge avancée au-delà du passage de Londres à l’heure d’hiver le 25 octobre, n’a rien trouvé non plus. Tout le JavaScript et le CSS pèsent 95 Ko en gzip. Sur l’adresse en ligne, Lighthouse 13.5 (cinq passages par appareil, médianes, sur un MacBook dont la charge moyenne était de 3 à 9) a donné une performance de 94 sur mobile et de 100 sur ordinateur, avec accessibilité et bonnes pratiques à 100 ; la page transfère 0,2 Mo au chargement.

HOURLINE est un concept que VITON¹³ a créé pour montrer sa palette, pas une commande. Maison Hourline, ses studios, praticiens, clients, prix et réservations sont fictifs et générés dans le navigateur du visiteur : il n’y a ni client, ni utilisateurs, ni vraies réservations, ni trafic, ni chiffre d’affaires, et rien dans la démo n’est à vendre. Les rappels, les demandes d’acompte, les offres de la liste d’attente et leurs réponses sont simulés ; aucun message, paiement ni donnée personnelle ne quitte le navigateur.

L’IA de démonstration, ce sont des règles et des statistiques dans le navigateur, pas un modèle de langage, et elle apprend d’un historique inventé : elle ne prouve donc rien sur la prédiction de vraies absences. Les 6 secondes viennent d’un script qui touche l’écran à un rythme fixe, pas de personnes, et aucun test utilisateur n’a été mené. Chaque chiffre est une mesure de laboratoire dans Chrome headless, sur une seule machine et un seul jour, et Lighthouse a tourné sur l’adresse en ligne avec un téléphone simulé, pas sur de vrais appareils. Une version réelle aurait encore besoin d’un serveur avec verrouillage des créneaux, de paiements, de vrais rappels, de comptes et d’une protection des données.

Comment vérifier le portfolio d’une agence web →