Screen Shot 2020-11-25 at 2.35.16 PM.png

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

  1. Provide variety of flavors and customization options 

  2. Increase sales by 3% through a simple to use delivery app

  3. Deliver to customers in a safe and timely manner

  4. Promote a cashless economy system.

USER GOALS

  1. Choose from a variety of flavors and customization options

  2. Place fast and convenient orders

  3. Track orders and delivery on a map

  4. 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.

Menu%20Screen_edited.png

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.

Customization%20Screen_edited.png

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

Payment%20Screen_edited.png

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

Delivery%20tracking%20screen_edited.png
 
 

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

Persona1_Aaliya.png

Persona 2

Persona2_Ryna.png

 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. 

Wireframe1.png
Wireframe2.png
UserFlowChart.png
 
 

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.