JOE: mobile coffee ordering

How can the local coffee scene be included in the current trend of on-demand services?

Supporting independent coffee shops is important to discerning coffee drinkers, but finding a great shop they can count on to keep them moving through their mornings can be tough. Between long lines, inconsistent ordering systems, and hard to find shops, it’s hard to turn the average joe into a loyal customer — especially when that other mega coffeeshop has such a killer rewards system and a shop on every corner.

SETTING
General Assembly, User Experience Design Immersive
2.5 week sprint

ROLE
UX strategy and vision as part of a 4-person UX design team

Joe Coffee is a mobile application that enables users to pre-order and pay for coffee from local coffee shops. The application is currently in Beta testing and has a small number of users. 
We were given the directive to apply the UX process to the app as it currently stands, and provide design recommendations based on our findings. 

Ready to order coffee? Try our interactive prototype:

note: This prototype was built to showcase one flow through the app, consistent with the user flow and scenario. Affordances are highlighted in blue to indicate the live links, click to navigate through the prototype. 

Heuristic evaluation of existing app

The Joe team has received some user feedback about the Beta version of the app, shown below. 

As part of the research phase for this project we performed our own heuristic evaluation, and watched a first-time user go through the process of ordering coffee.

SURVEYS AND INTERVIEWS

To learn more about our users, we sent out 2 surveys: one to local coffee drinkers (54 responses) and one to existing Joe app users (9 responses). We then followed up with interviews and on-site observations during the morning rush at local Seattle coffee shops. 

Key takeaways from surveys and interviews: 

• Want convenient location

• Value good coffee

• Deterred by long lines and order indecision of others
• Usually order the same drink every day. 

ON SITE OBSERVATION

From 4 Independent coffee shops during the morning rush

Key takeaways

• 63% were regulars

• 90% order the same drink every day

• Average of 2 baristas working

• Baristas use the names of regulars

• Baristas go above and beyond by preparing the drink when they see regulars in line or outside

COMPETITIVE AND COMPARATIVE ANALYSIS

We looked at several other mobile ordering applications to identify industry standards and find common trends around flows and ordering features. The most important features, based on our user research, are highlighted in yellow. in the summary chart below: 

We looked at the graphic language and standards of existing mobile ordering apps to understand the context of what we wanted to design.

UX VISION

Enable on-the-go coffee drinkers to support the independent coffee culture they love in a way that works with their busy lifestyle — long lines not included. Joe knows where to go, how long it will take, what you’re drinking, and rewards loyalty, all without sacrificing quality for convenience.

THE COFFEE DRINKER AND THE BARISTA

The graphic below illustrates the dropoff from downloads to actual users, and some features that would help round out the full 'cup of joe' on both the user side and the barista side. 

The problem of ordering coffee is two-sided. There are usability needs on the customer facing side, but an equal part of the problem is the usability on the barista side. The baristas are currently receiving orders on a device separate from their main ordering system, and they have little incentive to integrate the online orders into a busy queue of customers standing (in person) in front of them.

We were tasked with addressing the customer facing application, but we want to recognize that addressing just one part of the coffee process will not address the whole problem. 

persona

Our persona, Sarah, was developed from the data we obtained in our user surveys and interviews. 

Storyboard

The storyboard communicates how the Joe app fits into Sarah's daily routine, and meets her coffee ordering needs in the context scenario of her morning commute.

Flow Diagrams

The user flow for the task of ordering coffee did not fundamentally change, but our usability testing highlighted several falloff points that led to users not completing the task. 

Falloff points are addressed by elaborating on the original flow to alleviate pain points and confusion around the questions that resulted in an incomplete task.

We focused our design efforts on several parts of the flow: the home screen, the ordering process, and the payment, confirmation, and feedback process. 

Sketching and iterating: HOME SCREEN

We evolved the home screen to address a couple of key pain points around orientation and navigation between the app and the real world. 

As we iterated we user-tested to inform the design development. 

Our final wireframes were brought to a medium fidelity, and go through the flow of finding a coffee shop, ordering a drink, earning rewards, and giving feedback. 

Ready to try it for yourself? 

note: This prototype was built to showcase one flow through the app, consistent with the user flow and scenario. Affordances are highlighted in blue to indicate the live links, click to navigate through the prototype.