September 29, 2026

Overview

Bubba is a bubble tea and artisanal mochi brand with shops in Loja and Cuenca, Ecuador. Its own line sums up the brief better than I could: tu dosis diaria de boba, mochi y ternura — your daily dose of boba, mochi and tenderness. The site had to be exactly that dose: sweet, loud, a little silly, and unmistakably its own. I designed and built it as a single, motion-first page. The category is crowded and the audience is young. A tidy, tasteful restaurant template would have been the safe choice and the wrong one. Bubba is a brand about delight, so the site had to be a small hit of delight before it is an information page.

The idea: taste it before you drink it

Bubble tea sells on feeling — the colour, the wobble, the pearls, the shake. So the site leads with feeling, everywhere.

• It opens with a loader you actually want to watch. A glowing purple mascot sits over a progress bar whose fill is a row of tapioca pearls, under the words cargando boba… — loading boba. Most loaders apologise for the wait. This one is the first taste of the brand, so the first thing a visitor feels is that Bubba is fun.
• The hero is a drink being made. The centrepiece is an animated cup where the boba and pearls assemble in front of you, ringed with neon and sparkle over a deep purple field. The invitation is literal: pasa el cursor (o toca) una bebida y mira cómo se sirve tu vaso — hover or tap a drink and watch your cup get served.
• The tone never lets up. A call to action reads ¡Agítalo! — shake it. The footer asks ¿Unboba? Marquees stream the menu past in a loop — BUBBLE TEA · MOCHI · BOBA · MILK TEA — with a second ribbon in Japanese katakana, チーズティー, next to CHEESE TEA · FRUIT TEA · SODA · COFFEE. The Japanese lettering is a deliberate nod to boba's roots and to the kawaii aesthetic the whole brand is built on.

UI direction

• Kawaii, committed all the way. The mascot, the rounded soft shapes, the blush-pink cheeks, the electric purple — this is a look that only works if you fully commit, because a half-kawaii brand just reads as unfinished. Bubba commits.
• A purple-forward palette with hot-pink and neon accents, glowing against near-black purple so the drinks and the mascot are always the brightest, sweetest thing on the screen.
• Motion as the main material. The loader, the scroll-driven reveals, the looping marquees and the interactive cup are not decoration laid on at the end; they are how the page communicates. Take the motion away and you lose most of the brand.
• Spanish-first, with Japanese seasoning. The interface speaks to its Ecuadorian audience in Spanish while the katakana and the vocabulary of boba carry the cultural origin.

What the page covers

For all its playfulness, it still does the job a shop's site has to do:

• Menú — "Elige tu boba". The drink range, from milk tea through cheese tea, fruit tea, soda and coffee, presented as something you play with rather than scan.
• Mochis artesanales. The handmade mochi line, given its own space alongside the drinks.
• Ustedes — "Hecho para ustedes". The about section, told as a thank-you to the customers rather than a corporate story — made for you.
• Tiendas — "Ven por tu boba". Both locations, Loja and Cuenca, with the practical detail that matters most for a treat business: open every day.
• @bubba.ec. Instagram is treated as a first-class destination, because for a brand like this the feed is the storefront.

Approach

This one was written and built from the live product rather than reconstructed from notes, so the account here is about the design and the experience — the decisions you can see and feel on the page — more than the plumbing behind it. The through-line was restraint in exactly one dimension and none of the others. The structure is disciplined and simple: a single page, a short honest set of sections, one clear job per section, the practical details easy to find. Everything else — colour, motion, copy, character — is turned all the way up. That contrast is what keeps the site from tipping over from "delightful" into "chaotic": a sensible skeleton wearing a very loud outfit.

Challenges and learnings

A heavily animated site has to survive a slow phone. The whole concept rides on motion, and the audience arrives on mid-range phones over mobile data. The loader does double duty here — it buys the time the animations need while turning the wait into the first joke, so the experience feels intentional instead of slow. Committing to a mascot is a branding decision, not a decoration. Once the purple character leads the loader, the hero and the footer, it stops being a cute drawing and becomes the brand's face. That consistency is what makes a small local shop feel like a real brand rather than a menu with a logo. Loud still needs a spine. The temptation with a brand this playful is to make every section a new party trick. Keeping the information architecture calm and predictable underneath the noise is what lets the noise be fun rather than exhausting.

Outcome

A site that is, itself, a small taste of Bubba — you feel the brand in the first two seconds, before you have read a word, and by the time you reach the store list you already want to go. For a treat business whose customers are young and arrive from Instagram, being felt immediately is the entire job, and the page does it.