Streamlined ordering for bubble tea drinkers
10 min read ⏲
Redesigning a bubble tea shop menu and online ordering system to make it easier for customers to access its beverage and food options.
Project overview
Disclaimer: This case study is not affiliated with Tea N Bites. The project was created solely to put my learning into practice.
Roles and responsibilities
User research: Competitive Analysis, User Interviews, Affinity Mapping
UX design: Task Flow, Sketching, Iterative Wireframes, Prototyping, Testing Sessions
Project context
Type: Team - Sara Sierra
Timeline: 2 weeks in 2024
Platform: Safari iOS
Tools used
Figma
FigJam
Problem
Bubble tea cafes are popping up all throughout South Florida, attracting teens and young adults. Despite this, Tea N Bites, a Miami-based bubble tea shop, struggles to clearly communicate its offerings and lacks an online ordering option on its website. To stay competitive with other market players, the website must be improved to cater to this target demographic.
Solution
Home screen
Discover what Tea N Bites' has to offer, find the location and operation hours, view the interior, and follow their Instagram page for more updates and visuals.
Menu screen
The menu offers a variety of options all in one place, from classic milk teas to Korean corn dogs.
Drinks screen
Users can read descriptions of their preferred item, including information on sizes, costs, ingredients, allergens, and available toppings.
Order screen
When customers are ready to order, they can conveniently do so through Google's food ordering platform.
Inspiration for redesign
Frustration with menu access
I’m always on the hunt for new boba spots, and I was excited to try a new place with my sister. However, before heading in, I wanted to check out their menu online, but I was frustrated to find that their website didn’t have one. This experience inspired me to team up with my former classmate, Sara, to redesign the website for Tea N Bites.
The design process
In this challenge, we combined the Design Sprint framework with Design Thinking to quickly iterate on an existing product and build a knowledge base during the empathize and discovery phase. This approach added value across various stages of product development.
Prototype
Test
Ideate
Empathize
Empathize
Areas of opportunity on the website
The site header is crowded with an unclear hierarchy, and is touch sensitive. I found myself accidentally tapping the phone number instead of the hamburger menu.
Menu items are tucked away in the hamburger menu, only organized under bubble tea, iced tea, and desserts, overlooking their full range of offerings.
Their menu is located in the Gallery, all the way at the bottom of the screen.
The copy on the website is too text-heavy for mobile devices, especially in the home.
The bright, neon pink color of the footer made it difficult to view vital information such as operation hours.
The current website
Secondary research
Conducting secondary research for this project was crucial. The idea came from a perceived gap in the market, but how wide is it? We started with a quick industry review to understand who we’re designing for, what the landscape looks like, and where our project fits in.
The boba boom is reshaping the U.S. beverage market
A report by Allied Market Research shows that the global bubble tea market, valued at $3.1 billion in 2023, is on track to hit $5.4 billion by 2033, with a steady growth rate of 5.9% from 2024 to 2033. This growing trend is easy to see in South Florida, where bubble tea shops are popping up, becoming favorite hangout spots for teens and young adults.
According to a study by the Pearl Lemon Boba, most bubble tea consumers are between 18 and 30 years old, with an increasing number being teenagers
While both men and women enjoy this beverage, women are more likely to be regular consumers than men.
Asian Americans were the largest demographic of bubble tea drinkers, followed by Hispanic/Latinx Americans and African Americans.
Bubble tea shops located in urban areas or near universities tend to have higher sales because they cater to younger individuals who seek trendy experiences.
A 2019 survey from MGH found that 77% of U.S. diners visit a restaurant’s website before they dine in or order out
68%
said a restaurant's website has discouraged them from visiting.
62%
said a restaurant's website discouraged them from ordering delivery or takeout.
About one-third have been discouraged from visiting a restaurant because the website was difficult to navigate (33%), menus were difficult to read (30%), or websites looked old or out of date (30%). As you can see, a poor online experience can result in a loss of business.
Competitive analysis
Sizing up the local competition
Competitive analysis is also important to make sure the perceived gap we’ve identified is genuine and that there is a viable demand for a design solution. I researched other boba shops around Tea N Bites. Checking out their websites revealed their strengths and weaknesses, helping us identify any gaps in features that we might address. I looked at the websites of four direct competitors who sell bubble tea.
¾ competitors have a menu on their website.
¾ Competitors give users the option to order online from a website that is connected to a third party
Primary research
Interviewing four young adults about their bubble tea habits
Sara and I visited Starbucks and a local boba spot to gain deeper insights into our potential users. We interviewed four people aged 19 to 29. The first two were one-on-one, and Sara and I teamed up to interview two friends. Keeping it semi-structured with open-ended questions, we wanted them to spill the tea (pun intended!) about their boba tea consumption habits and their impression of Tea N Bites' website.
We made an affinity map to synthesize interview responses and grouped these pain points and behaviors under common themes.
Three key insights from the interviews
Finding menu information
Interviewees faced challenges locating the menu on Tea N Bite's website. Placing the menu in the Gallery wasn’t intuitive for them to access, making it harder for customers to learn about the restaurant’s options.
Optimizing menu presentation
A menu should be clear and organized, making it easy for customers to read and understand the offerings. It should include information on ingredients, allergens, add-ons, photos, and concise descriptions for each item.
Online ordering preferences
Interviewees appreciate online ordering for its convenience, customization options and add-ons, and the ability to avoid the social pressure associated with tipping.
Design challenge
The insights led us to formulate two HMW questions to narrow our focus and guide our thinking as we jump into ideating potential solutions:
How might we optimize menu visibility for a better understanding of drinks, food, and desserts?
How might we streamline the ordering process for customer confidence and ease?
Ideate
Sketch explorations
Looking for UI inspiration from cafes
Based on our HMWs, Sara and I initiated the ideation process to explore possible solutions for our users. We looked around for UI inspiration from coffee shops, cafes, and boba tea websites to find layouts that worked best.
In a 15-min brainstorming session, we turned our inspiration into quick sketches. The sketches focused on how users would browse the home screen to find general information about Tea N Bites and view menu options before making an order.
We drew inspiration from popular restaurants like Starbucks, Sweetgreen, and Sproutz.
Prototype
Mid-fi prototype
Enhancing usability with improved menu organization
Sara and I created a grayscale mid-fidelity prototype with images to provide context and make user feedback more relevant during usability testing. Under the home screen hero image, we added a menu preview, eliminating the need to search in the Gallery. I reorganized the menu into three categories—drinks, desserts, and food—to help customers find what they are looking for without having to sift through unrelated items. For smoothie details, we considered many layouts, including a modal pop-up, but finally decided to give each smoothie its own screen to highlight important information like toppings.
Test
Field testing the prototype
The mid-fidelity prototype was ready for testing, so we ran seven moderated usability tests to see how users would carry out each task and identify any issues they may face. Sara and I chose a boba tea shop as our testing location. Like an ethnographer, we observed people in their natural habitat, since we can learn so much more when they're in the surrounding context. We drew a user testing plan with four tasks to complete. Because many people were with their friends, we held group usability testing sessions, where I led the session and Sara took notes.
All participants passed their test. We carefully observed their interactions with the prototype and documented their feedback, but still found issues, so we needed to fine-tune our design.
Change 1:
Home screen - about
Problem: One testee tried to pinch-to-zoom the image, another found it didn't match the copy, and a third found the negative space on top of the image was off.
Solution: We updated the image to to showcase trendy shop activities and added a relevant heading for easier scanning.
Change 2:
Home screen - gallery
Problem: As said before, one testee pointed out that the negative space on the website felt off.
Solution: We added a relevant heading to fill the negative space. Additionally, we moved the image showcasing the inside of the restaurant from the “About” section to the “Gallery” for easier viewing of the website’s interior.
Change 3:
Drinks screen
Problem: Users wanted to know the costs of each smoothie.
Solution: This was tricky since prices on the website differed from third-party delivery services, we added a disclaimer at the bottom of the screen to manage user expectations about pricing. This required ongoing iteration.
Change 4:
Smoothie details screen
Problem: Users wanted to know about the size of each drink.
Solution: Upon extensive searching, we found no information on size options, so we assumed they come in a standard size. We added disclaimers to inform users that it's one size only and included a reminder that prices may vary.
Hi-fi prototype
Adding brand colors to the prototype
We followed Tea N Bites' branding when adding color to our tested prototype, assuring consistency with the original website and maintaining customer trust. Familiar visuals make users feel more comfortable and confident when interacting with a company.
Afterwards, I asked our former TA for input. We considered leaving out prices at this point, but she suggested adding them for the different smoothie options and including a "Gallery" in the footer quick links. When redesigning a website and planning to pitch it to the owners, it's important to try to keep all aspects. This tip was super helpful because the Gallery was featured on Tea N Bites’ live website, and users in our interviews preferred to see photos.
Looking ahead
Project outcomes
To gauge the success of our redesign, we need to track key performance indicators aligned with the business goals. Since this was a practice project without Tea N Bites’ involvement, we would hypothetically track:
Increased conversions for online sales.
Online orders since it directly reflects the redesign's effectiveness in driving customer engagement and facilitating purchases.
Key learnings
Embrace uncertainty: Now that we're out of boot camp, there's no more checklist, so the design process feels much messier. It's so important to talk with teammates about whether certain deliverables are necessary for each project.
Daily logs for project alignment: Keep a log of your daily activities, what you've learned, and your plans for the next day. This ensures alignment with project goals and helps keep everyone on track with their tasks and timelines.
What’s next?
In the future, we plan to add a "Popular Items" section to the menu to streamline user decision-making by highlighting well-liked items. We’d also like to continue designing different components of the website, including the Gallery, Reviews, Contact Information, and About section.