Designing an end-to-end application to order boba
Overview
Role:
Product Design Lead (UX/UI)
UX Researcher
Timeline:
~80 Hours (4 Weeks)
Tools Used:
Figma, Google Forms, Maze
Problem
With so many customization options for boba drinks, not only is there a higher chance of mistakes being made on orders placed in-store, but it also may be inconvenient for those placing multiple drink orders.
Proposed Solution
Design a user-friendly app that allows people to place customized boba tea orders.
Research Goals
Understand what motivates people to order food/ drinks through a mobile app
Determine what pain points people may have when ordering through a mobile app
Explore how people are currently placing their takeout orders
Competitive Analysis
I assembled a competitive analysis to explore four market competitors and learned that other competitors clearly indicate the option to customize your drinks and display the status of your loyalty rewards.
User Survey
Participants were asked about their takeout and boba ordering habits
User Interviews
Key Insights
People feel rushed when ordering in-person or by phone and have a harder time asking for customizations
People feel that there are less chances of order mistakes when placing it online
What they said:
User Persona
To ensure I am designing a product that is grounded on real user needs and goals, I created two user personas based on my research.
Meet Lauren! 👋
Lauren is a 22-year-old college student that enjoys getting boba with her friends. Because she is vegan, it’s important for her to be able to customize her drink.
Meet Justin! 👋
Justin is a busy data analyst that enjoys stopping by his favorite boba shop once a week. He is a loyal customer and loves participating in rewards programs to get free drinks.
Feature Roadmap
I learned that the main reasons people ordered online is to customize their items and participate in loyalty rewards programs.
I created a feature roadmap that prioritized the features involved with these insights.
User Flows
When ordering online, I discovered that people enjoy customizing their orders and reviewing it before checking out so I created user flows for customizing a drink and editing items in a cart to visualize the decisions a user would undergo when completing these tasks.
Journey Map
To better empathize with user’s thoughts and perceptions when they are navigating through the app, I assembled a journey map.
Wireframes
Once I had the key tasks and user flows defined, I created wireframes to help me visualize the user’s overall journey through each key screen.
UI Kit
To create uniqueness to the app and ensure consistency across the platform, I assembled a UI kit prior to moving onto the high-fidelity designs.
High Fidelity Prototype
After applying the established design system to create my high-fidelity wireframes, I used Figma’s prototype tool to visualize the user’s overall journey through each key screen.
Home & Order
Drink Description & Customize Drink
Cart
Usability Testing
Results
Participants wanted a clearer visual indication when an item is added to their cart
Some participants were unsure if it was required to add toppings to their drink
Participants mentioned that the layout of the drink categories and customization options was intuitive and easy to navigate
Revisions
Participants were unsure of how many selections can be made and if certain selections were optional so I added labels next to the customization options to inform users of how many selections they can make.
Participants mentioned wanting a clearer visual indication to show when an item is added to their bag so I added an overlay to notify users when an item is added to their cart.
Final Prototype
I applied the insights from my usability test to create my final prototype.
Reflection
What I learned
I began this project hypothesizing that people enjoy ordering takeout online so they can place their orders ahead of time and avoid waiting in the store. After reviewing my research results, I was surprised to see how important it was for people to add customizations to their orders. I then realized that discovery research is a crucial step to having a clearly defined problem before generating solutions.
Designing a minimum viable product with time constraints forced me to focus on the key features determined by my user research. I learned to effectively manage my time and prioritize the elements that were most essential for users to achieve their goals
Next Steps
Add more key tasks
Due to the given time constraints, I had to prioritize the key tasks that were most important for users to achieve their goals. One of the key insights I discovered from my user interviews is that many users will download an app for a restaurant if there is a loyalty program. In the future, I would love to add a feature for users to view their loyalty rewards from their purchases.
Conduct additional usability tests
After implementing an additional feature for users to view their loyalty rewards, I would like to conduct another round of usability tests to gather feedback on the updated design iteration and continue to improve the app.