Una app para que el bubble tea te acompañe fuera del local.
Huchito App lleva la marca al bolsillo: novedades, carta, cupones semanales y las Huchicoins, su moneda propia. La diseñé en Figma como parte del universo de Huchito Bubble Tea, con un prototipo que se recorre pantalla a pantalla.
Proyecto académico de diseño UX · 2023 · Figma, Photoshop y After Effects
El bubble tea todavía es poco común en España, y la app tenía que ayudar a que la gente lo descubriera y volviera. Es el canal directo entre la marca y sus clientes, también cuando no están en la tienda.
Desde el móvil se ven las novedades (sabores nuevos, ofertas o aperturas de locales), la carta completa con la ficha de cada bebida, sus tamaños, precios, ingredientes y alérgenos, y un espacio para la comunidad con las fotos que los clientes comparten en Instagram.
02
Huchicoins y cupones
Una app solo informativa se abre una vez y se olvida. Por eso tenía que dar ventajas al comprar: cuanto más compras, más promociones consigues, y cuantas más promociones tienes, más ganas de volver. Un círculo que se alimenta solo.
De esa idea salen los cupones semanales y las Huchicoins, la moneda de la app, que se acumulan y se canjean desde el propio móvil.
03
El mapa de la app
Así funciona la app por dentro. En Figma diseñé todas las pantallas y las conecté entre sí: botones que llevan a otras pantallas, ventanas emergentes que avisan de algo, scroll y pantallas de carga para que el recorrido fluyera.
Cada línea es un camino posible. Se puede entrar con una cuenta o como invitado, ir de la carta a la ficha de una bebida, abrir un cupón o cambiar los datos del perfil sin perderse nunca.
Prototipo en Figma · cada línea es una interacción
04
Primeros bocetos
Las cuatro pantallas clave, la principal, la carta, la ficha de cada bebida y las novedades, nacieron a lápiz. Fueron el esqueleto sobre el que creció todo lo demás.
En los bocetos aparece Haochi, el nombre que tenía la marca antes de convertirse en Huchito.
01 · Inicio
02 · Carta
03 · Ficha de bebida
04 · Novedades
05
Animación
La ficha de cada bebida tiene vida propia: el té, las salpicaduras y las hojas se mueven. Figma no daba para ese tipo de animación, así que la construí fuera, y acabó siendo la parte que más disfruté.
Reuní los elementos, algunos de bancos de imágenes y otros generados con IA, los retoqué en Photoshop y los monté por capas. Después los animé en After Effects cuidando las curvas de movimiento y los llevé a Figma como GIF.
06
Pruebas con usuarios
Antes de darla por terminada, la probé con otras personas para detectar errores y comprobar que se entendía. El resultado: cubría lo que un cliente necesita, y la opción de entrar como invitado quitaba fricción desde la primera pantalla.
Fue mi primera app desde cero y me enseñó el método completo, del boceto al prototipo final.
Vídeo próximamente
