logo-transparent

JULIAWAYNE

  • UX Portfolio
    • Joe Coffee
    • Alaska Airlines
    • Hackathon: Dining Dash
    • Secret Squirrel Activity App
    • Ecommerce Redesign (Coming Soon)
  • Writing
  • About
    • Resume
  • Contact

Julia Wayne

UX Design, Writing, Hungry

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
Current Joe App

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
current Joe 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
Caffe Fiore Rush Hour
Competitive Analysis
  • Feature analysis with Starbucks, Dunkin Donuts, Cups (USA), and Skip (Australia). Highlighted items = Joe absence in major functions.
Competitive Analysis
Comparative Analysis: Welcome
Comparative Analysis 1
Comparative Analysis: Search & Feedback
Comparative Analysis 2

PERSONA

joe user persona for presentation

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.

Joe Flowchart
Key Focus Points:
  1. Help repeat users order coffee in just few steps
  2. Make it easier to find a store with map and list views
  3. Add notifications to remove guesswork of when drink is ready
  4. 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
order again 1

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
Order Again 2

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

Sketch 3: Dialogue Pop-Up
Concept screen: Reorder

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

Sketch 4: Reorder Options
Ordering Overlay Final Sketch

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

Final: Return Overlay
Home Screen: 2nd Entry (1)

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
Map View 1

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

Sketch 2: Map Only
Map Screen 2

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

Wire 1: Map
wire 1

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
Map Wire

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

Final: List View
map

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

NOTIFICATIONS

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

Clickable Prototype

FEEDBACK & CHANGES

  • Help repeat users order coffee in just few steps: People liked the repeat drink overlay and were able to order when revisiting app

  • Make it easier to find a store with map and list views: Default map view was universally liked and understood, and list views were seen as "nice to have" by participants who searched for more info

  • Add notifications to remove guesswork of when drink is ready: Original efforts to have multiple push notifications (order sent, order received, drink made) were seen as too much feedback, and push notifications were reduced to only one
  • Incentivize repeat usage with easy process and rewards: Participants understood the stamp card to be valid across all shops and liked the flexibility of it

  • Additional notes: Favorites were originally not included in the bottom navigation, but were added because of card sorting and interview results. I completed two rounds of card sorting, asking participants to sort concepts into established categories, and then asking to sort concepts into organic categories. In the latter, the "favorites" were added by 75% of users.

RELEVANT HEURISTICS

    • Consistency: UI language, coffee ordering modules, addition of bottom navigation
    • Recognizability vs Recall: Similar payment behaviors, addition of rewards stamp card, push notifications
    • Flexibility & Efficiency: Shortcuts for return users, saved favorites in a dedicated navigation icon

NEXT STEPS

  • Ability for one user to order multiple drinks at one time through Joe
  • Ability for users to order ahead or schedule their order in advance
  • Troubleshooting
    • What happens when a drink is wrong?
    • Addition of Help/Customer Support
  • Tea drinkers: does Joe want to offer them an experience?
  • Add "Send a gift" option

BARISTA FOCUS

Study how baristas interact with Joe when they receive an order

  • Integration into their existing flow
  • Onboard training for Baristas
    • Many did not know how Joe worked
  • Incentives for Baristas
    • Referral codes
    • Tipping process
barista graphic

<<  Previous Project    |    Next Project  >>

Copyright © 2023 Julia Wayne

  • Scope
  • Research
  • Design
  • Next Steps