29 september 2026

Overzicht

Bubba is een bubble tea- en ambachtelijk mochimerk met winkels in Loja en Cuenca, Ecuador. Hun eigen slogan vat de opdracht beter samen dan ik kan: tu dosis diaria de boba, mochi y ternura — je dagelijkse dosis boba, mochi en tederheid. De site moest precies die dosis zijn: zoet, uitgesproken, een tikkeltje dwaas en onmiskenbaar eigen. Ik ontwierp en bouwde ze als één enkele pagina met motion voorop. De categorie is verzadigd en het publiek is jong. Een net, smaakvol restauranttemplate was de veilige keuze en dus de verkeerde. Bubba is een merk rond plezier, dus de site moest een kleine dosis plezier zijn voor hij een informatieve pagina is.

Het idee: proef het voor je ervan drinkt

Bubble tea verkoopt op gevoel — de kleur, het wiebelen, de parels, het schudden. Dus zet de site overal het gevoel vooraan.

• De site opent met een loader die je echt wil bekijken. Een gloeiende paarse mascotte hangt boven een voortgangsbalk die gevuld wordt door een rij tapiocaparels, onder de woorden cargando boba… — boba laden. De meeste loaders verontschuldigen zich voor het wachten. Deze is de eerste kennismaking met het merk, dus het eerste wat een bezoeker voelt, is dat Bubba plezierig is.
• De hero is een drankje in wording. Het middelpunt is een geanimeerde beker waarin de boba en de parels zich voor je ogen opbouwen, omringd door neon en glitter op een dieppaars vlak. De uitnodiging is letterlijk: pasa el cursor (o toca) una bebida y mira cómo se sirve tu vaso — beweeg over een drankje of tik erop en zie hoe je beker wordt gevuld.
• De toon gaat nooit liggen. Een call to action luidt ¡Agítalo! — schud het. De footer vraagt ¿Unboba? Marquees laten het menu in een lus voorbijkomen — BUBBLE TEA · MOCHI · BOBA · MILK TEA — met een tweede lint in Japanse katakana, チーズティー, naast CHEESE TEA · FRUIT TEA · SODA · COFFEE. De Japanse letters zijn een bewuste knipoog naar de roots van boba en naar de kawaii-esthetiek waarop het hele merk gebouwd is.

UI-richting

• Kawaii, tot het einde doorgedreven. De mascotte, de ronde zachte vormen, de blosroze wangen, het elektrische paars — dit is een look die alleen werkt als je er volledig voor gaat, want een half kawaii-merk leest gewoon als onafgewerkt. Bubba gaat ervoor.
• Een palet met paars vooraan, met hotpink en neonaccenten die oplichten tegen bijna zwart paars, zodat de drankjes en de mascotte altijd het felste en zoetste op het scherm zijn.
• Motion als het belangrijkste materiaal. De loader, de reveals die door scrollen worden gestuurd, de lussende marquees en de interactieve beker zijn geen decoratie die er op het einde bij komt; ze zijn hoe de pagina communiceert. Haal de motion weg en je verliest het grootste deel van het merk.
• Spaans eerst, met Japanse kruiding. De interface spreekt zijn Ecuadoraanse publiek in het Spaans aan, terwijl de katakana en het vocabularium van boba de culturele oorsprong dragen.

Wat de pagina bevat

Ondanks alle speelsheid doet ze nog steeds wat de site van een winkel moet doen:

• Menú — "Elige tu boba". Het drankenaanbod, van milk tea over cheese tea en fruit tea tot soda en koffie, voorgesteld als iets om mee te spelen in plaats van te scannen.
• Mochis artesanales. De ambachtelijke mochilijn, die naast de drankjes een eigen plek krijgt.
• Ustedes — "Hecho para ustedes". De over-ons-sectie, verteld als een dankjewel aan de klanten in plaats van als een bedrijfsverhaal — voor jullie gemaakt.
• Tiendas — "Ven por tu boba". Beide vestigingen, Loja en Cuenca, met het praktische detail dat er voor een zaak in lekkers het meest toe doet: elke dag open.
• @bubba.ec. Instagram krijgt de status van volwaardige bestemming, want voor een merk als dit is de feed de etalage.

Aanpak

Deze case is geschreven en gebouwd op basis van het live product in plaats van gereconstrueerd uit notities, dus dit verhaal gaat over het ontwerp en de ervaring — de beslissingen die je op de pagina ziet en voelt — meer dan over de techniek erachter. De rode draad was terughoudendheid in precies één dimensie en in geen enkele andere. De structuur is gedisciplineerd en eenvoudig: één pagina, een korte en eerlijke reeks secties, één duidelijke taak per sectie, de praktische details makkelijk terug te vinden. Al het andere — kleur, motion, copy, karakter — staat helemaal open. Dat contrast is wat voorkomt dat de site van "heerlijk" naar "chaotisch" kantelt: een verstandig skelet in een erg luidruchtige outfit.

Uitdagingen en lessen

Een zwaar geanimeerde site moet een trage telefoon overleven. Het hele concept draait op motion, en het publiek komt binnen op mid-range telefoons via mobiele data. De loader doet hier dubbel werk: hij koopt de tijd die de animaties nodig hebben en maakt van het wachten meteen de eerste grap, zodat de ervaring bewust aanvoelt in plaats van traag. Kiezen voor een mascotte is een brandingbeslissing, geen decoratie. Zodra het paarse personage de loader, de hero en de footer draagt, is het geen schattige tekening meer maar het gezicht van het merk. Die consistentie maakt van een kleine lokale zaak een echt merk in plaats van een menu met een logo. Ook luidruchtig heeft een ruggengraat nodig. De verleiding bij een merk dat zo speels is, is om van elke sectie een nieuwe truc te maken. De informatie-architectuur rustig en voorspelbaar houden onder alle drukte is wat die drukte plezierig maakt in plaats van vermoeiend.

Resultaat

Een site die zelf een kleine voorproef van Bubba is — je voelt het merk in de eerste twee seconden, voor je één woord hebt gelezen, en tegen je bij de lijst met winkels bent, wil je al gaan. Voor een zaak in lekkers met jonge klanten die via Instagram binnenkomen, is meteen gevoeld worden de hele opdracht, en dat doet de pagina.