Joe Coffee

online order ahead service application for local independent coffee shops

CONTEXT

Joe Coffee is a Seattle startup company with a mobile application that helps connect independent coffee shops to customers who want to order ahead online for pickup. Joe Coffee currently has about 75 coffee shops on its application. The Joe app exists in two forms, a customer mobile application, and a B2B merchant tablet application. Our group of three UX designers was selected by Joe Coffee to help evolve their online coffee ordering application.  

ROLE: Interaction Designer, Project Manager

During this case study, I was the interaction designer developing prototypes and collaborating with the visual designer Clare Lee. I was also the project manager, the point of contact for the client leading presentations and responsible for the schedule of activities

DURATION: Three Weeks

TEAMMATES: Clare Lee - User Research/Visual Design, Abdurahman Ashoor - Information Architecture, Content Strategy

DELIVERABLES: User Flows, Paper Prototypes, Lo-Fi Interactive Prototypes, High Fidelity Interactive Prototypes

INSIGHTS

The Joe Coffee developers were focusing efforts on the merchant application, they felt that no other competitor had created a compelling app for a barista or business owner. The team at Joe Coffee requested we focus our efforts on the merchant side of the application. They felt our UX team should solve these key scenarios:

• A barista receives a mobile order of coffee but needs to add time to the order so that it can be prepared correctly.

• A barista receives a mobile order but needs to tell the customer that an item requested is out of stock.

• A barista notices a rush of incoming customers and needs to notify online customers of a significant delay in completing their orders.

SOLUTION

The design solutions focused on efficiency. I prioritized the different features and functionality for minimized steps of interaction, with a clear information structure that baristas can understand at a glance. Simple function, with minimized tap action, would allow baristas to inform prep time for individual cases. Orders could be displayed when it’s timing is appropriate for the business, so it does not disrupt their current flow.

RESULTS

“The UX design team worked directly with our organization and driven by their own initiative, exceeded our expectations from day one. In three weeks, the team successfully developed high-fidelity prototypes, interactive designs, and purpose-driven solutions. Their prototype tested so successfully with our launch clients that we are confident we will be able to integrate their design into our interface in our next releases.”

- Nathan Mass, Co-Founder Joe Coffee

PROCESS

Competitive Analysis (Clare Lee)

We conducted a comparative analysis of the services Joe Coffee’s primary and secondary competitors provide. We found out that many services are integrated within the merchant’s order system through POS integration or print receipts (like Starbucks).

We also found out many secondary competitors try to serve as a marketing/business analytics tools by providing dashboard and API services. Based on our research, we believe our revised application should offer the functionalities many of its competitors fail to deliver.

User Interviews (Clare Lee)

Local cafes take pride in consistent quality, and quick, accurate flow for creating drinks. To maintain such flow, efficient communication between the baristas and the register is crucial so baristas can mentally organize the orders. Most cafes found in-person interaction very important and wanted to ensure they had a method to communicate with customers when an item might be out of stock or when an order is running late. Most cafes find large quantity orders problematic because of preparation time.

Problem / Hypothesis

“As a barista, I need a way to effectively communicate with my mobile order customers about what’s in stock and how long it will take without disrupting in-store customers. I want to provide a consistent premium experience for all my customers.”

We believe that by creating an optimized merchant tablet application, we will improve communication between a barista and a mobile customer.

This will be true when a barista consistently remains online with a significant increase in the coffee shop’s online sales.

Design Studio / Brainstorming

Based on the user interviews we conducted it became clear that there were three types of orders: incoming, accepted, and completed. The challenge was how to display and prioritize them. The two most urgent were ‘accepted’ and ‘incoming orders’. We brainstormed an idea for a layout that would display these types of orders on the same screen. I began with a vertically bisected layout with a fixed upper navigation bar.

Low Fidelity Iterations: Active Page

The brainstorming sessions influenced us to think about the merchant app with two significant states an incoming ‘active’ screen and a passive ‘review’ screen. These paper sketches were a very time efficient way to iterate before creating a clickable prototype. I eventually moved away from a 50/50 split to a 60/40 favoring accepted ordered in the prototype to come due the of information and the amount of interaction.

Low Fidelity Iterations: Review Page

The review screen is designed for a manager or café owner. The challenge was to display completed, canceled, and rejected orders on one page. While that was accomplished, it turned out managers wanted to be able to search by calendar date. They also wanted to see tip revenue by shift so funds could be wired to the baristas who had worked the shift.

Joe Merchant Prototype Iteration 1.5

Joe Merchant Prototype Iterations 1.7

Version 1.7 responded to user feedback. Rush hour would be better managed with a 3D Touch ‘x2’ feature which would add 10 min to all accepted orders. Users suggested that the merchant app could benefit from integrating customer photos, enabling new baristas to identify repeat customers. Grouping the time elements together allowed users to check the ETA and react in a clustered area. One manager suggested eliminating the ‘x CANCEL’ — the idea being that once a barista who accepts an should have to complete it, i.e., no options for “lazy baristas” to cancel an order.

Joe Merchant Prototype 2.1 + Visual Design (Clare Lee)

The usability test script for this version was: “Begin by reviewing the daily shift revenue, then select the active screen to see an incoming order. Once there confirm all of the first order from Nathan. On the second order, you can accept the Espresso and Chocolate Croissant but decline the mocha because you're low on milk. Select all of the next two incoming orders. You think you might be getting rushed, try selecting the button to test out how it works….then unselect it. You need to add two minutes to Barry’s order, make the selection. Barry has arrived, and you’ve completed his order, inform him it’s ready. Select the ‘Review’ screen to begin again.”

Next Steps

Review Page & Targeted Promotions

Refinement of different sections of the review page, visualizing what the daily customer feedback page should look like. Include a promotion page that allows a review of past promotions but also the creation of new promotions that target the specific type of customers (ex. declined orders or low ratings)

Revise the Customer Application

The team worked exclusively on the merchant side application. A logical next step would be to integrate the additional features into the customer side application, by including the following features:

- Arrival messaging to the merchant

- Notifications of item availability

- Revision of the interface interaction

- Pre-order recurring scheduled drinks

- Elevate the Joe Coffee brand to consumers