Bobazona: a website for a boba tea and gelato house in Arizona.

The problem

Bobazona is a boba tea and gelato house that a young family started in Goodyear, Arizona. It has opened more shops since, and it offers franchises to people who want a shop of their own. Before a first visit, a customer wants to know what is on the menu, how to make a drink their own, which shop is nearest and whether it is open now. Anyone thinking of a franchise wants to see the brand first.

What we built

A website that answers those questions before the first visit, on a phone as well as on a computer.

• A menu by category. Customizables, drinks, gelato, smoothies and energy drinks, specialties and the classics, each on its own page with photos. The drinks page filters by kind, from flavored teas and milk teas to slushies and coffee.
• Make your own drink. A guide in three steps: the base, from tea to smoothie, then the flavor, then the boba or jelly on top.
• A page for each shop. The address, the phone number, the hours and whether the shop is open right now, worked out on Arizona time, then each day's hours and a map. The locations page lists every shop, each linked to its own page.
• A franchise page. The shops so far, each with a photo and a link to its page, and an invitation to open a Bobazona in a new town. A card near the foot of the main pages leads there.
• The brand's story. An Our Story page on how the name came about, what the shop wants to be and what it values, with customers' reviews there and on the home page.
• Feedback by email. A contact page with the main shop's details, and a feedback form that checks the phone number and the email address before it sends the message to the team by email.
• Ordering a tap away. An Order Online link in the menu bar, on a computer and on a phone, opens the shops' online ordering.
• Ready for search and sharing. Every page arrives as finished HTML with its own title, description and preview image, so search engines read it whole and a shared link shows a picture.

How

The website is Angular in TypeScript, rendered on the server through Angular Universal on Express, and every page is rendered ahead of time, so it reaches the browser as finished HTML. Angular Material and Bootstrap lay it out for computers and phones, with a side menu on a phone, and the photos are served as WebP. The feedback form sends through EmailJS, and each shop's open or closed sign reads the time in Arizona in the visitor's browser. After launch, new shops and changed hours went live as new builds of the same site.

The result

Bobazona's customers find the menu, the nearest shop and whether it is open on one website, on a phone or a computer. The team kept it current for two years, as shops opened and hours changed.

Our role

Before the studio, our team led it: the website, from the first page to launch, and its upkeep for two years after.