29 de septiembre de 2026

Visión general

Bubba es una marca de bubble tea y mochi artesanal con tiendas en Loja y Cuenca, Ecuador. Su propia frase resume el encargo mejor que yo: tu dosis diaria de boba, mochi y ternura. El sitio tenía que ser exactamente esa dosis: dulce, ruidoso, un poco tonto e inconfundiblemente suyo. Lo diseñé y lo construí como una única página hecha de movimiento. La categoría está saturada y el público es joven. Una plantilla de restaurante ordenada y de buen gusto habría sido la opción segura y la equivocada. Bubba es una marca sobre el deleite, así que el sitio tenía que ser una pequeña dosis de deleite antes de ser una página de información.

La idea: saboréala antes de beberla

El bubble tea se vende por la sensación — el color, el temblor, las perlas, el agite. Así que el sitio lidera con la sensación, en todas partes.

• Abre con un loader que de verdad quieres mirar. Una mascota morada que brilla se posa sobre una barra de progreso cuyo relleno es una fila de perlas de tapioca, bajo las palabras cargando boba…. La mayoría de los loaders piden disculpas por la espera. Este es el primer sorbo de la marca, así que lo primero que siente quien visita es que Bubba es divertida.
• El hero es una bebida preparándose. La pieza central es un vaso animado donde la boba y las perlas se arman frente a ti, rodeado de neón y destellos sobre un campo morado profundo. La invitación es literal: pasa el cursor (o toca) una bebida y mira cómo se sirve tu vaso.
• El tono no afloja. Una llamada a la acción dice ¡Agítalo! El footer pregunta ¿Unboba? Marquesinas hacen correr el menú en bucle — BUBBLE TEA · MOCHI · BOBA · MILK TEA — con un segundo listón en katakana japonés, チーズティー, junto a CHEESE TEA · FRUIT TEA · SODA · COFFEE. La escritura japonesa es un guiño deliberado a las raíces del boba y a la estética kawaii sobre la que se construye toda la marca.

Dirección de UI

• Kawaii, comprometido hasta el final. La mascota, las formas suaves y redondeadas, los cachetes rosados, el morado eléctrico — es un look que solo funciona si te comprometes por completo, porque una marca a medio kawaii se lee como inacabada. Bubba se compromete.
• Una paleta morada al frente con acentos rosa fuerte y neón, brillando contra un morado casi negro para que las bebidas y la mascota sean siempre lo más brillante y dulce de la pantalla.
• El movimiento como material principal. El loader, las revelaciones al hacer scroll, las marquesinas en bucle y el vaso interactivo no son decoración añadida al final; son la forma en que la página comunica. Quítale el movimiento y pierdes casi toda la marca.
• Español primero, con sazón japonés. La interfaz le habla a su público ecuatoriano en español mientras el katakana y el vocabulario del boba cargan el origen cultural.

Lo que cubre la página

Con todo su juego, sigue haciendo lo que el sitio de una tienda tiene que hacer:

• Menú — «Elige tu boba». La gama de bebidas, del milk tea al cheese tea, fruit tea, soda y café, presentada como algo con lo que juegas más que algo que escaneas.
• Mochis artesanales. La línea de mochi hecho a mano, con su propio espacio junto a las bebidas.
• Ustedes — «Hecho para ustedes». La sección de acerca de, contada como un agradecimiento a los clientes más que como una historia corporativa.
• Tiendas — «Ven por tu boba». Ambas ubicaciones, Loja y Cuenca, con el detalle práctico que más importa a un negocio de antojos: abierto todos los días.
• @bubba.ec. Instagram se trata como un destino de primer nivel, porque para una marca así el feed es la tienda.

Enfoque

Este se escribió y construyó desde el producto en vivo, no reconstruido a partir de notas, así que este relato es sobre el diseño y la experiencia —las decisiones que se ven y se sienten en la página— más que sobre la plomería que hay detrás. El hilo conductor fue contención en exactamente una dimensión y en ninguna otra. La estructura es disciplinada y simple: una sola página, un conjunto corto y honesto de secciones, un trabajo claro por sección, los datos prácticos fáciles de encontrar. Todo lo demás — color, movimiento, copy, carácter — está subido al máximo. Ese contraste es lo que evita que el sitio se vuelque de «encantador» a «caótico»: un esqueleto sensato vestido con un atuendo muy ruidoso.

Retos y aprendizajes

Un sitio muy animado tiene que sobrevivir a un teléfono lento. Todo el concepto depende del movimiento, y el público llega en teléfonos de gama media con datos móviles. El loader hace doble trabajo aquí: compra el tiempo que necesitan las animaciones mientras convierte la espera en el primer chiste, para que la experiencia se sienta intencional en vez de lenta. Comprometerse con una mascota es una decisión de marca, no una decoración. Una vez que el personaje morado lidera el loader, el hero y el footer, deja de ser un dibujo lindo y se vuelve la cara de la marca. Esa consistencia es lo que hace que una tienda local pequeña se sienta como una marca de verdad y no como un menú con logo. Lo ruidoso también necesita columna vertebral. La tentación con una marca tan juguetona es hacer de cada sección un truco nuevo. Mantener la arquitectura de información calmada y predecible por debajo del ruido es lo que permite que el ruido sea divertido en vez de agotador.

Resultado

Un sitio que es, en sí mismo, una pequeña probada de Bubba — sientes la marca en los primeros dos segundos, antes de leer una palabra, y para cuando llegas a la lista de tiendas ya quieres ir. Para un negocio de antojos cuyos clientes son jóvenes y llegan desde Instagram, ser sentido de inmediato es todo el trabajo, y la página lo logra.