Product Overview
BobaGO is a boba tea cafe delivery app that users can select from a large variety of tea and receive delivered orders in a timely manner.
Problem
Current drink ordering applications often suffer from inconsistent design, complicated substitute ingredient options, and a lack of seamless payment integration.
The Goal
BobaGO aims to resolve to-go tea orders for users such as workers and students that lack the time to dine-in or prefer contactless delivery.
Challenges
Design a seamless user experience to minimize the time spent completing an order
Eliminate barriers by equipping content to support assistive technologies
Provide options such as payment integrations and ingredient choices while keeping the UI simple
User Research
I conducted competitive analysis, interviews and created empathy maps to understand the main pain points. A primary user group identified that having to select from a wide variety of tea with absent ingredients are time consuming and cause frustration. Analysis revealed that focusing the goals in efficiency, usability, and clear descriptions would enhance the mobile ordering experience. Other key pain points included missing digital wallet options, inaccurate tracking updates, and lack personal customization.
Meet The Users
Yesenia is a hairdresser who is always on the go. Timeliness is important to her as she is on a tight schedule of client appointments. Yesenia would like to order as quickly as possible to enjoy the rest of her lunch time. She would also like an easier way to tell how long the order will take until ready so she can plan ahead.
- Having a set schedule without inconveniences
- Have a relaxing lunch without losing precious time
- To give and receive excellent customer service
- Lacking estimate of delivery time to ensure drink arrives during the lunch hour
- Searching without voice control can be a hassle
- Annoyed when previous order is not saved for future orders
Nick is pursuing a bachelor’s degree in computer science to specialize in cyber security. He spends most of the day in classes and has study sessions at night. He enjoys drinking tea during his sessions and loves the variety boba tea has to offer but is frustrated with the lack of images and descriptions that make it easier to select his order.
- To experience different cultures and travel
- Enjoy customizing order with healthy alternatives
- A simpler and faster experience when ordering food or drink
- Lack of description for each type of boba pearl leaves him feeling lost so the option is avoided
- Would like to see newly added drinks without having to spend time searching for it
- Needs to see milk alternatives as he is lactose intolerance
User Journey Map
Goal: An easy and efficient way to order tea for delivery
Design Process
I used my collected research to begin creating and prototyping a design system for BobaGO. Once I felt I had established the underlying structure through digital wireframes, I built on the visual design throughout several iterations to resolve the challenges at hand.
Sketches
I started with ideating different concepts of each screen to help me decide which elements would accomplish a fast and simple way for the user to order from the home page. The objective was to create a shorter browsing time but remain exciting and informative for familiar or unfamiliar users alike.
Wireframes
After completing my low-fi digital wireframes, I created a low-fidelity prototype to mimic the user flow of ordering two tea drinks from start to tracking. This prototype was a key example used in the first usability study.
Iterations and Solutions
I conducted two rounds of usability studies containing five participants each. Findings from the first study helped build the design foundation for wireframes and the second study defined details for high-fidelity mockups. Important changes such as payment methods, scheduling a delivery time and editing an order were added as users needed more options for a seamless checkout experience based on the second study's feedback.
Efficiency
From the home page the user can search for a tea, select a category, one tap order from the most popular, favorite a tea or review the order by selecting the icon at the top right. These options allow users to quickly order tea however they prefer. All the tea icons were created from scratch for users to easily recognize while keeping the design minimal.
Accessibility
Voice recognition, which is imperative for those with motor-skill disabilities, allows the user to access the microphone in the search bar to activate speech-to-text. Universal and customized icons are throughout the app for easy navigation and prevent clutter. Alt text is provided to the images of each tea for screen readers to describe the meaning and appearance to the user.
Customization
Users can select add-ons or alternatives for ingredient friendly choices, the size of the drink and quantity. All options can be seen on a single screen to keep the tea details as the focus point and minimize decision making. The check out page is also optimized for efficiency allowing users to schedule a delivery time, choose from various payment methods and scan a debit or credit card that will autofill information.
The Results
The final design assures each page of BobaGO is simple, efficient and user-friendly. Through many iterations of BobaGO, I discovered that comprehending the user journey is crucial for addressing design challenges and serves as a benchmark for creating successful experiences. Peer feedback and usability studies revealed improvements that helped me create essential elements for tea enthusiast everywhere. In the future, I plan to add detailed ingredient information and an interactive heart animation for favoriting drinks to make the experience more engaging.
