BobaT
Imagine an iced cold, refreshing boba tea delivered to your doorstep on a warm summers day, or a cool winters breeze, or right now!
PROJECT DETAILS
I volunteered to design an intuitive and user-friendly delivery app that could be leveraged by the business to increase exposure to customers in the Tampa Bay area. I took the project one step further by applying my knowledge to create an interactive prototype in Figma for a real business in the Tampa Bay area.
Overview
BobaT is a privately owned business that wishes to increase its sales and reach out to a larger market in the Tampa Bay area. In order to promote safety due to the Covid-19 pandemic, the business identified the opportunity to deliver its products to the customer’s door in less time and with low contact. The app allows customers to select from a variety of options and the ability to customize orders in order to provide the best user experience.
PROJECT TYPE
-
Personal Project
-
3 months
-
July 2020 - October 2020
TOOLS USED
-
Pen and Paper
-
Figma
-
Google Forms
-
Lucid Chart
SKILLS DEVELOPED
-
User Research Techniques
-
Research Analysis
-
Wireframing
-
Digital Prototyping
Problem Statement
With the rise of social distancing, the demand for delivery apps and low contact has increased. Tampa has a huge demand for boba tea, but the number of delivery options are scarce.
BUSINESS GOALS
-
Provide variety of flavors and customization options
-
Increase sales by 3% through a simple to use delivery app
-
Deliver to customers in a safe and timely manner
-
Promote a cashless economy system.
USER GOALS
-
Choose from a variety of flavors and customization options
-
Place fast and convenient orders
-
Track orders and delivery on a map
-
Minimum effort during the payment process to reduce wait time.
Solution Overview
Due to high demand and less delivery services available , BobaT identified an opportunity to gain a competitive advantage in comparison to its competitors by introducing an app that delivers the best quality Boba tea in a timely and cost effective manner.
Concise and Clear Menu Page
The menu page is clear and concise. It includes the item name, a short description with the price of the item, and also an option to add the item to cart.
Simple Customization Features
The user has the option to customize their drink. They can select what kind of milk they want, the level of sweetness, the amount of ice, and also any additional toppings.
Modern and Enhanced Checkout Process
The payment screen automates the formatting of the user’s credit card number (automatically inserts spaces between every four digits) and of its expiration date (MM/YY). The proper keyboard pops up on the user’s screen for each field
Easy Delivery Tracking and Order Status
The live tracking functionality allows users to track their delivery in real time, so they can get visibility on every step of the preparation and delivery process
User Research
Surveys
I surveyed 40 individuals from different demographic backgrounds residing in Tampa. From the analysis, I found that the majority were interested in a delivery option, and had never used a delivery app to order boba tea in Tampa before. The results presented an opportunity to bridge the gap between a desire and scarcity of options. With this data, I knew who I was designing for and what features would be beneficial based on the target market.
User Interviews
What people said:
“I use public transportation to travel around for school and work and to have a delivery option would be so convenient because I love Boba!”
- Farrah Qadeer
“Due to the pandemic, I don't feel comfortable going out to public places or restaurants, so I mostly just order food or drinks to my place.”
- Dylan Rodriguez
Additional Research
on UX Best Practices
LOG IN SCREEN
Not everyone can quickly figure out the difference between Sign in and Sign up.
Displaying the two differently helps with better usability
SHOPPING SCREEN
New users spend less than 45 seconds on the shopping screen after logging in. Therefore, the design should contain an engaging layout
CUSTOMIZATION SCREEN
Since the customization feature requires work from users, the tool should be designed in a way that provides adequate payoff for the work invested
DELIVERY STATUS SCREEN
For the order status, users prefer to view the location of their order in real time on a map in addition to a display of the arrival time
PROFILE SCREEN
The profile screen contains information about a user and should be easy to use and impressive for optimal user experience
ORDER HISTORY
Customers find it beneficial to look at their order history. This section acts like a record-keeping system beneficial to the buyer and customer
Ideation
User Personas
Personas are great for getting to know the type of users who would use the app, in addition to their demographics, personality, goals and frustrations. I created the following two personas that represent BobaT's customers
Persona 1
Persona 2
Based on the needs of the personas, I identified the key content requirements, key functionality requirements, and created a user flow chart for the design
Content Requirements
-
Drink Menu
-
Text that describes the drink
-
Customization text should be simple and straightforward
-
Order History Information
Functionality Requirements
-
Add items to shopping cart
-
Customize the order (indicate the time of delivery, choose from a list of base flavors, customize boba tea, indicate the number of drink ordered, indicate the total price of the order)
-
Place order (Contact information, delivery address, make a payment, confirm payment)
-
Make changes/cancel the order when order is being delivered
User Flow Chart
Design
Low fidelity Wireframes
Following the research and ideation process, low fidelity wireframes were used to ideate and share designs with stakeholders and test with users. Low-fidelity meant that we could quickly get feedback, and create new ideas. This allowed us to have a quick feedback loop and generate the maximum number of ideas without judgement.
High Fidelity Interactive Prototype
Evaluation
Usability Tests
Once the design was created, I wanted to determine whether users can successful complete critical tasks when using the prototype and see if the design of the interface supported the purpose of the app. By giving users specific tasks to complete, I was able to evaluate the prototype and the user flow.
Method Details
Findings
-
5 users from different backgrounds
-
1 male teenager, 2 individuals (male and female) in their 20s, one 35 year old male, and one 49 year old female.
-
The 5 users also belonged to different ethnic backgrounds
-
Conducted usability tests with paper printouts as well as Figma prototype.
-
All participants found the app easy to use and 2 said they would use frequently
-
Users learned to use this app fairly quickly, and said the transition between the pages was straightforward and smooth
-
Additional feedback option, about us page, and a contact option would enhance the overall user experience
Future Considerations
Website features for future considerations:
-
Implement a review system after the product has been delivered to ensure continuous improvement. One of the feedbacks I received on testing the prototype with a user, was that she actually Google’s the store’s reviews before ordering.
-
Include an ‘About us’ and ‘Contact Us’ Section to improve the experience of the user
-
Including social media sign ups/logins such as Facebook and Gmail will simplify the sign up and login process
Key Learnings
-
Set a mediocre standard first to get the ball rolling and get perfect gradually instead of trying to perfect everything since the beginning
-
Manage time, stick to high priorities
-
User feedback and testing are very crucial in determining what's missing and how to better improve in the product
Conclusion
The BobaT project was super fun and interesting as I learned so many new things regarding experience design and user interface. Additionally, I tried to create a simple, functional and minimalistic app to improve the experience of the users who wish to have Boba tea delivered to them.