HOURLINE: una plataforma de reservas conceptual, con lado del cliente y back office del estudio

VITON¹³ crea productos conceptuales para mostrar cómo aborda el software para un negocio, no solo las webs. HOURLINE es la plataforma de reservas de esa serie: reservas online para estudios y clínicas premium, presentadas a través de Maison Hourline, una casa ficticia de tres estudios en Moscú, Dubái y Londres con nueve especialistas en masajes, tratamientos faciales, peluquería, uñas y fisioterapia. El negocio, su gente, sus clientes y sus precios son inventados, y la demo lo dice en cada pantalla.

El encargo que nos pusimos tenía tres partes. El cliente debía reservar desde el móvil en segundos, sin llamar. Las horas ofrecidas tenían que ser reales, calculadas a partir de los horarios de los especialistas, sus pausas, las reservas existentes y el tiempo de preparación en la zona horaria de cada estudio, y no una cuadrícula decorativa. Y el estudio tenía que ver cada reserva en el momento en que se hace y contar con herramientas para proteger su jornada: un calendario que se pueda reorganizar a mano, un aviso cuando es probable que una cita no se cumpla y una forma de llenar el tiempo vacío.

El lado del cliente son dos vistas, Reservar y Mis reservas, pensadas primero para el móvil. La reserva va del estudio al servicio, al especialista, a una tira de fechas con una cuadrícula de horas, al nombre y el teléfono y a la confirmación, con un cronómetro en la tarjeta. Cada estudio muestra su hora local y si está abierto. Unas sugerencias proponen la hora más cercana, la hora habitual del cliente, aprendida de visitas anteriores, y una hora con su especialista de siempre; «reservar con alguien» encuentra dos especialistas libres a la misma hora. La confirmación es un pase de estilo Wallet con un archivo de calendario (.ics) generado en el navegador. En Mis reservas, la cita se puede mover arrastrándola por la jornada del especialista, donde se ajusta a los inicios libres, o cancelar según la política del estudio, con su plazo gratuito y su recargo por cancelación tardía.

El lado del estudio son cinco vistas. El calendario muestra un día con una columna por especialista, agrupadas por estudio, cada una con su hora local y su propia línea de «ahora», y también una semana. Las citas se pueden arrastrar a otra hora o a otro especialista, estirar por el borde inferior o crear con un clic; cada cambio pasa por las mismas reglas que el lado del cliente, y si un movimiento rompe una, el bloque vuelve con una sacudida y explica el motivo, por ejemplo que se solapa con otra reserva. El panel muestra ingresos, un mapa de calor de ocupación por día y hora, clientes nuevos y recurrentes, cancelaciones, inasistencias y antelación; Clientes reúne etiquetas, valor acumulado, historial y notas; en Ajustes se cambian servicios, precios, horarios, pausas, márgenes y la política de cancelación y depósito, y la página de reservas lo refleja al instante.

La quinta vista, Intelligence, es lo que llamamos IA de demostración, y así se rotula en la página: reglas más estadística, calculadas en el navegador. Cada cita próxima recibe un riesgo de inasistencia de un modelo bayesiano ingenuo entrenado con el propio historial de la demo (primera visita, antelación, inasistencias anteriores, hora del día y día de la semana), ajustado por reglas si el recordatorio está confirmado o el depósito pagado; cada puntuación enumera sus factores y sugiere una acción, como pedir un depósito. «Llenar huecos» encuentra el tiempo libre de hoy y de mañana y lo empareja con personas de una lista de espera simulada; una oferta aceptada reserva el hueco.

