Coffee Local

This project explores the question: “How might we help habitual coffee drinkers conveniently order ahead from local coffee shops?”.

Context: Completed for UX Design at CU Boulder
Role:
Research, Design
Duration:
3 Months
Tools:
Figma, InVision

The Problem Space

Efficiently getting coffee into to the hands of busy people is not a novel pursuit. More and more large coffee companies using technology that allow their customers to order ahead and pick up in store. However, these systems don’t allow people as much choice in where they buy their coffee. For one, they are restricted to drinking coffee from the corporations that are able to develop apps and provide these services. If a person has a local shop they want to support or a specific place they enjoy coffee from, they aren’t able to order ahead of time. This may not be a big deal for a casual trip to get coffee, but when one is on their way to work or school and pressed for time- they might go for the more convenient option.

Coffee Local intends to provide a platform for local coffee shops to allow their customers to order ahead. Customers get more freedom of choice in where they purchase coffee and small businesses have an extra edge in competing with large companies.

Here is an overview of the process behind the creation of Coffee Local:

Research

RESEARCH

Survey & Interviews

In order to gain insight into peoples’ coffee preferences and purchasing habits, I interviewed ten people (5 over the phone and 5 in person). I wanted to gather information on what their existing routines around coffee were and more importantly why they were that way.  Most of the people interviewed were students or young professionals, with one older working professional.

I organized the information I gathered by affinity mapping quotes from participants. Trends began to emerge, for example the tallest stack of sticky notes in the image on the right are negative mentions of Starbucks. However, despite this trend, many participants said they get their coffee from Starbucks regularly due to convenience. “Convenience” tended to mean proximity to work or home for most participants, and for some time factored in as well.

Key Takeaways

Location is everything. Almost every participant mentioned the location of coffee shop in some form or another. Whether or not a coffee shop is quick to get to or on the way to a specific destination was a deciding factor for many people on if they would purchase coffee from that specific shop.

People generally have a local favorite and a chain alternative. When asked about their preferred place to get coffee, almost every participant named both a local or smaller business and a larger chain business. This begs the question, when it comes down to making a choice, what sways the customer towards one or the other?

Most people are in and out in under 10 minutes. The majority of participants reported that they spent under five minutes or five to ten minutes in a coffee shop on a typical visit. Two participants reported spending more than fifteen minutes on a given visit. When prompted to describe their visits further, they said they liked to work or study in coffee shops so they are likely not part of Coffee Local's target user base. However, the fact that most respondents were in and out when buying coffee validated the assumption that there are a good amount of people who might be interested in ordering coffee ahead.

AVERAGE TIME SPENT IN COFFEE SHOP
RESEARCH

Competitive Analysis

In order to assess what apps are already doing in this space, I examined four existing coffee chain apps- Starbucks, Dunkin Donuts, Peet's Coffee, and Dutch Bros. In addition to noting patterns in their features (pictured left), I walked through the tasks of creating an account, looking for an item on the menu, and placing an order.

Key Takeaways

Prior to looking at existing apps, I hadn't thought to add an option for "favoriting" drinks. But this feature lends itself really well to ordering ahead as quickly and efficiently as possible. By looking at these apps, I also found some UX issues that I tried to avoid in my design. For example, the Peet's Coffee app is designed well in an aesthetics sense but the information architecture is messy, making it hard to navigate.

Ideation

IDEATION

Storyboarding

Using the insight I gathered through research, I decided to brainstorm how these factors might play out in a user story. I sketched out a few iterations (staring Marcel, a caffeine fueled young professional), until I felt that I had illustrated a realistic scenario and explored possible requirements for the app.  

In this story board, Marcel wakes up late and definitely doesn’t have time to buy coffee but maybe can buy some. He needs to pick a shop that is close to work because there’s no time to go far. He is presented with a choice between Starbucks and his favorite local shop. The local shop is a tiny bit farther away, but, by using Coffee Local to order ahead, Marcel makes up for the time it takes to get there. He doesn’t have to wait in line or wait for his coffee, he just grabs it and is off to work.

IDEATION

User Flow

I created a user flow to map the journey from the point when a user opens the app until the point they place their coffee order. The key task within the app is placing an order, however mapping this user flow out helped me realize the importance of the steps a user takes when first creating an account. A main goal of Coffee Local is to make ordering coffee quick and easy, so it is imperative to the success of this goal that users understand how the app works and put in their payment method ahead of time.

Design: Iteration One

DESIGN: ITERATION ONE

Wireframes

Testing: Iteration One

TESTING: ITERATION ONE

Low Fidelity Prototype

Using InVision and the wireframes, I created a low fidelity interactive prototype. I had  participants imagine they are on their way to work and want to order a latte ahead of time. They were instructed to open the app and use it however they think would achieve this goal.

Key Takeaways

There were a few key takeaways from this first round of user testing: Going straight to reviewing your order after adding an item to your order, though intended to streamline the ordering process, disrupted the flow for users who wanted to keep shopping or add more items.Having processes of creating an account and adding a payment method being separate, despite the fact adding a payment method is not optional, is confusing. It is easy to get lost in a shop’s various menus.

Design: Iteration Two

Using the insights I gained from my first round of testing, I made a more high fidelity prototype for further testing. Here are the ways I implemented what I learned into the design: Added a “cart” feature so that users could continuously shop and check out when they were ready, combined creating an account and adding a payment method into one step to make the onboarding process feel faster, and simplified the shop menu.

DESIGN: ITERATION TWO

Updates & UI

Testing: Iteration Two

TESTING: ITERATION TWO

High Fidelity Protype

To test this iteration of Coffee Local, I had participants freely explore the app and fill out a survery. Though there were some issues with feedback since this is an InVison prototype (ex. when you add an item to your cart the “0” items can’t change), users overall rated their experience highly for both navigation and readability of information.

Key Takeaways

One participant commented that they would love to see a list view of coffee shops in addition to a map view. This is a feature I would love to implement moving forward.

Takeaways & Future Considerations

Coffee Local was a fun and challenging project. Though iteration is foundational to design and specifically UX, I really felt like this project solidified the importance of testing and tweaking a product for me. I gained a lot of insight from testing my designs and it contributed to a better final product. If I were to continue working on Coffee Local, I would want to add a list view of coffee shops and design a settings menu.

Thank you for stopping by
emmajpetersen@gmail.com