Milk Tea App

My First Ever Case Study

After completing my internship, I realized that I do enjoy the field of UI/UX. 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 said certificate, my brief was determined through a brief generator called Sharpen. After generating briefs, I have chosen:

“Design a food order customization app for a cafe”

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

Problem

Now that I have a brief, it was time for me to learn about the experiences of milk tea customers through a one-on-one interview. In that way, I would know for sure 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 5 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 she had arrived to order, she felt overwhelmed by the selection of milk tea flavors and customizations, which made her take 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 their orders are ready, the application will notify the user that their order is ready for pick-up at their selected branch.

To lessen the feeling of overwhelmedness from the menu, the milk tea flavors were categorized based on the common milk tea flavors my interview participants would order. 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 1 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 improvement that needs to be done was 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 from the basket button was not the best icon to represent the Order History page.

The next item I would like to improve on would be the Customization page. 4 out of 5 participants raised concerning issues about the said 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 exists.

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

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

For lessening overwhelmedness, 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 were the changes made based on the previous usability test utilizing Google’s Material Design system.

Order History Button and Navigation Bar

From a basket icon, the Order History icon has been changed to a clock turning counter-clockwise. As for the navigation bar, now 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 quickly discuss the user interface’s color. The color was chosen to resemble the color of a regular milk tea.

Second Usability Test

To summarize the results from the second usability test, I can say that the issues covered in the first usability test have been resolved. Although, there were minor suggestions raised, particularly for the Order Tracker page.

An example was to lighten the text more for the completed tasks. I believe that this suggestion was raised to better distinguish the completed and current tasks. However, I retained the color of the text of the former 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, I believe that the mobile application may help in lessening pressure and overwhelmedness when ordering milk tea. Although, I think it needs more tweaking and testing to ensure it is so.
• Always check the tech tools needed to conduct the interviews. I have experienced an application updating 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 further about my design decisions soon.