Milk Tea App

My First Ever Case Study

After completing my thesis, I found researching and discovering design solutions fascinating. Hence, I took the first step in pursuing it as a career by building my first case study. I took some Google UX Design Certificate courses to guide me through the process.

On the second course of the certificate, a brief generator called Sharpen determined my brief. After generating briefs, I have chosen:

“Design a food order customization app for a cafe”

For the term cafe, I chose milk tea cafes because milk tea > coffee.

Problem

Now that I have a brief, it was time to learn about the experiences of milk tea customers through a one-on-one interview. In that way, I would know if there was an existing problem when ordering milk teas, which includes its customization.

My target participants for the interview were the following:

• 15-39 years old
• A resident of any city in the Philippines
• Has ordered from a milk tea cafe that customizes orders

After interviewing my five target participants, I rewatched the interviews and noted their answers. Upon reviewing my notes, I highlighted the recurring responses and formulated my problem statement:

“Some people visit their favorite milk tea cafe to satisfy their sweet tooth or to destress. However, they feel pressured while ordering and customizing their milk tea because of the other customers waiting behind.”

User Persona

Anya, 22

Accountancy Student
Dumaguete City, PH

User Journey

Anya craved something sweet while studying. Hence, she traveled to the nearest milk tea cafe. Once Anya arrived to order, she felt overwhelmed by the selection of milk tea flavors and customizations, which made it take her a while to decide on an order. Moreover, she felt pressured when more customers were arriving.

Goals

• To satisfy her sweet tooth
• To excel in academics

Frustrations

• Overwhelmed by the flavors and customizations of a milk tea order
• Pressured to order fast due to arriving customers

Solution

My proposed solution to lessening the pressure from arriving customers would be a mobile application called the Milk Tea App. The application would allow users to take their time choosing a milk tea drink anytime, anywhere. Once the milk tea cafe staff has prepared their orders, the application will notify the user that they are ready for pick-up at their selected branch.

The milk tea flavors were categorized based on the common flavors my interview participants would order to lessen the feeling of overwhelmedness from the menu. Some of the most ordered flavors belonged to the Best Seller and Classic categories. In addition, a Customization page was designed with tabs for users to order more than one drink of the same flavor but with different customization options.

First Usability Test

After conducting the usability test and gathering their responses, I created an affinity diagram to help me find what part of the mobile application needs improvement.

The first component to improve on is the Order History button. 5 out of 5 participants interpreted the basket button as a way to get to the Cart page and not the Order History page. Thus, the basket icon did not best represent the Order History page.

The next item I would like to improve is the Customization page. 4 out of 5 participants raised issues about the page, such as difficulty clicking the buttons. Lastly, improving the design of the navigation bar was a must since 2 out of 5 participants expressed that the navigation bar did not look like it existed.

Aside from items needing improvement, there was feedback that helped me answer whether the proposed solution would help lessen pressure and overwhelmedness when ordering milk tea.

Did the solution lessen pressure when ordering milk tea? None of the participants exhibited or mentioned feeling pressured when ordering milk tea using the mobile application. Moreover, a participant commented that people would have to stand to wait for their orders at milk tea stalls. However, if there was an app like the Milk Tea App, people could track if their milk tea was ready.

Did the solution lessen overwhelmedness when ordering milk tea? There was no feedback of any difficulty when scrolling through the menu. One of the participants mentioned as I translated it into English:

"I like that the best seller is located on the top. Definitely, that's a need, especially for new customers who do not know what to order."

As for the Customization page, I never asked my participants whether its design was better than the Customization page commonly seen in food delivery applications. However, a participant has stated:

"The tab's an interesting concept. I just feel like maybe it needs some more intuitiveness."

Improved Design

Here are the changes made based on the previous usability test utilizing Google’s Material Design system.

Order History Button and Navigation Bar

I changed the Order History icon from a basket to a clock, turning counterclockwise. As for the navigation bar, there are dividers to make it look less like static text and more like a functional element.

Customization Page

The Customization page was improved by increasing touchpoint size, improving visual guides on the tab area, adding a prompt when removing a custom order, adding an option to write additional information, and utilizing radio buttons.

Also, I would like to discuss the user interface’s color quickly. I chose the colors brown and beige to resemble the color of a regular milk tea.

Second Usability Test

To summarize the results from the second usability test, I have resolved the issues covered in the first usability test. However, minor suggestions were raised, particularly for the Order Tracker page.

An example was to lighten the text more for the completed tasks. I believe the participant raised this suggestion to better distinguish the completed and current tasks. However, I retained the color of the completed tasks’ text for better accessibility. Instead, I changed the color and font weight of the current task for better distinguishability.

The latest prototype of the Milk Tea App is accessible here.

Learnings

To wrap up the case study, I would like to enumerate what I have learned from conducting the case study:

• Based on the user feedback, the mobile application may help lessen pressure and overwhelmedness when ordering milk tea. Although, it needs more tweaking and testing to ensure it is so.
• Always check the tech tools needed to conduct the interviews. I experienced an application update before I could use it. 😅
• Learning a new design system was fun as I got to customize it to fit the brand of the application that I was working on. Plus, it was faster to design wireframes with it!

2023 Update!

Hello, it’s me, 2023 Abby! I took some time to improve the UI of the Milk Tea App. The picture above shows the outcome. I may need to explain my design decisions soon.