BOBA in a BOX

Timeline:
7 weeks
Feb 2023 - Mar 2023

My Contribution:
User Research
User Experience
Interface Design
Prototyping

Collaborators:
3 Product Designers
1 Researcher

🧋 Set the scene

Imagine you're at a boba shop for the first time, excited to try out their famous drinks. But as you wait in line, you start to feel nervous and anxious.
The menu on the wall is too small to read from where you're standing, and you don't want to hold up the line by asking the staff too many questions. You start to panic, wondering if you should just leave.

🧋 The Problem

Customers at boba shops want to make efficient and informed ordering choices but are often overwhelmed and frustrated by long waiting lines and limited menu descriptions.

🌟 The Solution

With Boba in a Box, our interactive ordering kiosk, you can explore the menu at your own pace, without feeling rushed or overwhelmed. Our kiosk offers high-quality images, detailed descriptions, and ingredient lists, so you can make an informed decision without any added stress.

Field Research + User Interviews

✨ Understanding customer priorities and challenges

100% of respondents said they would leave if they saw a long line at a food place or use kiosk to order if it’s faster.

In our initial fieldwork research, we interviewed 9 customers at various food locations including several restaurants, coffee shops, shopping centers, etc…

🏹 Key insights:

Speed is a main priority.
Menus with no images or descriptions make it harder for customers to make decisions.
Orders are sometimes misheard by the cashiers.
Common UI affordances are not always obvious to all users

Storyboards

✨ From frustration to satisfaction

Lo-Fi Prototype Testing

✨ From info-only to order-ready

🏹 Key insights:

While our kiosk was originally designed only for providing information and allowing user customizations, many users have expressed a desire for an ordering feature to be added to it.
Although our prototype was generally easy to navigate without instructions, some icons, such as the preferences page on the sidebar, were not as intuitive as others.

🌈 Icon Improvements:

Changed the icon on the sidebar, and added labels underneath the icon to clarify each interaction.
Added an ordering option and a "Cart" button to the sidebar

🌈 Checkout User Flow:

Created a “checkout” user flow to our digital and physical prototype.

Hi-Fi Prototype Testing

✨ Checking out the checkout

🏹 Key insights:

Users wanted more information and options to be included in the checkout process.
The header and body text in the staff favorites section should have more contrast to improve readability.
Additional interactions are necessary in the menu screens to enhance user engagement and functionality.

Issue:

Users provided feedback that the Staff Favorites page wasn’t clear about which dishes were being recommended.

Solution:

Made the recommended items the central focus and created a clearer visual hierarchy.

Issue:

Users can't cancel an item without restarting their order.

Solution:

Added quantity modification and customization details.
Added a checkout summary to provide more transparency during the checkout process.

✨ Final Designs

Figma ↗

✨ Reflection

What tools did you learn to use during the project?

I got the hang of Dovetail, a tool for analyzing qualitative data from user interviews. It helped me pinpoint user pain points and prioritize features to meet their needs.

What did you learn about the importance of user-centered design?

Designing with the user in mind became crystal clear throughout the project. We embraced continuous testing and iteration, starting with low-fidelity prototypes to gather early feedback and smooth out the user flow.

What's your next steps for this project?

We made significant improvements to our prototype, but we know there's always room for more refinement. One area I'd love to focus on is iterating the checkout user flow for even more streamlined and user-friendly experience.

🧋 Set the scene

🧋 The Problem

Customers at boba shops want to make efficient and informed ordering choices but are often overwhelmed and frustrated by long waiting lines and limited menu descriptions.

🌟 The Solution

With Boba in a Box, our interactive ordering kiosk, you can explore the menu at your own pace, without feeling rushed or overwhelmed. Our kiosk offers high-quality images, detailed descriptions, and ingredient lists, so you can make an informed decision without any added stress.

Field Research + User Interviews

✨ Understanding customer priorities and challenges

100% of respondents said they would leave if they saw a long line at a food place or use kiosk to order if it’s faster.

🏹 Key insights:

Storyboards

✨ From frustration to satisfaction

Lo-Fi Prototype Testing

✨ From info-only to order-ready

🏹 Key insights:

🌈 Icon Improvements:

🌈 Checkout User Flow:

Hi-Fi Prototype Testing

✨ Checking out the checkout

🏹 Key insights:

Issue:

Solution:

Issue:

Solution:

✨ Final Designs

✨ Reflection

Thanks for stopping by!Let's stay in touch~

Thanks for stopping by!
Let's stay in touch~