Taichi Bubble Tea App Redesign
Overview
Taichi Bubble Tea is a Rochester originated cafe that sells boba, ramen, sushi, and merch. Their current branding and colors do not accurately represent their quality in food and customer service, and therefore I decided to redesign their mobile ordering app with a whole new look and feel.
Problem
The current Taichi Bubble Tea ordering app does not promote customer trust, uses colors not expected in their branding, and is frustrating to try and order a drink.
With competitors like Kung Fu Tea around with their own personalized app, Taichi is behind in theirs, especially with the growth and expansion of their market and number of stores.
Research
Devising research and user interviews about what type of food apps people like to use as well as what parts of the experience make it easy for them to order food quickly. What I found out:
-
Users do not like the colors of the current app, it looks like a scam
-
Having their own mobile app is easier than ordering on DoorDash (especially with how large the company is growing)
-
A personal experience feels more official and Taichi seems more attentive and caring for their customers with a personalized app
Current Taichi App Design
.jpg)
Home page
Menu
Ordering
Persona
"I am an avid boba enthusiast on the go. I love to try all kinds of drinks with a variety of toppings."
Name: Jordyn
Age: 20
Location: Rochester, NY
Occupation: College student
Bio:
Jordyn is a 3rd year college student at University of Rochester. She is pursuing a degree in Nursing. She loves bubble tea and hanging out with her friends off campus whenever she can make the time.
Goals:
She wants to order her favorite drinks and toppings on her phone to skip the line.
Frustrations:
"I can't trust the app. Just by looking at this, I wouldn't even bother visiting this place."
"The app is too hard to navigate and looks like it hasn't been updated at all. The icons and words are too small and the designs are inconsistent."
Design Process
The method of my design process is going back and forth between sketches, user flow, prototyping, and designing the layout in full color. The way this project was handled was not in a straight line, but going back and forth, conducting user interviews and iterations, and testing to see how successful it is.
Sketches
After creating a persona, I move onto sketches. What’s important for me is to lay down my ideas on a sheet of grid paper to carefully organize the content I want and need on the app. Getting a general idea of the features I want to add helps me finalize the content without forgetting elements getting closer to a finalized version.
Wireframes
After creating sketches, I creative hi-fi wireframes to display what I want and where I want with the general area and size.
User Journey
Here, I map out the user frustrations and journey it takes for the user to get to their goal. This is important for me to discover where and when the user feels during different aspects of their journey to ordering a drink.
Solution - The Checkout Process
Home Page
I implemented a "welcome" or home screen to the app to give the use a personalized experience that displays and presents trust to the user.
This includes their social media, news, logo, and navigation options for ordering, getting rewards for each purchase to get people to purchase more to earn free drinks when they spend rewards, a gift card option for payment or to purchase a gift for someone else, and 2 button options to place an order for easier access.
The speaker on the top right is top right is to help the user hear the speech on the page if they have impaired vision.
Choose Location
Creating a map and choosing a location makes it easier to see where you are compared to the location of the store. It gives vital information to pick a location like the location, the address, the distance from your current location, the time the store closes, and whether the store is currently open for take-out, delivery, or dine-in, so the customer can go in confidently knowing that their store is open and get a rough estimate of how long it will take to get there or deliver.
View the Menu
As a customer of Taichi myself, the best part of ordering online is being able to see the food. That's why I created an intuitive way to scroll and look at the food as well as give the customer the option to view their selected favorite food and drink and to view the whole menu. I combined horizontal and vertical scrolling for easy grouping of each section. The cart on the bottom right is to view what you have placed in your shopping cart to look at if you accidentally added an item.
Customize the Drink
Consistently using the same greens throughout the check process, the screen for adding a drink with the picture showing shows the user that they are on said selection of drink. I neatly organized the way that the customization options are placed in a pattern of scrolling down, and a large and obvious button for the user to add their drink to the cart.
Delivery Details
Placing the order gives the user the option for take-out and delivery. I wanted to make it easily readable while keeping some design and color choices on this screen without it being overbearing.
This screen has the proper options for picking a delivery time, choosing where it's dropped off, and changing the location if the user accidentally chose the wrong location on the previous screen.
Account Settings
Adding account settings and a profile lets the user personalize their experience as well as give them control over their settings and options by allowing them to change their personal info, payment, address, check their transaction history, change their notifications, and view the terms and conditions.
Having a business to customer connection is important to get a customer coming back to using the app and recommend to their friends how engaging the app is.
Conclusion
Keeping and improving Taichi's company identity was difficult to do, especially changing the colors while keeping the same aesthetic and high standard the restaurant holds.
I wanted to create something accessible, clean, and easy to use for all types of people. In order to do that, I had to change what colors the company used for readability and aesthetics. The whole purpose of the app is to share what the company sells, and bring a smooth process from start to finish with the least amount of frustrations.
Since this was my first UI project, I was unable to get the most out of it, like limited peer feedback and user research. My goal is to work with a team of people to create something with the input of other people's viewpoints.
