My Role
User Interview
Wireframing
Prototyping
User Testing
Tools
Figma
Timeline
Jul - Dec 2022
Team
Michelle Chen
Eunice Wu
Mandy Furru
At a Glance
Overview
This project began as a side initiative while I was working as a barista at Baroness Bubble Tea. Motivated by customer feedback about the challenges with the online ordering experience, I saw an opportunity to take the initiative and improve the process for the store. At the same time, it was a chance to embark on my UX case study journey, combining my hands-on experience with user-centered design principles.
Problem
Customers found the Baroness mobile ordering platform unintuitive and confusing, with issues such as poor navigation, a lack of customization clarity, and a frustrating checkout process. These issues led to reduced online orders and complaints, driving customers to use third-party delivery platforms instead.
Solution
Our goal was to create an intuitive, aesthetically pleasing ordering experience. We redesigned the online ordering website for both desktop and mobile, focusing on simplifying the drink selection, customization, and checkout process.
The redesigned system offers:
Easy navigation with clear product descriptions and images.
A streamlined drink customization flows with better visibility for options.
Guest checkout without requiring account creation.
Enhanced visual design with improved color contrast and legibility.
Understand the Problem
To understand user needs and improve Baroness online ordering system, we conducted a competitive analysis of similar bubble tea websites and informal user interviews with customers. These methods helped us identify key pain points and opportunities for improvement in the Baroness online ordering experience.
Identifying Primary Users
To ensure the redesign meets Baroness’s target audience needs, we identified three primary user groups based on usage patterns and engagement. These groups guided the development of features for an improved user experience:
Visitors: Casual users who browse the site, view the catalogue, but do not complete a purchase. Often arrive via social media or search engines.
New Clients: First-time customers who browse the catalogue, register, and make a purchase. Typically former visitors or first-time buyers convinced by the site’s offerings.
Returning Clients: Customers who have previously made purchases and use their login details to quickly access the site’s services. Best suited for the mobile version, as they are familiar with the interface.
Competitive Analysis
We assessed the online ordering systems of four bubble tea shops: Baroness, Kung Fu Tea, Chatime, and Coco. Baroness and Kung Fu Tea were direct competitors, while Chatime and Coco were included for their success and recognition in the market. We conducted a competitive analysis using Nielsen Norman Group’s 10 Usability Heuristics (Nielsen, 2020) as a framework.
Usability Rating Scale
0 = I don't agree that this is a usability problem at all.
(In our evaluation, 0 with no explanation means there is no issue; 0 with explanation shows good usability practice we’d like to emphasize)
1 = Cosmetic problem only; need not be fixed unless extra time is available on the project
2 = Minor usability problem; fixing this should be given low priority
3 = Major usability problem; important to fix, so should be given high priority
4 = Usability catastrophe; imperative to fix this before the product can be released
Usability Issues
Baroness’s website performed poorly in the heuristic evaluation due to confusing menu navigation, lack of user control, and poor visual design. These usability issues significantly hinder the user experience, highlighting the need for a comprehensive redesign.
The following are the categorized usability issues :
Visibility of System Status
The system lacked feedback on user actions during the ordering process, leaving users unsure of what steps to take next.
User Control and Freedom
No clear "exit" forced users to rely on the back button.
Guest checkout was unavailable, requiring account sign-up before purchase.
Aesthetic and Minimalist Design
The website suffered from poor text alignment and color contrast, making the interface visually unappealing and difficult to read.
Sharpen the Focus
User Interviews
To gain further insights beyond our heuristic evaluation, we conducted informal interviews with three participants (aged 19-35), including a student and two Baroness customers. These interviews helped us identify user frustrations and unexpected areas for improvement.
Key Findings
Visual Design Issues: Poor color choices and fonts made the site difficult to navigate.
Complicated Checkout Process: Users disliked being required to log in before adding items, and calling for a guest checkout option.
Additional Feedback
Discount Incentives
Confusing Icons
"Top Drinks" Category Was Appreciated
The interviews confirmed the need for a more user-friendly, flexible system with simpler navigation and clearer visual design. These insights shaped our redesign approach.
Personas
We developed three personas from our research to align the redesign with user needs. These represent typical customers and highlight key features they value.
Collectively, the personas embody the following qualities:
Discount Seekers: Motivated by savings, users are drawn to discounts.
Social Media Users: Active on social media, they value easy integration for sharing and interaction.
On-the-Go Orderers: Need a quick, mobile-friendly ordering experience.
Simplicity Lovers: Prefer a streamlined, easy-to-navigate interface.
Group Orderers: Often place group orders, needing simple functionality for multiple drinks.
Customization Fans: Expect full drink customization options.
1. Will: First-time customer, looking for a quick, simple ordering process
2. Phoebe: Group orderer, needs clear labeling for group orders.
3. Jen: Regular customer, values easy drink customization.
Task Analysis
To better understand how users interact with the redesigned ordering system, we conducted a detailed task analysis, focusing on five key scenarios that reflect common user goals. Each scenario was mapped to specific user actions to ensure that the site’s new structure seamlessly meets user needs.
I want to order a drink for myself…
Will, a first-time customer, orders from the "Top Drinks" section, customizes his drink and places the order without logging in.
I want to make a group order…
Will orders drinks for himself and his roommates using the search bar and “Special Series” collection, easily adding multiple drinks and tracking his stamp card points.
I want to place an order with special instructions…
Phoebe orders drinks for her son's friends, using the system to add special instructions for labeling each drink with their names, ensuring order accuracy.
I want to order a day ahead…
Phoebe orders drinks the night before brunch and schedules a pick-up for the next morning, easily setting a future time despite the store being closed.
I want to customize a favorite drink of mine fast and easily…
Jen, a regular, searches for her usual order, adds extra toppings, and completes the process without logging in, keeping it quick and easy.
Explore Possibilities
Primary Functions for the online ordering system
The redesigned Baroness website is built to provide a seamless, convenient ordering experience. Each function is carefully designed to enhance usability and address user pain points identified in interviews.
Below are the primary functions and their corresponding sections of the website information architecture:
Key Improvements
Bring Ideas to Life
For this project, we adopted a mobile-first approach, starting with the design of the mobile interface to ensure optimal functionality on smaller screens. This allowed us to focus on creating a seamless, user-friendly experience for mobile users, who represent a significant portion of the customer base. Once the mobile interface was solidified, we scaled the design up to larger screens, ensuring consistency and usability across all devices.
Paper Prototype
In the prototyping phase, We created a pencil and paper prototype to visualize the core information architecture from the user's perspective.
1.Drink Selection and Customization
2. Shopping cart and Check-out Button
3. Check-out Process : Select Pick-up time and Pay
Cognitive Walkthrough
We conducted a cognitive walkthrough of our paper prototype, focusing on three key user goals: drink selection, customization, and checkout.
Goal 1: Drink Selection
Users can easily browse the menu using the search bar or menu options. After selecting a drink, a pop-up customization window appears, confirming their choice.Goal 2: Drink Customization
The pop-up allows users to adjust size, temperature, sweetness, ice, and toppings. Selected options change color for confirmation, and the cart and price update immediately.Goal 3: Order Checkout
The checkout button is clearly visible in the cart, leading to a page where users can select pick-up time, provide contact details, and make payment. A confirmation window follows the order.
This walkthrough ensured that key actions were intuitive and user-friendly throughout the ordering process in our paper prototype, allowing us to move on to the lo-fi prototype design.
Lo-Fi Prototype
After finalizing the paper prototype and confirming its functionality through a cognitive walkthrough, we created a low-fidelity prototype using Figma.
This version included key components such as the account page, drink collection lists, a search function, and the checkout page, aligning with the essential Information Architecture of the project.
We designed the lo-fi prototype to cover all six scenarios, but for this presentation, we will focus on the most complex scenario to demonstrate the full functionality and design considerations.
Scenario: Ordering a customized drink with special instructions
Ordering a drink
Browse drinks
Users can browse the menu using the search bar or menu options.
Customization
The pop-up customization window allows users to adjust size, temperature, sweetness, ice, and toppings, with selected options changing color for confirmation.
Add to cart
The cart overlay appears after the drinks are added, and the cart and price update immediately.
Editing the Order
View the order
Click the cart to review or modify the order.
Add special instructions
Click the note icon to add special instructions to each drink.
Save the change
Click “Done” button to save the instructions.
Checkout Process
Specify pick-up time and contact information
Click the “Checkout” button to begin the checkout process, specify the pick-up time, and fill in contact information.
Place the order
Click “Place Order” to submit the order.
Order confirmation
After placing the order, a confirmation message will appear.
Test and Refine
User Testing
After developing a low-fidelity prototype in Figma, we conducted user testing to evaluate the design's usability and gather feedback for further improvement. We recruited five participants between the ages of 22 and 30 using convenience sampling. Participants completed various tasks based on six scenarios, focusing on ordering drinks through the platform. We made several modifications and enhancements that directly informed the improvements in our medium-fidelity prototype.
Key Findings
Participants successfully completed all tasks, and appreciated the intuitive task flow and navigability. However, they pointed out areas for improvement — drink descriptions, customization, Editing the order process
“I’m not sure what Lychee Paradise drink is.”
Users wanted brief descriptions for drinks like Lychee Paradise to provide clarity.
We added a line of description for Lychee Paradise.
“What's the price difference between medium and large?”
User suggested display price differences between medium and large drinks to reduce confusion.
We displayed the difference between medium and large drinks.
“Why do I need to specify the ice level when I select a hot drink?”
Users also suggested that it’s clearer for them to have the ice level option disabled when hot drinks are selected.
We disabled the ice level options when the hot drink is selected.
“I prefer adding instructions to each drink during customization rather than all at once in the cart.”
The special instructions field appeared in both the customization and checkout pages, causing confusion.
We added the special instructions to the customization page for clarity.
“The note icon in the cart is confusing.”
Users were confused by the note icon in the cart.
We added the edit button on the selected drink for the user to click on in the cart.
Adaptability and Reception
During the post-test interview, we also asked users to rate their experience on a Likert scale. The average scores were:
5.2/7 for liking the concept of the prototype.
4.4/7 for the layout and interface.
4.8/7 for the likelihood of using the prototype in the future.
Users found the task flows intuitive and appreciated the clarity of the interface, despite limitations in interactivity due to the lo-fi prototype's nature. These insights helped identify areas for refinement and ensured the design met user needs.
High Fidelity Prototype - Mobile
User testing allowed us to assess user comprehension, usability, and overall satisfaction with the design. Based on the feedback, we implemented key updates and enhancements that shaped our high-fidelity prototype. For this presentation, we will focus on the most complex scenario—ordering a customized drink with special instructions—to showcase the full functionality and design considerations in the final prototype.
Ordering a drink + Adding special instructions
Editing the order + Checkout
High-Fidelity Prototype - Desktop
For the high-fidelity desktop prototype section, a detailed comparison between the old and new interfaces is showcased below, highlighting key improvements. The redesigned interface enhances usability with better navigation, updated visuals, and a more intuitive ordering process. The desktop prototype of the ordering flow illustrates the streamlined steps, from product selection to customization and checkout, demonstrating the major advancements made to improve the overall user experience.
OLD
NEW
Ordering a drink + Customization
Viewing the cart + Checkout
Design System
Palette
We followed the brand's color scheme to maintain consistency, but reimagined it in a way that enhances visual appeal and color contrast compared to the old site. The primary colors convey warmth and familiarity, while the secondary tones provide balance and structure. Accent colors were strategically used to highlight key actions and improve usability without overwhelming the user.
Primary
Secondary
Accent
Typography
We selected Roboto for the Baroness interface because of its clean, modern look, which aligns perfectly with the brand's aesthetic while offering great readability across different screen sizes. Its versatility in weights and styles enhances the overall user experience.
Roboto 30
Roboto 28
Roboto 24
Roboto 24 (Regular)
Roboto 20
Roboto 18
Roboto 16
Reflection
Redesign Experience
This project was my first deep dive into redesigning for both mobile and desktop interfaces. Through user interviews, task scenarios, and competitive analysis, I learned the value of basing design decisions on data and applying usability principles to identify key issues. Even informal user interviews proved to be incredibly insightful, generating valuable feedback from real users.
The Impact of User Testing
User testing was crucial in refining our design. It demonstrated how addressing even small user pain points can greatly improve the overall experience. Feedback around drink descriptions (for items with special names) and clarity in customization (such as greyed-out options) helped us make the system more user-friendly and intuitive.
Accomplishments
I'm especially proud of how I took the initiative to contribute to the store’s improvement, even beyond my role as a barista. Being on the front lines gave me unique insights into customer feedback and the ordering process, allowing me to empathize with users and translate research into a functional prototype. We successfully streamlined the ordering process while staying true to the brand’s aesthetics. The customization features we developed directly addressed users' need for control over their orders.
While we couldn’t implement every suggestion—such as full menu customization—this project taught me to focus on feasible solutions while keeping future improvements in mind. It was an invaluable experience in balancing user feedback, technical constraints, and design goals. I’m eager to apply these lessons to future design projects, where iteration and flexibility are key.