CoffeeHouse App
Case Study · UX Design · Visual Design
CoffeeHouse is a coffee order app that helps users order in advance for pick up, reserve study pod tables at their local coffee shop, and subscribe to a monthly order of ground beans for home made coffees.
Project Overview
The Product
CoffeeHouse is an order app for CoffeeHouse shops in the West Coast, aiming to facilitate drink orders and study pod reservations in a quick and convenient way. CoffeeHouse targets customers such as working professionals and students who need a quick drink or quiet space to get their day moving and productive.
Product Duration
October 2021-February 2022
The Problem
Working professionals and students do not have the ability to order drinks prior to pick up, reserve tables at coffee shops, or subscribe to a monthly order of ground beans for home made coffees.
The Goal
Create a new app to help users be more efficient with their time when ordering and receiving coffee, reserving tables at the coffee shop, and placing monthly orders of coffee beans that will be delivered to their home from all CoffeeHouse locations.
My Role
UX/UI designer designing for an app for CoffeeHouse from conception to delivery.
Responsibilities
Conducting interviews, paper and digital wire-framing, low and high fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
- Understanding the User
User Research: Pain Points
This user group confirmed initial assumptions about CoffeeHouse customers, but research also revealed that an effective working environment was not the only factor limiting users from their time at a coffee shop. Other problems included obligations, interests, or challenges that make it difficult for ordering coffee. Some of these include lack of easy pick up, menu accessibility for all ages, monthly subscriptions for coffee grounds, and more.
Persona
Katherine Wilkins is a busy freelance editor who needs time efficiency at the CoffeeHouse when ordering and finding a table because she needs to enhance her productivity time to get her work done.
Empathy Map
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was young professionals who lack the space of an effective working environment.
User Flow
Task: Add a drink to your order, check out, and go to tracking steps.
2. Starting the Design
Paper Wireframes
Drafting 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.
Digital Wireframes
As the initial design phase continued, I made sure to base my screen designs in feedback and findings from the user research.
Low-Fidelity Prototype
Using the completed set of wireframes, I created a low-fidelity prototype. The primary user flow I connected involves making group order and scheduling, so the prototype could be used in a usability study.
Usability Study: Findings
I conducted three rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
3. Refining the Design
Mockups
Early designs had confusing verbiage, no clarity of order process, and combined tasks on a single screen which makes it harder for some users to follow. In my mock up, the checkout process is diagramed with labels, tasks are organized on each screen, and buttons have more clear wording. Some major changes were made in key mockups below.
High-fidelity Prototype
The final high-fidelity prototype presented cleaner user flows for customized group ordering and check out. It also meets user needs for scheduling delivery time, reserving study pod tables, and subscribing to a monthly order of coffee grounds.
