Tableo
El código QR del restaurante debía dejar de ser un PDF para convertirse en un canal de venta.
- Año
- 2026
- Diseño
- 9 semanas
- Stack
- React · TypeScript · Vite · Supabase · Vercel
- Diseño de producto
- Diseño móvil
- Desarrollo
- Base de datos
- Pago
Producto editado por Kayzen Web, servido en una dirección de previsualización de Vercel a la espera de su dominio definitivo.
- apertura de la carta al escanear
- < 1 s
- rendimiento Lighthouse
- 91/100
- accesibilidad LighthousePor debajo de nuestro umbral de 95: el punto señalado son los contrastes de la carta, calcados de los colores de cada restaurante; su corrección está planificada para la próxima intervención.
- 87/100
Lo que había que resolver.
El contexto
Tableo convierte el código QR de la mesa de un restaurante en una interfaz completa: carta actualizada, pedido, pago, recogida de opiniones y datos de afluencia.
La limitación
El código QR tiene mala fama desde 2020, porque al principio sirvió para mostrar un PDF ilegible. El producto debía borrar ese recuerdo desde la primera pantalla del móvil, en un contexto desfavorable: sala ruidosa, una sola mano, red saturada, cliente con prisa.
La respuesta
Diseñar primero la vista del cliente, nunca el back-office. La carta se abre en menos de un segundo, sin instalación y sin cuenta, y se lee con una sola mano. El panel del restaurador vino después, condicionado por los datos que la vista del cliente produce realmente.
Las puntuaciones registradas en la entrega.
Puntuaciones Lighthouse del sitio en producción. Las publicamos tal cual: cuando una es baja, su causa y su plan de corrección se explican más abajo en lugar de silenciarse.
Cada decisión de diseño, y su porqué.
Pensado para el pulgar
Navegación por categorías fija en la parte inferior de la pantalla, en la zona que alcanza el pulgar. Áreas táctiles de 44 px como mínimo. La carta de un restaurante se consulta de pie, con una mano, y con una copa en la otra.
Fotos opcionales, nunca obligatorias
Pocos restaurantes tienen fotos decentes de todos sus platos. La carta sigue siendo elegante sin imágenes; las fotos, cuando existen, son un extra y no la estructura de la página.
Un panel legible de un vistazo
El restaurador consulta su panel entre dos servicios. Tres cifras arriba, el resto bajo el pliegue. Ningún gráfico que exija una lectura atenta.
Paleta del proyecto
Sepia
#7C4A21
Identidad, cabeceras
Crema
#FBF7F0
Fondo de la carta
Tinta
#1C1917
Texto
Verde pedido
#15803D
Confirmación
Sistema tipográfico
Titulares
Outfit 700
Texto de lectura
Inter 400
Los precios usan cifras tabulares alineadas a la derecha: una columna de precios mal alineada se lee como una carta descuidada.
Lo que hay bajo el capó.
- React
- TypeScript
- Vite
- Supabase
- Vercel
Supabase en tiempo real
Los pedidos llegan en directo a cocina mediante una suscripción en tiempo real. Una actualización periódica habría añadido latencia justo donde más se nota.
Aislamiento por establecimiento
Políticas de acceso por fila: un restaurante no puede, por construcción, leer los datos de otro. En un producto multiinquilino, esa regla pertenece a la base de datos, no al código de la aplicación.
Pago delegado
Ningún dato de tarjeta pasa por el producto. El proveedor de pagos gestiona la introducción de datos y el cumplimiento PCI; es la única opción razonable para un equipo de este tamaño.
Cómo se hace encontrar la web.
El SEO se centra en vender el software
La carta de un restaurante no está hecha para indexarse: cambia cada día y no responde a ninguna búsqueda. El posicionamiento apunta a «logiciel commande à table» (software de pedidos en mesa) o «QR code menu restaurant» (carta con código QR), búsquedas del restaurador.
Utilizable por todo el mundo.
Desde junio de 2025, la Ley Europea de Accesibilidad (European Accessibility Act) exige la accesibilidad digital a buena parte de los servicios en línea. La abordamos desde el diseño, no como un parche posterior.
Contrastes revisados en la carta
Las cartas de restaurante abusan del gris claro sobre blanco. Todos los pares superan 4,5:1, incluidos los precios y las menciones de alérgenos, cuya legibilidad no es solo una cuestión de comodidad.
Lo que se entregó.
- Sitio del producto
- Vista del cliente (QR)
- Panel del restaurador
- Tarifas
- Cuenta
El desarrollo del proyecto.
Vista del cliente
Prototipo móvil probado en sala antes de escribir una línea de back-office.
Back-office
Cartas, categorías, disponibilidad, horarios.
Pedido y pago
Cocina en tiempo real, proveedor de pagos.
Analítica
Afluencia, platos más vistos, ticket medio.
Lo que nos preguntan a menudo.
Otros proyectos
Cumplimiento del RGPD y SaaSKonsent by Kayzen
Un proveedor de banners que audita banners es juez y parte: la independencia era el producto.
Ciberseguridad ofensiva y SaaSSentinel by Kayzen
Vender un producto de seguridad a ingenieros: cada afirmación tenía que poder demostrarse.
Datos y servicio meteorológicoMétéo Climat France
358 páginas indexables, un mapa animado sobre 72 horizontes de previsión y ni una sola línea de framework.
El mismo nivel de exigencia, para su web.
Auditoría gratuita de su web actual, presupuesto en 24 horas y un razonamiento por escrito, como el que acaba de leer. Pago en tres plazos sin intereses; ayudas locales verificadas antes de la firma.