Peg Baldassari

BACKGROUND

Philz Coffee is known for their pour-over coffees and customizable teas to make each cup exactly how you like it - “It’s love served in a cup.” Whether it’s with cream and sugar, no sugar at all, or with almond milk and extra sugar, Philz takes pride in customizing each drink exactly how you like it. Philz has a well-designed app where you can order ahead and skip the line.

Coffee and tea runs are frequently made in group settings, for example at work, by ordering ahead using one person’s account on the Philz app. When orders are being taken, it’s generally through text messages, phone calls, or jotting orders down quickly. Then, one person inputs everybody’s customized drink orders through the app - which can be time-consuming and leaves the possibility for errors. The focus of this feature is to be able to get drink orders for others without having to use any activity outside the app, in order to save time and reduce the likelihood of drink mistakes.

Add a feature to the Philz Coffee app seamlessly.

This feature’s purpose is to enable one person (the orderer) to retrieve other people’s drink orders within the app, making it more efficient and more convenient for users who do group orders.
‍

CHALLENGE

OUTCOME

timeline

80+ hours in two weeks.

I want to know "how" and "why" people are taking other people's drink orders, and to learn about their positive and negative experiences.

GOAL:
To understand people's experiences placing drink orders for other people and how an app feature could improve the experience.

DELIVERABLES:
Market Research | Survey | 1:1 Interviews

After looking at existing coffee apps, I noticed that there is no feature specialized for group ordering or a way to connect with friends, families, or co-workers within the app. For my research, I wanted to focus on how to connect with people and how to be able to send and to retrieve custom drinks.

Some QUESTIONS I was thinking about...

How often do people buy or order drinks for somebody else?
‍
When making coffee runs, how do they take everybody’s order?
‍
How often do they order the same drink for themselves?
‍
Had they made a mistake on somebody else’s drink order?

APP OVERVIEW

To understand the Philz Coffee app and its UI design elements, I reviewed the app to get a better sense of how it navigates.

Research Findings

SURVEY RESULTS

75% answered ‘yes’ to having made a mistake on somebody else’s drink order
25% answered that they order the same drink for themselves every time
75% answered that they switch up their drink orders
75% answered that they either text message, make a phone call, or writing it down when taking someone else's order when making coffee runs
100% responded ‘yes’ that it would be more helpful to get other people’s orders within the coffee app

PRIMARY RESEARCH - 1:1 Interviews
My phone interviews helped me get valuable qualitative data about people's experiences, for example how bad they felt when they messed up somebody's order on accident.

POSITIVE EXPERIENCES

Everything goes smoothly and no drink order is missing or made wrong
Drink ready when customer arrives at coffee shop after ordering ahead

NEGATIVE EXPERIENCES

Making a mistake on somebody else's drink
Mistakenly giving the wrong drink to someone
Drink not ready when customer arrives even after ordering ahead

FEATURES

Having the flexibility to send your order within the app
Having access to other peoples' drink orders
Order ahead and drink labeling to reduce confusion

VALUES

Efficiency
Stress free
Convenience
Accuracy

What I learned is that occasionally people switch up their drink orders and a few people get the same drink every time. This gives me an idea of coming up with solutions that will accommodate being able to switch up their drink order anytime.

GATHERING INSIGHTS

Insight #1: People want a quick and organized way to make group orders

Insight #2: People want a foolproof way to make large orders

"Sometimes I have to go around the whole office and find people to make sure I don't exclude anyone."
"Writing down everybody's orders on paper and then inputting them into the app takes a long time."

"It is such a bad feeling when I mess up somebody's order or the coffee shop messes up the order. It's hard to keep it all straight."

"I've been ordering at the register and they cashier asked what type of milk for my friends drink. I had to hold up the entire line texting her because I had forgotten."

"I've gotten confused at work because I memorized almost everybody's drink orders but then they switch it up and want something else."

"Sometimes my sister gets a tea and sometimes she gets a coffee and she is very specific about how she likes it."

Insight #3: Users don't always order the same drink

USERS WHO MAKE COFFEE RUNS WITH MULTIPLE ORDERS...

Worry about messing up the orders
Have trouble keeping track of which drink belongs to who
Like to do something nice for other people

Now I have some understanding of the behaviors that these users have, and I can begin to think what personas can be created based on these insights.

After synthesizing the research data, I created personas to more specifically understand Philz App users who would use the group order feature. Once I better understood the wants, needs and frustrations of the user, I could define their problems and questions to be solved in the ideate processs.

GOAL:
To define the wants, needs, and problems related to customer experience taking down drink preferences and ordering group orders.

DELIVERABLES:
Personas | Empathy Maps | HMW Questions

PERSONAS

With the collected data from researching, I was able to create personas and understand potential users and their needs when it comes ordering other people's drinks.

EMPATHY MAPS

I was able to dig deeper into the personas' personalities by creating an empathy map expressing their pains, gains, thoughts and feelings.

How might we...

Taking the insight and needs from primary research, I was able to come up with a POV statement that lead to HOW MIGHT WE questions. This will generate ideas for brainstorming to identify what's needed moving forward.

During the IDEATE process, I generated solutions for the users' wants, needs, and frustrations. At this point I wanted to come up with a lot of different solutions so that I could choose which ones would be effective for the added feature. Once I prioritized features for the app, I was able to imagine the app as a whole and build the frame and flow.

GOAL:
Generate solutions for the defined problems and build the information architecture and flows.

DELIVERABLES:
Brainstorm | Feature Roadmap | Sitemap | Task Flows | User Flow

Brainstorm

After writing HMW questions, I brainstormed for two minutes to come up with solutions for each question. The purpose of this process was to produce as many solutions possible to discover the quality ones.

FEATURE ROADMAP