La demo está hecha con JavaScript y CSS puros, sin framework, empaquetada con esbuild en una carpeta estática con URL relativas, así que funciona desde cualquier ruta: en el portafolio vive en /demos/hourline/. El lado del cliente carga primero y el del estudio llega como un archivo aparte. Un único almacén guarda los datos de ambos lados en localStorage, de modo que una reserva hecha por el cliente aparece al instante en el calendario del estudio, y en cualquier otra pestaña abierta gracias al evento storage del navegador. Los datos se generan para cada visitante: una base de clientes por estudio, ocho semanas de historial y cuatro por delante, construidas con las mismas reglas de disponibilidad que el producto, así que el calendario se abre lleno y coherente.

Un único motor de disponibilidad responde a todas las preguntas del producto: ¿puede este especialista atender este servicio en este minuto de este día, teniendo en cuenta su horario semanal y su pausa, las reservas vigentes, el margen tras cada cita, la antelación mínima y el horizonte de reserva, en la zona horaria del estudio? Lo consultan las horas del cliente, las sugerencias, las parejas para reservar con alguien, los cambios de cita, el arrastrar y soltar del estudio y el buscador de huecos. El diseño usa una paleta crema y piedra con un acento berenjena, Cormorant para los títulos y Manrope para el texto, ambas alojadas en el propio servidor; las animaciones con muelles y la intro se vuelven cambios instantáneos para quien pide menos movimiento. Toda la interfaz está en inglés y ruso.

Hoy existe un concepto que funciona en tarasovvitalii.com/demos/hourline/ con siete vistas, dos para el cliente y cinco para el estudio. El 28 de septiembre de 2026 lo medimos en Chrome headless en un MacBook, con el reloj de la demo fijado en el 1 de octubre a las 15:40: una reserva automatizada en una pantalla de móvil de 390 px, con una pausa de 0,9 segundos tras cada toque, tardó 6 segundos del primer toque a la confirmación según el cronómetro de la propia demo (mediana de 14 ejecuciones, entre 6 y 16 segundos). Una reserva hecha en una pestaña apareció en el calendario del estudio abierto en otra, y un precio cambiado en Ajustes llegó a la página de reservas.

Una comprobación independiente por fuerza bruta dentro de la página volvió a verificar las 658 horas que el motor ofreció en diez días, tres estudios y nueve servicios frente a horarios, pausas, reservas con sus márgenes, antelación mínima y la ida y vuelta por la zona horaria: ningún hueco erróneo, ninguna reserva doble y ningún margen incumplido; la misma prueba con el reloj movido a través del cambio al horario de invierno de Londres del 25 de octubre tampoco encontró nada. Todo el JavaScript y el CSS pesan 95 KB con gzip. En la dirección pública, Lighthouse 13.5 (cinco ejecuciones por dispositivo, medianas, en un MacBook con una carga media de 3 a 9) dio un rendimiento de 94 en móvil y 100 en escritorio, con accesibilidad y buenas prácticas en 100; la página transfiere 0,2 MB al cargar.

HOURLINE es un concepto que VITON¹³ creó para mostrar su alcance, no un encargo. Maison Hourline, sus estudios, especialistas, clientes, precios y reservas son ficticios y se generan en el navegador de quien la visita: no hay cliente, ni usuarios, ni reservas reales, ni tráfico, ni ingresos, y nada de la demo está a la venta. Los recordatorios, las solicitudes de depósito, las ofertas de la lista de espera y sus respuestas son simulados; ningún mensaje, pago ni dato personal sale del navegador.

La IA de demostración son reglas y estadística en el navegador, no un modelo de lenguaje, y aprende de un historial inventado, así que no demuestra nada sobre cómo predecir inasistencias reales. Los 6 segundos proceden de un script que toca a ritmo fijo, no de personas, y no se hicieron pruebas con usuarios. Cada cifra es una medición de laboratorio en Chrome headless en una sola máquina y un solo día, y Lighthouse se ejecutó sobre la dirección publicada con un móvil simulado, no en dispositivos reales. Una versión real necesitaría además un servidor con bloqueo de huecos, pagos, recordatorios reales, cuentas y protección de datos.

Cómo revisar el portafolio de un estudio web →