Client Project - Joe Coffee

Joe Coffee App Redesign

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.

Clickable Prototype

ROLES

I served as Client Liaison and Lead Designer throughout the project, coordinating communications, requesting and sharing deliverables, and scheduling meetings with the Joe App owners. I managed wireframes from my team, and streamlined elements. I was also responsible for the following tasks:

App audit
Comparative analysis brief
User research material development (Lead)
Sketching concept screens
Wireframes (Lead)

Design development and implementation (Lead)
Storyboard (Lead)
Creating prototypes in Pop & InVision (Lead)
Usability testing
Presenting to stakeholders

TOOLS USED

Sketch
InVision
Craft
Pop/Marvel
Drawing implements
Whiteboard
Copious Post-It notes
iPhones
So much coffee

THE CHALLENGE

Joe is an app that allows coffee drinkers to find independent coffee shops based on location, customize their drink, and order coffee through the app, paying in advance and skipping the line for convenience. It is currently available for iPhone and Android, and baristas use a corresponding iPad app to see orders, though order alerts come through on their phones.

During our first stakeholder interview, Joe Coffee App Co-Founder Brenden Martin named business goals, including increasing downloads, increasing daily usage, and growing the volume of independent coffee shops using the app in the next year. Additionally, they’d like to increase the “stickiness” of the app, which I interpreted as making it vital and easily usable by daily coffee drinkers.

BUSINESS GOALS

Increase daily usage to draw and assure investors
Grow to 1,000 shops in the next year, 12,000 in 5 years (to compete with number of Starbucks)
Create financial avenues:payment processing percentage, custom menu cost, etc.
Add rewards program good across all shops on the app
Bring in a "surprise and delight" aspect
Target 24-34 year old tech savvy women who order coffee 3-5 times/week

Current Joe Coffee App

RESEARCH

Coffee Drinkers Survey

54 Participants
70% age 24-34
50% order coffee a few times/week
76% never ordered coffee through an app
Choose coffee shop by good coffee and convenient location
Pain points: Long lines, inconsistent drink menus

Joe Coffee App Users

9 Participants
77% 24-34
44% order coffee a few times a week or more
77% usually or always order the same drink
Choose coffee shop because of: good coffee, good baristas, and convenient location
App pain points: Few shops, confusing modifications

On Site Observations

Visited 4 shops during morning rush
Interviewed customers and baristas
90% of people order the same drink every day
63% of customers consider themselves regulars
Baristas prepare drinks as soon as they see regulars

Competitive Analysis

Feature analysis with Starbucks, Dunkin Donuts, Cups (USA), and Skip (Australia). Highlighted items = Joe absence in major functions.

Comparative Analysis: Welcome

Comparative Analysis: Search & Feedback

PERSONA

STORYBOARD

DESIGN GOALS

Current App Pain Points

Looked to the current app flow and user concerns to anticipate potential drop off points, which served as design inspiration.

Key Focus Points:

Help repeat users order coffee in just few steps
Make it easier to find a store with map and list views
Add notifications to remove guesswork of when drink is ready
Incentivize repeat usage with easy process and rewards

Relevant Heuristics:

Consistency
Recognizability vs Recall
Flexibility & Efficiency

REPEAT ORDERING

One of the biggest considerations in iteration was whether we needed to have a dedicated "home screen" and how to integrate a reorder function. I conceptualized this through four sketches, the first two of which were versions of possible home screens, and the last two of which were overlay "dialogue" type boxes, meant to show the app talking to the user. I tested these with users to find out what they thought they'd click, and what would be underneath the overlay. Participants universally said they'd expect a basic map or shop finder, which fit with our vision.

Sketch 1: Split Usual/List View

Split screen meant to have a list view + explore to lead to a map with a prominent "Gimme the Usual" button at top. Too busy.

Sketch 2: Chunky Home Screen

Segmented dedicated home screen meant to emulate a more curated feel, giving shops more room to shine. Too busy.

Sketch 3: Dialogue Pop-Up

An overlay dialogue meant to copy a "tour" feel we were experimenting with. Not robust enough + confusing buttons.

Sketch 4: Reorder Options

Added more variety in buttons + a clearer rehash of the previous order and icons. Change shop vs start over were confusing.

Final: Return Overlay

Simplified buttons to 3, changed the language, and dropped the dialogue style. Added map for context.

MAP AND LIST VIEWS

Sketch 1: Toggle Up/Down

Split screen proposed with a central toggle to scroll up between map and list view.
Too busy.

Sketch 2: Map Only

Full map view with a toggle at the top. Added bottom nav and shop info. Highlighted path was confusing to users.

Wire 1: Map

Wired with a map and location pins. Users liked the layout but weren't sure where they were on the map.

Final: Map View Home

Zoomed out on map and centralized a location marker. Darkened the toggle to differentiate it from header.

Final: List View

Toggle to list view includes more info: shop name, distance, rating, and ability to favorite the shop.

NOTIFICATIONS

PROTOTYPE

Using InVision, I uploaded wireframes into a hotspot-clickable prototype. Participants were led through a scenario in which they found a coffee shop near them, ordered Sarah's drink, and checked out, then returned the next day to order the same drink from the same shop.

Splash and Intro Screens

Map and List Views

Coffee Ordering Modifications

Coffee Ordering Continued

Payment

Feedback