After an overview of my research, I prioritized features that would be useful for the new app capability.

SITEMAP

Taking the results from the research and feature roadmap, I created a sitemap visualizing what the navigation interface could look like, and what the categories and sub-categories would be.

Task FLOW

Task flows were created to help visualize what a user might view and click on in the app.

Task 1

Reagan's boss wants her to order ahead Philz Coffee after the meeting. He wants to switch it up and add oat milk instead of cream in his usual drink order.

Task 2

Sutton is adding his friend, Ryan, to his "Their Philz", so he can add Ryan's drink to his order.

USER FLOW

User Flow is used to see the user’s actions and decision making starting from the opening page to completing drink orders. Completing the two scenarios I used, helped me make decisions on what is needed and not needed for the added feature.

Scenario 1

Raegan has checked her emails and is about to head out to make errands and pick up Philz Coffee for her and her boss, Jim, on the way back. Before she leaves, she wants to order ahead through the Philz Coffee app and schedule a pick-up time. She already has Jim's profile on her phone, so all she has to do is add his drink order to her cart.

Scenario 2

On the first coffee run of the day, a barista told Sutton about the feature on the Philz Coffee app and showed him how it works. Once Sutton got back on set, he handed out all the drinks, then talked to his crew about getting their profiles added onto his app. His Producer, Ryan, already had his profile set up and he could use the "scan mode" to connect each other's profiles without having to type in names and phone numbers so that when it's time to make the next coffee run, he can order ahead from his account. He also learned that names will already be on the cups so he does not have to figure out whose drink is whose. Phew!

Once I established the information architecture and flow of the added feature, it was time for the DESIGN process. I sketched out the layout, visual hierarchy and built wireframes to see how everything would interact.

GOAL:
Sketch and build wireframes to put into perspective the structure of the added feature. Next, apply the branding elements to enhance the overall look.

Wireframe Sketches

I roughly sketched out low-fidelity wireframes to get an idea of how the added feature and its design elements can be laid out.

Mid-Fi WIREFRAMES

Building out mid-fidelity wireframes allowed me to structure the app’s interface, while keeping in mind the cohesiveness of the existing app.

BRANDING

I had thoroughly examined the Philz Coffee app to identify the fonts, color palette, and icons, so I could apply to the added feature, making it seamless.

HIGH-FIDELITY DESIGN

I implemented the existing colors and imagery into my wireframes. This allowed me to visually see everything come together in a seamless and cohesive look.

UI KIT

The UI kit is a valuable manual for designers and developers moving forward. It guides every step of application across the app. I've included the additional design elements and labeled them as "NEW...", so designers and developers can easily differentiate what has been added.

Using a prototype, I conducted usability testing using InVision and collected data. During testing, I got feedback about how to improve the app for optimization and also what worked for the users.

GOAL:
To conduct usability testing on a prototype in order to find out successes, problems and wins to discover new solutions for iteration.

DELIVERABLES:
Prototype | Usability Testing

ProtoType

The prototype was created in Sketch to see the frames interact and note if any UI elements needed changing before testing. Then, I uploaded it through MAZE for testing.

USABILITY TESTING

Now, for the usability testing for the added feature, I recruited six users and I used MAZE to record the users’ clicks, time spent per page, and the paths they took while navigating through the prototypes to complete each task. The tasks given were:

Add Ryan to your “Friend’s List” and then view his drink.
Add Sally’s adjusted drink to the cart, then check out and select a payment option.
Make the Silken Splendor drink your ‘ProfileDrink’ and then send a past profile drink called “Jacob’s Wonderbar” to Ryan.

TEST OBJECTIVES

Observe if users can identify and understand the "THEIR PHILZ" button in the main navigation
Observe the users on adding friends and see if they understand that they have the ability to add through their contacts
Observe the users understanding the ordering and checkout process
Observe users making adjustments to their friend's drink order
Observe users to locate their 'Profile Drink'
Observe to see how users respond on the overall added feature and if it makes sense to them

TEST GOALS

Understand how user interacts with the feature
Identify pain points and pleasant experiences when navigating through the app
Collect feedback to make improvements on specific areas

the results

Overall, the testing of the added feature in the PHILZ COFFEE app was very insightful.

According to MAZE, almost all users completed all three tasks and 1 user gave up on one. The overall usability score is 81 with a 100% Direct Success for the first two tasks, and 80% for the third. While watching the participants, all users said the first two were easy and the third task was the most difficult. Just two users were familiar with the Philz’s app, so they had an advantage knowing how the app works. For the ones who were not familiar with it, they had a more difficult time, but most of them managed to figure it out.

Using the data from the usability testing, I identified more areas of imporovement and made revisions for the next iteration of the high-fidelity wireframes.

GOAL:
To identify areas of improvement and create solutions for iteration of a high fidelity prototype.

DELIVERABLES:
Affinity Map | Revisions and Final Hi-Fi Wireframes

AFFINITY MAP

I organized the results from the usability testing, combining each users’ successes, problems, and wins based on how they did and felt. This helped me determine areas of the feature that needed improving and what the solutions would be.

Revisions and Final wireframes

I applied the solution and improved the high-fidelity frame by making the account button look active while it's selected, so it makes it easier for users to know where they are in the app. I decided not to make the other recommendation changes because there was a higher success rate on those actions, and I felt it was more coincidental and not a pattern.

Creating a completely new feature for an already existing app allowed me to solve an everyday problem that I experience regularly. I especially enjoyed the empathizing in this project which helped me see the problem from other perspectives besides my own. Designing UI features to fit in within the already existing branding of the Philz app was fun.
‍

Final takeaways

Next Steps...

Understand how connectivity between customers changes the Philz experience
Redline the design for handoff to developers

Introducing the added feature...

"THEIR PHILZ"