CoffeeHouse

Your Joy, Our Pleasure 

Overview

The CoffeeHouse is a chain of coffee shops with several locations in the United States and around the world dedicated to providing high-quality coffee and exceptional customer service. Our target customers are workers and college students on a tight schedule or looking for a place where they can work and study.

Problem

Customers had a stressful experience with CoffeeHouse because they have to wait in long queues and couldn't order in advance. Similarly, dine-in customers can't leave their seats to go to the counter for another purchase, since they would lose their place when they stood up. Therefore, their experience with Coffeehouse is less enjoyable and convenient.

Add to these issues, the real problem was the cafe was unprepared and people don’t want to line up so I realized that an ordering app (like Starbucks) was more efficient. Thus, I have to make this right for our customers. And this is how the CoffeeHouse app was launched.

Solution 

Design the app to help customers place orders in advance or scan the QR code from their seats to place the order without leaving. 

   Client

• CoffeeHouse 

   Tools

    My Role

• UX designer
• UI designer
• UX researcher

     Timeline

• Jun. 2022 - Sep. 2022

Design Process

Empathize 

Research Goals & Survey Questions 

With the current situation in mind, I began with a short research to understand what the are the goals that could help CoffeeHouse achieve its mission of helping customers get their orders faster without any hassle. Here are the goals: 

• I want to understand the processes and emotions that people experience when there is no app to order in advance or lose their seats while they stand up to make another purchase.
  
• I want to identify frustrations people experience during the process of ordering from a coffee brand app.
• I want to understand common challenges people face trying to manage a busy schedule and ordering takeout

With the questions, I want to keep them simple and open-ended.

• Can you describe your current schedule and how you balance your responsibilities with meal planning?
• How often do you order meals or drinks from an app? When you do, what is your motivation for doing so? 
• What challenges do you face in the ordering process? How does this make you feel?
• Is there any way in which you feel these challenges could be resolved?

Then with the user interviews, I chose 5 participants aged 18-35 who live in metropolitan or suburban areas and order meals from an app at least once a week. This included 2 males and 3 females. The common answers are: 

• 5/5 Participants prefer to have pictures on the menu when they order. This helps them to have a clear idea and be able to finalize their choices 
• 4/5 Participants prefer to have the advance order option to minimalize their time spend in the lines 
• 5/5 Participants want to have the modification option of their order at any time. 
• 5/5 Participants want to have a customization feature (similar to Starbucks).    

Personas 

Based on the interview, I was able to find out the common pain points that users have. These are missing advance order feature, customization and modification options and pictures of the items on the menu. Here are the two personas to demonstrate my target users. 

Define 

In this part, I developed a problem statement based on the interviews and personas to address precise user needs. In order to continue, I used the 5 Ws and H framework to create problem statements. Using this method, I can identify Joshua and Elisha's constraints, how they affect them, and possible solutions. 

Ideate 

Competitive Audit & Competitive Report 

To get the big picture of who are my competitors and what they do, I conducted a competitive audit and report to overview my competitors’ strengths and weaknesses. This audit and report help me see how my competitors present themselves in the market, their UX design for the app and website, and what opportunities I could target for CoffeeHouse. 

User Flow 

To step inside Joshua and Elisha's shoes, I decided to create a user flow chart to give me a better idea of how they would use the app from start to finish. This also depicts a clear picture of different decisions that will be made throughout the process back and forth and possible paths that could lead to the finish line. 

Storyboard  

Prototyping 

Digital Wireframe 

Low-Fidelity Wireframe

Usability Testing 

For the usability testing, I assigned the tasks to participants and have them complete the tasks on their own. The task was operated in an unmoderated, remote environment. Each session will last 45 minutes and included an introduction, a list of tasks, and a short questionnaire. The goal of this test is to figure out if users can complete the core tasks within the app and how long it takes to complete them. 

• Key Performance Indicators (KPIs): 
  • Time on tasks: How long it takes users to complete a task?
  • User error rates: How often do users make mistakes? 
  • Conversion rates: The number of users who reach their goal successfully
• Method: Unmoderated usability study, Remote
• Target: Participants who drink coffee more than once a week. This includes full and part-time workers and students
  • Two males, two females, and one nonbinary individual between the ages of 18-45.
  • 1 user with assistive technologies (screen reader, keyboard)
• Incentive: $15 CoffeeHouse gift card to redeem in-store or online

Overall, the majority of participants can complete the tasks but with difficulty. Not really a positive sign but it's something I can make improvements on for the app. 

Affinity Diagram & Insights 

From the usability testing, I'm organizing data and observations into clusters and then found the pattern. Then I formed groups with common themes and categorized them to create an affinity diagram. This helped me to think outside of the box and allowed me to make connections within my data that I may not have noticed by simply reading through my notes. 

After analyzing my affinity diagram, I was able to form some insights that could help me see what did I do well and where can you improve. Here are some of the insights that I need to adjust on the app: 

• For most users, the checkout process has more than necessary steps, an insight is: Users want to have a short and simple click-n-go checkout process. 
• For most users, the customization feature is not applicable when they can't see their confirmed order, an insight is: Users want to have the confirmation page of their customization order.
• For all users, the QR scan feature is confusing to them an insight is: Users want to have guidance or instruction on how to use the scan function and the purpose of the QR scan is clearly defined.

Recommendations 

• Have a confirmation page. According to the government of Yukon, “Confirmation pages reassure users that they have completed a transaction and help them understand what to expect next.” So the conversation is not over till it's over.
• Have a one-page checkout only. Users want to have the fastest checkout process so consolidating payment and other checkout features into one page will help users save time and lessen the confusion. 
• Include a short guide/instruction on how to use the QR scan. Users expect that if the feature is there in the app, there must be a purpose for it. Having a clearly defined feature will clarify the confusion of users.

Revision 

• To reduce confusion in the checkout process, I consolidated the payment and delivery methods into one page and revised the design so users see both the total and the payment options.

• With the confirmation page, users stated that it was difficult for them to make sure their drinks are customized correctly and the confirmation page is hard to read. To fix this, I simplified the order for a cleaner look and took out unnecessary elements such as the picture.

• For the QR code, users want to have clear guidance on how to use this code to place an order. I added in a couple of steps to help users understand how to scan the code. 

High-Fidelity Mockup

• Mobile App Prototype 

• Website Prototype 

UI Design

For Coffeehouse's branding, I want to focus on 3 main elements: playful, simple, and unique. A little touch of the star on the logo will give a kick to the logo to enhance its minimalist look but not boring. The color palette is giving off the warm energy of coffee but also has a hint of energetic red to give it a playful hint and also a twist of uniqueness (the menu...for example). 

Takeaway 

Challenges

During the process, I noticed that usability studies and peer feedback influenced each iteration of the app’s designs. Though mistakes were made quite often, these are memorable experiences that I could learn from and iterate better on my future designs.

Conclusion

Now with the CoffeeHouse ordering app, customers can run the errand while their coffee is prepared or a staff member will deliver it to their table when it is ready. Additionally, the web and mobile web of CoffeeHouse made it easier for customers to learn more about CoffeeHouse, view the menu, and find out about upcoming events.

Next Step & Takeaway

I have so much fun creating and presenting this project to my fellow Coursera colleagues. Next step if possible would be to conduct more user research to determine any new areas of need. Iterate if necessary, finalize the product and send it to the engineering team.

Thank you for reading my case study!