[Case 03]
Redesigning the Online Ordering Experience for Braganza Tea
FOOD & BAVERAGE
Braganza Tea
Improving Online Ordering Clarity for a Multi-Location Tea Brand
Project Summary
Product: Website redesign for Braganza Tea – a local bubble tea shop in the Pacific Northwest.
Goal: Improve the online ordering experience, reduce user confusion, and make the website feel fresh and intuitive.
Audience: Braganza customers who order online, especially young professionals and bubble tea enthusiasts.
Problem Statement
Ordering online from Braganza Tea was confusing and time-consuming.
Menus were cluttered, customization options were hard to find, and users lacked confidence in the checkout process.
[Industry]
Food & Beverage
[My Role]
End-to-End UX Designer
[Platforms]
Desktop and Android
[Timeline]
October 2025- December 2025
“When ordering takes longer than drinking, you’ve got a UX problem.”
Research (What I Looked At)
User Interviews (In-store, Real Customers)
I interviewed 3 Braganza Tea customers in-person at the store to observe real ordering behavior. Key questions covered ordering habits, frustrations, and what makes a great bubble tea experience.
“I like trying new flavors, but the online menu was just a mess.”
“I couldn’t even find the toppings.”
Key patterns:
Most users ordered in person, even frequent visitors
Almost none had used the website before
Visuals were critical for decision-making
Sweetness, ice, and toppings needed to be fast and obvious
🔍 Competitive Analysis
I interviewed 3 Braganza Tea customers in-person at the store to observe real ordering behavior. Key questions covered ordering habits, frustrations, and what makes a great bubble tea experience.
📌 Key Insight:
Braganza lacked storytelling, clarity, and visuals — but had strong local potential.
💬 Affinity Mapping
Grouped insights showed common themes:
Need for visuals
Clear customization
Faster checkout
Simpler site structure
[Persona]
Meet Leo – The Bubble Tea Regular
A 25-year-old freelance photographer who treats himself with bubble tea after work.
Age: 25
Location: Seatel
Tech Proficiency: Moderate
Gender: Male
Frustrations:
Can’t tell if drinks are fruity, creamy, or sweet
Confusing menu layout
No trust in online checkout
Goals:
Visual clarity
Easy customization
Fast, mobile-friendly ordering
Ideation
To brainstorm solutions, I mapped:
User Flow: Optimized steps from homepage to order confirmation
Task Flow: Focused on quick customization and fewer screens
Sketches: Early ideas for menu layout, CTA placement, and cart behavior
🗺 [User Flow]
I designed a primary user flow focused on helping customers quickly choose a drink and place an order. The flow guides users from menu selection to customization and checkout with minimal decision points, reducing friction during ordering.
Design
I conducted informal testing with 2 users (same ones from interviews).
🧩 [Wireframes]
I started with low-fidelity wireframes to explore layout and hierarchy without focusing on visual design. These early wireframes helped validate the ordering flow and ensure key information was prioritized before moving into high-fidelity design
🎨 [ High-Fidelity Design]
UI focused on:
Colorful but calm visual design
Friendly imagery
Two clear CTAs on homepage (Order Now / View Menu)
Prototype
I conducted informal testing with 2 users (same ones from interviews).
Testing
I conducted informal testing with 2 users (same ones from interviews).
💬 [Feedback]
“I love seeing the drinks now.”
“It’s way faster — I’m not confused anymore.”
🔁 [Iterations]
Added visual drink tags (fruity / creamy / sweet)
Simplified category names
Made order confirmation page clearer
Results & Takeaways
✅ Did it work?
Yes. Users felt more confident, faster, and found it easier to customize drinks.