CoffeeHouse App
case study
CoffeeHouse is an Australian coffee store chain with locations in Sydney, Melbourne, Brisbane, and more. It aims to serve quality coffee with local flair. Their drinks range from $3 - $8. The shops are minimalist, clean-lined, and feature a variety of freshly brewed house blends from the world’s major coffee regions. They offer both ready-to-drink and whole or ground beans by the pound.
Project Background
We’re creating a CoffeeHouse app to help people place and pick up multiple orders in a quick way by saving people's drinking habits, so they can skip in-store lines and the payment process is streamlined. Also, it is aimed at helping some people reserve in-store tables without hassle.
Project duration
October 2021 – February 2022
Objectives and Goal
Figure out if the collaborative ordering and reserving function in the app actually save people's drinking habit when placing a quick coffee order and reserving in-store seats.
My role and responsibility
UX designer designing an app for Coffeehouse
from conception to delivery.
Conducting interviews, paper, and digital wireframing, low, mid and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
User-center Design process
User research: summary
I conducted interviews and created empathy maps to understand the users I’m designing for. A primary user group identified through research was office workers who don’t have time to wait in a long queue while ordering coffee during peak time or who usually work at cafés. This user group confirmed initial assumptions about CoffeeHouse customers, but research also revealed that waiting time was not the only factor limiting users from ordering coffee at
CoffeeHouse. Other user problems included store locations, money, or store seat availabilities that make it
difficult to place orders during peak hours in person.
User research: Pain points
time
Working adults are too busy to spend time on waiting in a long queue for a coffee order during peak time
mixed orders
Orders get mixed with other people’s during peak time
limited in-store seats
Café lovers are hard to find in-store seats during peak time
Persona and problem statement
Leo is a CFO who works at a ASX-listed company and wants to order coffee online with spending a minimum time because he is extremely busy and has no time to wait for a long queue three times a day at a café.
Sarah Milson is a freelancing designer who needs to find a good atmosphere workspace at café and order coffee freely without losing the reserved seats because She had to repack her belongings and line the queue at the cashier every time when she wants to reorder
coffee/food in the middle of her work.
paper wireframe
It took time to draft iterations of each screen of the app on paper to ensure that the elements that made it to digital wireframes would be well-suited to address user pain points. For the homepage, I prioritized a quick and easy ordering process to help users save time.
paper prototype
Ordering Process
Using the completed set of paper wireframes, I created a low-fidelity prototype. The primary user flow I connected was ordering coffee and reserving a table, so the prototype could be used in a usability study.
Reserving a Table Process
Digital Mid-Fi wireframe and Prototype
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Easy access to previous saved coffee style and go to payment quickly
This button provides an
easy option for users to
navigate each category.
The top search button makes it fast and easy for users to search location.
The location marks enable users to find cafés on a physical map.
Usability Study
I conducted two rounds of usability studies. Findings from the first study of the low-fi prototype helped guide the designs from wireframes to mockups. The second study used a mid-fidelity prototype and revealed what aspects of the mockups needed refining.
Round 1 findings
-
Users want to order coffee as quickly as possible.
-
Users don’t think the rate of each café is necessary.
Round 2 findings
-
The map location icon didn’t show the café address.
-
“Order your favorite drink” functionality is confusing.
-
Users want to go back to check the order status after payment.
-
Users want pop-up info for each cafe
hi-fi mockups and prototype
Early designs allowed for choosing size on the home screen, but after the usability studies, I hide the size function on each drink order page, which made the screen cleaner. I also revised the “choose your favorites” bar to a bigger slidable screen.
Key Mockups
Final Prototype
accessibility consideratios
Provided access to users who are visually impaired through adding alt text to images for screen readers.
Used icons to help make navigation easier.
Used detailed imagery for coffee and toppings such as chocolate powder and cream to help all users better understand the designs.
takeaways
Impact
The app makes users feel like CoffeeHouse really thinks about how to meet their needs.
​
One quote from peer feedback: “The app made it so easy and efficient to order coffee! I would definitely use this app as a go-to for a delicious and fast drink.” What
What I learned
While designing the CoffeeHouse app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.