nextCaso de estudio 01
Ohana Bowls
Restaurante · Manizales
Un menú de diez categorías y un bowl que el cliente arma paso a paso, resueltos en una sola página pensada para el móvil.
Visitar sitio
- Servicios
- Dirección · Diseño · Desarrollo · Performance
- Construido con
- React · Vite · Supabase
- Estado
- En producción
Contexto
Una carta que no cabía en una carta.
Ohana Bowls es un restaurante en Cable Plaza, Manizales. Su oferta no es un menú corto: son diez categorías —bowls, hamburguesas, papas, perros, mazorcadas, nachos, combos, adicionales y bebidas— más un bowl que cada cliente configura desde cero.
El encargo no era una web de presentación. Era el sitio donde alguien decide qué pedir y lo pide, casi siempre desde el teléfono y casi siempre con hambre.
El reto
Once pantallas de menú en un teléfono.
Puesta en vertical, la carta completa mide unas once pantallas de móvil. Ese es el problema de diseño real, y de él salen tres más.
-
Encontrar sin recorrer
Nadie hace scroll por diez categorías para ver si hay nachos. Hace falta llegar a cualquier categoría desde cualquier punto.
-
Un producto con reglas
El bowl configurable no es un producto con opciones: el tamaño decide cuántas selecciones permite cada sección. Es un formulario con lógica.
-
Del antojo al pedido
El pedido acaba en WhatsApp. Entre ver un plato y enviar el mensaje no puede haber fricción ni pasos de más.
Dirección
Decisiones que sostienen la carta.
Barra de categorías siempre presente
Una barra fija bajo la cabecera con las diez categorías, desplazable en horizontal, que marca en cuál estás mientras bajas. Convierte once pantallas en un salto de un toque.
Navegación inferior, no menú hamburguesa
Inicio, menú, carrito y nosotros viven en una barra inferior, al alcance del pulgar. En un sitio que se usa con una mano, esconder el carrito tras un menú cuesta pedidos.
El configurador es un recorrido, no un formulario
Armar un bowl son ocho pasos con progreso visible. Cada paso explica su propia regla —el tamaño define cuántas selecciones puedes hacer— en vez de dejar que el usuario la descubra al equivocarse.
La foto manda en la lista
Cada plato es una fila con imagen, descripción, precio y un botón de añadir. Se decide mirando, no leyendo.
La experiencia
El menú, funcionando.
Categorías con foto, precio y añadido directo. La barra superior marca dónde estás; la inferior deja el carrito a un toque.
Móvil
Diseñado en 390 px, no reducido a 390 px.
El móvil no fue una adaptación del escritorio: fue el punto de partida. La barra de categorías, la navegación inferior y el configurador paso a paso existen porque en una pantalla estrecha son la única forma de que una carta así siga siendo usable.
Construcción
Cómo está hecho.
React sobre Vite, con Supabase detrás para el contenido del menú y los pedidos. El catálogo no está escrito en el código: se administra, y por eso la carta puede cambiar sin tocar el sitio. Incluye tema claro y oscuro.
-
React + Vite
Interfaz y construcción del sitio.
-
Supabase
Menú, carrito y administración del catálogo.
-
WhatsApp
El pedido termina donde el negocio ya atiende.
Resultado
Una carta de diez categorías que se recorre con un pulgar y termina en un pedido.
No publicamos cifras de negocio porque no las hemos medido. Lo que se entregó es verificable: el menú completo, el configurador con sus reglas, el carrito y el pedido, funcionando en producción y administrables por el propio restaurante.
Visitar sitio