UX Case Study: Meetcha Bubble Tea Cafe App
Google UX Design Certificate Project
About the Project
For my first project for the Google UX Design Certificate, I was tasked to create a food delivery or mobile ordering app for a restaurant. As a self-proclaimed foodie and previously a barista, I was inspired to design this project with my past experiences in mind.
This case study showcases my process in creating a mobile ordering app from concept to final design for Meetcha Bubble Tea Cafe.
The Problem
In today's fast-paced society, some individuals cannot afford to wait long lines for their cafe orders. When rush hour hits or a sudden surge of customers come in, wait times can exponentially increase, which can make customers that are on a time crunch nervous. Additionally, when I was working as a barista, I would often notice that customers would forget their loyalty card and not be able to redeem their free drink.
The Goal
The goal of this case study is to design a mobile app that allows users to easily order for pickup, check the menu, and redeem their points in a loyalty card.
My RoleSince this is a project I created, I am responsible for the full design process of the website and app from conception to delivery
Timeline
October 2022 to December 2022
My Design Process
I chose to use the UX design framework to guide this project. This process includes five stages, which are empathize, define, ideate, prototype, and testing. By following this process, I can create a solution in an efficient and methodological manner
User Research
To get started, I conducted interviews and researched online to understand the target users and their needs. A primary user group identified through research was that busy customers that come in to pick-up orders sometimes do not have time to wait in lines when business gets busy. While the main target user for bubble tea shops are kids and teens, users of all ages enjoy the popular drinks
The user group confirmed initial assumptions about Meetcha customers, but research also revealed that time was not the only factor limiting users. Other user problems included having too much text on the menu, and also having little to no pictures on the menu. Not being able to clearly read what Meetcha has to offer, as well as not being able to see what the drink looks like, makes it difficult for customers to fully enjoy their experience.
Before jumping into the process of creating a solution, I checkout out some existing bubble tea apps and interacted with them. I also read their customer reviews to help me identify some drawbacks of the existing medication reminder apps and what can be improved on.
Click here to view the competitive analysis
Pain Points
Three major pain points were identified from the research phase:
User Personas
Based on the information obtained from user research, I created two personas whose demographics and goals represent the vast majority of the target user.
Here's Ben and Sara:
User Journey Map
Mapping out Ben's user journey in ordering from a mobile app helps us pinpoint where improvements can be made for better user experience
Since we have found out some problems that users are facing, we can move onto the next phase. I created a goal statement to ensure that the mobile app will solve the current problems listed.
Paper Wireframes
I sketched out a few paper wireframes for each screen, keeping the user pain points about navigation, browsing, and checkout flow in mind
Starting on Digital Wireframes
After creating the paper wireframes, I created a digital version of the wireframes in Figma and proceeded to test it with users.
Usability Study (Round 1)
I recruited 5 participants to test the low-fidelity prototype to get an insight into the app's usability. By watching and reading what the participants wrote about their thoughts on the app, I was able to identify a couple of problems with the initial design. I used an affinity diagram to organize results and identify key patterns. The results of the usability study are noted down below:
Click here to view the detailed usability study spreadsheet
Changes I Made Based on the Usability Study
With the initial issues pointed out from the previous usability study fixed, I proceeded to create mockups and a high fidelity prototype of the design. Since I was designing for an already-existing cafe, I used their signature colors from the logo, which are green and orange, and decided to add in a "milk tea brown" to create the mobile app's color palette.
Low Fidelity Wireframes
Based on the insights from the usability study, I made a few changes to the digital wireframes below.
Feel free to view the low-fidelity prototype here
Adding Color and Refining the Design
With the initial issues pointed out from the previous usability study fixed, I proceeded to create mockups and a high fidelity prototype of the design. Since I was designing for an already-existing cafe, I used their signature colors from the logo, which are green and orange, and decided to add in a "milk tea brown" to create the mobile app's color palette.
Usability Study (Round 2)
Another round of usability testing was conducted using the high fidelity prototype. After viewing how the participants interacted with the app, I was able to pinpoint a couple of places that needed to be further refined. The results of the usability test are noted below.
Click here to view the detailed 2nd usability study spreadsheet
Changes I made Based on the Findings
Final Designs
Feel free to interact with the high fidelity prototype here
Style Guide
Accessibility Considerations
When designing the mobile app, I wanted to create a design all users, regardless of ability or disability, can interact with ease.
1. I used icons throughout the app the make navigation easier for users
2. I used detailed imagery for drinks to help all users understand what their order may look like
3. I used high contrasting colors so users can easily differentiate between elements
Takeaways
Being the first project I have ever done, I have learned the importance of usability studies and user research when designing a mobile app. Additionally, learning to navigate through Figma with trial and error to create wireframes, components, and icons was a fun experience.
Next Steps
The next step would be to conduct another round of usability studies with a more diverse group of participants from other cities. Having an even bigger group of participants and their experiences can showcase whether the current solution effectively addresses user's pain points.
Project Reviews
Users who tested the Meetcha Bubble Tea App felt that this would be a helpful addition in real life, and that having this app shows that Meetcha really cares about their customer base.
One quote from peer feedback:
“This app makes it so much easier for me to order a drink to pickup! I would use this app as my main option to order.”
Thank You for reaching the end of the case study!
