coffeebar
The Coffeebar mobile app improves the coffee pickup experience by helping customers order quickly, customize drinks easily, and accurately plan their pickup time. The app prioritizes efficiency and transparency so users can spend less time ordering and more time moving through their day.
Project Overview
My role: Visual Designer, UX/UI Designer
Date: 2023 (4 months)
Scope: Mobile app
THE PROBLEM
Coffeebar, a Northern California coffee chain, lacks a dedicated mobile ordering experience. Customers must either order in person or navigate a cumbersome third-party ordering system.
This creates friction for loyal customers who value speed and convenience. Without a streamlined ordering process or accurate pickup timing, customers often spend more time ordering than expected and risk delays due to unpredictable wait times.
THE GOAL
Design a mobile ordering experience that matches the quality of Coffeebar’s products. The app should streamline ordering while introducing features that improve transparency, customization, and pickup timing.
USER RESEARCH
I conducted user interviews with participants aged 20–45 who regularly purchase coffee from Coffeebar locations. The research focused on understanding ordering habits, frustrations with existing systems, and expectations for mobile ordering.
From these insights, I developed user personas, journey maps, and a competitive analysis of existing coffee ordering apps.
The research revealed a strong association between coffee ordering and productivity. Users want to minimize ordering friction and better predict pickup timing so they can move efficiently through their day.
PAIN POINTS
Third-party Ordering System
The third-party system feels cumbersome and disconnected to users, leading to a lack of motivation to use it and a tendency to default to in-person ordering instead.
Manually Repeating Orders
Current systems do not track past orders, forcing consumers to manually repeat their orders and specify customization each time.
Assessing Travel Time
Consumers lack guidance on how long orders will take and when they need to leave to meet their pickup time.
In-Store vs. Online Discrepancies
New offers and deals are only advertised in-store, creating a disconnect between in-store promotions and online information.
USER FLOW
DIGITAL WIREFRAMES
Digital wireframes are intended to outline a streamlined approach to coffee ordering, providing users with options to seamlessly modify pickup preferences and view estimated time ranges for order pickups. Building on paper wireframes, I integrated the estimated time of arrival with the store pickup location feature to create a more cohesive and user-friendly experience. Users can access this information directly from the homepage and throughout the user flow, enabling full customization and transparency at every step.
LOW FIDELITY PROTOTYPE
The low-fidelity prototype models the primary user flow of building and submitting an in-app order with pickup customization.
USABILITY STUDY #1
Study type: Moderated usability study
Location: United States, remote (users go through the usability study in their own homes)
Participants: 5 participants
Length: 30 minutes
I asked participants to place an order within the app, noting their thoughts, feelings, and opinions on their experience, and rating their ability to complete the task and the ease with which they were able to do so. I sorted my notes into groups using an affinity map, allowing me to establish a foundation for insights.
A simpler starting point…
The usability study revealed a sense of overwhelm on the homepage. There was some confusion regarding menu items residing on the homepage and where users should begin the ordering process. I made some changes to the icon naming, changing “menu” to “order” and also removed the “Browse Items” section, replacing it with Rewards, which users consistently conveyed was a valuable mobile ordering feature. This feature was initially tucked into the profile page until I made it a core feature of the app. Lastly, I made the pickup info a main button with full info so that users could change their pickup details in tandem rather than changing them independently, simplifying the pickup details process.
BEFORE USABILITY STUDY #1
AFTER USABILITY STUDY #1
Streamlined customization
I initially had users change the store from the homepage and the time only when they were selecting an item. This led to some confusion duing the usability test, so I created a screen that allows for the editing of pickup location and time across all pages, while providing geographic pickup infromation and the transportation times for different modes.
BEFORE USABILITY STUDY #1
AFTER USABILITY STUDY #1
