Boba Bar & Desserts: A Case Study

UX/UI Design, Prototyping

Acai bowl3 boba drinksDole whip3 boba drinksPufflesMatcha drinkMilk teasPlain puffle
Client
Boba Bar & Desserts
project type
UX/UI Design, Prototyping
duration
January 2022 - March 2022

Overview

Boba Bar & Desserts is a family-owned small business with 3 locations in San Diego that serves boba drinks and various assortment of desserts. Being a family-owned business, it is often hard to compete against corporate businesses, who are more likely have more resources available to market their products. Small businesses like Boba Bar & Desserts would be most likely to rely solely on their social media presence, which leads to the risk of losing potential customers that might not be familiar with social media, as well as the inability of providing customers with easy access to the business’ information such as store hours, locations, menus, prices, online ordering, contact information, etc. all in one place.

Key Problem
How would we inform and provide easy access to both first-time as well as repeated customers of Boba Bar & Desserts about the business' information?

User Personas

The 3 main customer groups that would visit Boba Bar & Desserts include students, adults/workers, and families with kids.

Competitive Analysis

We analyzed 6 different competitors including SD Boba Tea, Kung Fu Tea, Happy Lemon, Meet Fresh, Tapioca Express, and Tastea. While there are many similar businesses to Boba Bar & Desserts, we've narrowed it down to the most popular boba shops in San Diego.
*Note: Tastea was analyzed mainly for the website's functionality; it was not the most popular boba shop in San Diego at the time of this project due to its recent opening.
SD Boba Tea LogoKung Fu Tea LogoHappy Lemon LogoMeet Fresh LogoTapioca Express LogoTastea Logo
Analysis of SD Boba Tea
Analysis of Kung Fu Tea
Analysis of Happy Lemon
Analysis of Meet Fresh
Analysis of Tapioca Express
Analysis of Tastea

Style Guides & Low Res Wireframes

After communicating with the client and conducting the competitive analysis of 6 different competitors, we decided to go with a dreamy and cute theme with an emphasis on minimalism. We were most inspired by Tastea's homepage and menu layout, SD Boba Tea's tiles layout on their about page, Happy Lemon's use of their mascot, Kung Fu Tea's navigation bar, as well as Tapioca Express' promo images/layout on the homepage.
Mood BoardLow-Res Wireframes

Beta Prototype

Mobile Design

Mobile Design Homepage

Desktop Design

Desktop Design Homepage

User Testing

After finishing the first prototype of both the mobile and desktop versions of the site, we conducted 2 user testing with one user being unfamiliar with the business and one user being very familiar with the business. We gained useful feedback from both users as well as from a team critique session (w/ Team 11) and our Teacher Assistant (TA).

Final Prototype

With the received feedback, we have made some revisions to the first prototype of both the mobile and desktop version.

Mobile Design

Final Mobile Design Homepage

Desktop Design

Final Desktop Design Homepage

Reflection

While satisfying the client is important, it is not always ideal to go along with what the client wants. It is better to give them suggestions on how their ideas could be improved and try to reach a compromise. Though it is still necessary to stay open-minded and have an empathetic approach by taking into account the client's desires. Our client specifically sent us the current promotion poster to use for the main page, though we were given feedback that suggested we should change it due to the fact that it looks amateur. We brought this up to our client and he gave us permission to make changes to the promotion poster, but requested that the content should stay the same. We received positive feedback both from the client as well as the professor and TA.

Next Steps

If we had more time, I would ask the client to hire a professional photographer to take photos of Boba Bar’s products in a studio, so that all the photos displayed are uniform and of higher quality. I would create a filter for the menu so that users are able to easily sort out the different categories. I would also implement the in-app map using Google Maps so that it is movable and clickable.
Made in Webflow