THE BOBA LAB
UX/UI | Branding
ROLE: Product Designer & Brand Designer
TOOLS: Figma, Illustrator & Photoshop
DURATION: 1 Month
The Boba Lab is a boba cafe that specializes in making custom boba drinks with the freshest ingredients. This case study will focus on the design process of the branding and mobile app.
Problem statement
Customers at boba shops often struggle with decision-making when choosing a drink due to the overwhelming number of options. Many lack knowledge about different flavors, toppings, or customization possibilities, leading to indecision or dissatisfaction with their final order.
WITH SO MANY DRINK OPTIONS, IT CAN GET VERY OVERWHELMING CHOOSING ONE.
Create a boba tea business that uses an app with the purpose of guiding users through a step-by-step process, allowing them to select flavors, tea bases, sweetness levels, and toppings based on their taste preferences or dietary needs.
Solution
STAGE 1 - RESEARCH
Through interviewing users, I was able to learn about what they go through when ordering boba for the first time, people generally had trouble deciding what to order.
Key findings based on interviews
How Might We’s
After some research, here are some of the key points we need to prioritize.
Pain points
A priority matrix to will help me figure out what to implement into the design of the app.
STAGE 2 - Ideate
I designed wireframes to outline the design of the app. I made sure it was straightforward and easy to navigate, keeping in mind that users are students.
Wireframes
The logo depicts boba tea inside of a lab beaker in order to convey experimental theming of the brand. While designing the logo, I soon came up with the The Boba Lab for the name of the boba shop and app.
Visual Identity
UX Style guide
STAGE 3 - Prototype
Using figma, I designed the final prototype for The Boba Lab.
After logging in, users will be able to to view popular drinks on the menu as well as begin the process of creating their own drinks.
Home screen
Crafting your drink
Once the user starts their drink crafting process, they will be guided through a step-by-step process, allowing them to select flavors, tea bases, sweetness levels, and toppings based on their taste preferences or dietary needs.
Order Review
Once the user has completed customizing their drink, they will be presented with a detailed summary of their order for review. The order can be added to their virtual basket. Once submitted, the finalized drink request is transmitted directly to the lab, where preparation will begin promptly.
App display
Final Product
Potential Business impacts
Enhanced Customer Engagement
The ability to fully customize drinks via the mobile app creates an interactive, personalized experience that increases user satisfaction and loyalty.
Unique branding and a sleek, science-themed identity make the brand more memorable and shareable, especially among younger audiences.
Scalability and Expansion Opportunities
A well-designed app and brand system provide a replicable model that supports opening new locations or launching franchising opportunities.
Merchandise and branded assets increase revenue streams and extend brand presence beyond the cafe.
STAGE 4 - Branding
To further develop and promote The Boba Lab brand, a range of merchandise and supplementary branding assets were created. These materials not only enhance brand visibility but also provide customers with tangible ways to engage with and represent the identity of The Boba Lab beyond the core product experience.
Conclusion
I gained a deeper understanding of how thoughtful design can directly shape both the customer experience and the perception of a brand. I learned the importance of creating a cohesive visual and experiential identity that not only reflects the brand’s personality but also enhances usability and customer engagement through intuitive, user-centered design.
Overall, this case study highlighted how strong UX and branding work hand-in-hand to elevate a business, create meaningful user experiences, and set the foundation for long-term success and growth.