Designing An Adaptable Mobile Ordering System For
joe's coffee

Role: UX Designer // Web + App Designer

Project: Web Design And Marketing | App Design

White Gradient
joes mobile app in hand.png
White Gradient


Order, Schedule, and Checkout made easy for caffeine addicts during quarantine

As with many businesses in 2020- joe's coffee faced an unexpected dilemma. With their brick and mortar establishment operating at heavily reduced capacity- they were losing profits daily. 

Before Covid-19, joe's mobile ordering system was clunky- rarely used. Their client base was mostly word of mouth in a tight-knit community- with the majority of their caffeine addicts choosing to sit and enjoy a brew, as opposed to rushing off in a hurry.   

But now- with their brick and mortar establishment operating at 25% capacity- they needed an on-brand, functional experience that allowed consumers to support them through mobile-order to-go purchases. 

White Gradient
joes coffee on imac.png
joes coffe mobile app map.png

The Design Challenge

We needed to create a simple, functional user experience that would only allow users to perform essential tasks without hesitation or getting sidetracked.

The second challenge facing us was time. With quarantine restrictions being updated daily, the future of inside dining and pick-up options were uncertain. Already reduced capacity meant that joe's was losing out on essential profit with each passing day - meaning we needed to design and validate a solution quickly. 


joe's was able to provide me with tons of data on their most loyal customers, which cut down research time considerably. 

Beyond existing data, I made it a point to host short yet effective research/interview sessions with in-house staff, management, and users who frequented the establishment most often. 

Analyzing users gave me a better understanding of

- who the user is

- what app functions cater specifically to their needs

- how are they incentivized to return

- which app features are most valuable

Man in Cafe

User Flow & Validation

I mapped out the conceptual user flow and quickly sketched out some paper wireframes to help visualize the journey. 

We held a real-time user feedback session which allowed us to validate the flow of our design by asking users to perform essential tasks such as - finding the nearest location, changing user names and resetting passwords, scheduling orders for future pickup, completing the checkout process etc.

Visual Design

After minor adjustments based on user feedback - I began the visual design and styling the application. The interface incorporated a blend of existing brand elements, and custom iconography/images. 

joes coffee #UI_Design 12_Map.png
joes coffee #UI_Design 10_Payment.png
joes coffee #UI_Design 01_Welcome.png
joes coffee come again screen scene.png
White Gradient

Designing Supporting Marketing Assets

With the mobile app tested, validated, and designed- it was time to create the supporting promotional assets that would serve to inform new and existing customers that an enhanced mobile ordering experience was now available.

I designed a series of digital ads, banners, and a conceptual series of billboards that reflected joe's unapologetic tone, and unwavering dedication to quality. I also designed several responsive desktop hero sections to advertise the new mobile app.

joes coffee mobile app billboard 2.png
joes coffee mobile order app ad 1.png