COFFEEMAZE Coffeehouse App
Duration: 12 Weeks-
CoffeeMaze is an international coffee store chain with locations in Brussels, Amsterdam, Berlin, Paris, London, and more. It aims to serve quality coffee with local flair. The CoffeeMaze app allows users to easily order and pick up their coffee, or reserve their spot at their favorite cafe.
-
As a UX designer, I had to design an app for CoffeeHouse from conception to delivery.
This included conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
-
First personal portfolio project for the Google UX Design Professional Certificate on Coursera.
Icons by Icon8
The Goal
Busy workers and commuters lack time to wait in long queues to order and pay for their coffee.
The Problem
Design an app for CoffeeMaze that allows users to easily order and pick up their coffee, or reserve their spot at their favorite cafe.
Hot beverages or cold drinks,
one-tap-away!
The CoffeeMaze app allows users to easily order and pick up their coffee, or reserve their spot at their favorite cafe.
User Research: Summary
I conducted interviews and prepared questionnaires as well as empathy maps to understand the users I am designing for and their needs. The primary user groups identified through research were:
Users who like to order in groups or place mass orders so they can avoid queueing in stores
Users who tend to find and reserve their favorite spots in the nearest store so they would save time.
These user groups confirmed initial assumptions about CoffeeMaze customers, but research also revealed that time was not the only factor limiting users from ordering at stores. Other user problems included difficulties to make lists for mass orders (group orders), and also concerns about losing the spot when the user wants to order at the counter.
TIME
Users need to wait too long in the queue in stores to order or pick up their coffee.
COLLABORATION
Users have to make lists every time they want to place group orders and need to assign one person as the one who places and follows up on the order.
VISUAL DESIGN
Plain and text-heavy menus without proper visuals in apps are often difficult to read and order from
Persona: Ali
Ali is a young freelancer who needs an app for his favorite coffee store to reserve his spot and preorder his coffee when he works remotely because he doesn’t want to wait too long to find a free table.
Persona: Anika
Anika is a recently graduated intern who needs a tool to order coffee every day in large numbers for herself and her team because she doesn’t want to stay in line and be late for work.
Wireframes
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy ordering process to help users save time.
Low-Fidelity Prototype
The low-fidelity prototype connected the primary user flow of ordering or reserving a spot, so the prototype could be used in a usability study with users.
Usability Study: Findings
ROUND 1
Users want to order quickly
Users want more customization and options
Users want more comprehensive store’s layouts so they can easily pick spots
Early designs allowed for quick order by providing a designated FAB, but after the usability studies, I found out that the home page looks complex to some users who can not decide whether use the button or the navigation tabs. So I redesigned the navigation bar and made it simpler by keeping it fluid and interactive on all pages, and also put the profile page accessible on top of the homepage.
ROUND 2
The “Group Order” function needs more options and sharing abilities
The home screen might show the order progress
The usability studies also revealed frustration with order and group order functionalities. I added a designated Group Order button on top next to the search bar, so users can easily consider using it to place orders together by using shareable links and other options. Also, a store locator function was added so users can select their favorite stores to see the secret menus and specific items in the menu.
Mockups
The final mockups and high-fidelity prototype presented cleaner user flows for ordering coffee, including a feature for group ordering through the app. It also provides options to reserve a spot at the nearest store.
Takeaways
Impact
The app makes users feel like CoffeeMaze really thinks about how to meet their needs and helps them grab their favorite coffee easily.
Notes
While designing the CoffeeMaze app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and feedback from selected users influenced each iteration of the app’s designs.
Next Steps
