← Todos los proyectos
TRAMA — portada de la web app
La entrada: juego, cartas y reseñas
TRAMA — Julio, el bartender, se presenta
Julio, el bartender
TRAMA — «A partir de hoy aprenderás el oficio de bartender a mi lado»
Empieza el oficio

Producto digital · UX/UI · Desarrollo

TRAMA

La web app de TRAMA, una coctelería de Madrid: carta de comida, carta de cócteles, reseñas y un juego narrativo en el que aprendes el oficio atendiendo a los clientes de la barra.

Estado
En producción
Rol
Responsabilidad integral: concepto, guion, UX/UI y desarrollo asistido por IA
Stack
Vite · JavaScript sin framework · PWA
Ámbito
Coctelería TRAMA · Madrid

Contexto

TRAMA es una coctelería con la barra a la vista. El proyecto lleva esa barra al móvil del cliente: además de consultar la carta, puede ponerse detrás de ella y aprender cómo se prepara lo que está bebiendo.

Está publicado y en uso en el local: es la carta digital del bar y, a la vez, un juego.

Qué hace

  • Juego narrativo. Julio, el bartender, te enseña el oficio. Escuchas a cada cliente, le recomiendas un cóctel y se lo sirves.
  • Partida guardada. Puedes dejarlo y seguir otro día desde «Continuar partida».
  • Carta de comida y de cócteles, y acceso directo a dejar una reseña.
  • Se instala como app en el móvil (PWA), con su icono y a pantalla completa.
  • Story Studio: un editor propio para escribir y mantener las historias de los clientes sin tocar el código.

Decisiones clave

  • Una sola escena. Toda la experiencia ocurre en la barra, con una única cámara. La restricción obliga a justificar cada elemento y separa a TRAMA de cualquier otra app de cócteles.
  • Escuchar, proponer, servir. El núcleo del juego sigue el movimiento real de un bartender: conversación, recomendación y entrega, sin pasos de más.
  • Contenido separado del código. Los textos de los clientes, los cócteles y las preguntas viven en archivos de datos; por eso las historias se editan desde el Story Studio.
  • Sin framework. Vite y JavaScript nativo, con un estado único y transiciones en CSS: una arquitectura que una sola persona puede mantener.
  • Revisar antes de programar. Escribí una revisión de producto que detectó dónde el planteamiento contradecía sus propios principios: una «libreta» de clientes que convertía al bartender en gestor o un quiz en el momento más emotivo.

En escritorio

TRAMA en un navegador de escritorio
La misma escena, pensada para el móvil, también funciona en escritorio

Abrir TRAMA ↗

← Más proyectos · SmallParadiso