Test 1: Hide an Item

• 4 Participants responded correctly on which button to click to Hide an Item

• All 5 Participants responded that they expected the item to be completely hidden, not shadowed out as shown on prototype

• 2 Participants said that they were familiar with the pop-up message for when an app introduces something new to the user

ROLE: Research, UI/UX Design, Prototyping, Usability Testing

*This is a student project completed as part of my design portfolio.

Starbucks is the world’s largest coffeehouse chain with an extensive food and beverage menu.

Starbucks has received feedback from their customers that they want a faster menu viewing and ordering experience in the mobile app. Starbucks wants to find out how to create a faster ordering experience.

THE PROBLEM

The high-level goals and objectives of this project are:

• to learn how to create a faster mobile ordering experience from the existing Starbucks app

• design the new feature and roll it out on the Starbucks app

THE GOAL

EMPATHIZE

My Research Plan started off by conducting secondary market research that looks at fast ways to speed up the ordering process via mobile apps. Currently, the Starbucks app offers their customers the ability to favorite a food or beverage item, repeat their last order, ability to order and mobile pay directly from their app, etc.

RESEARCH PLAN

The Secondary Market Research that I conducted consisted of reading different articles posted online regarding the benefits of letting customers have personalization in their ordering process. Below are some key research findings that I came across:

SECONDARY MARKET RESEARCH

Based on the secondary market research I found, I thought about how else can Starbucks continue to bring a quick ordering experience on their mobile app and stay true to their customer’s preferences and personalization.

Currently, the app makes its customers sift through each food or beverage item to find out what allergens are contained in the product. The app does not let its customers filter or hide any food or beverage item, which slows down the customer’s ordering experience. The app is not yet smart enough to know its customer’s true preferences and personalization.

I went back to research to see how many people in the U.S. are affected by a food allergy or have a special dietary preference. Below are some statistics I found regarding food allergy and special dietary preference.

After I conducted the Secondary Market Research, I created a Competitive Landscape Analysis looking at different coffee shops that are similar to Starbucks and their ability to offer a wide range of menu items and/or customization to their menu items.

I looked at Panera, Peet’s Coffee, and Dunkin’ Donuts as they allow their customers to exclude menu items (ie. no mayo, no onion, etc) and also note any allergens on the food items BUT none of them let you hide their food item.

COMPETITIVE LANDSCAPE ANALYSIS

click on image to view in larger scale

DEFINE

Now that we’ve met Mandy, she’s going to take us on a journey of her Starbucks experience as someone who needs to refrain from gluten in her diet.

The scenario used for the Journey Map was:

Mandy was recently informed by her doctor that she needs to cut gluten from her diet. Mandy has been trying to be careful when placing any takeout orders. Mandy has found that many food takeout apps do not label what is gluten-free or provide any dietary notes on their food items.

Besides sharing her feelings with us during the different stages of the Starbucks ordering process, Mandy also provides us with pain points and opportunities of her journey.

USER JOURNEY MAP

click on image to view in larger scale

IDEATE

I put together some quick sketches of the main screens that the user would come across to hide their food or beverage item.

SKETCHES

click on image to view in larger scale

Since Starbucks has an existing app, I used its current layout design and brand colors. I focused on wireframes that would help with the following flows:

• Menu items noting dietary restrictions and Hiding food item

• Adding a Filter button to filter by dietary restrictions

WIREFRAMES

Flow 1 - Hide an Item

click on image to view in larger scale

Flow 2 - Filtering Nutrition

click on image to view in larger scale

PROTOTYPE

I created two different flows for the Prototypes and also used them for the Usability Tests:

• Flow 1 - Hiding a menu item (click on View Prototype button below)

• Flow 2 - Filtering dietary restrictions and viewing menu items pertaining to those restrictions

click on prototype above to Hide an Item

TEST

The Usability Test was conducted remotely using the Prototypes in Figma and recorded via Zoom. I had five participants, ages ranged from 36 to 74 years old, for the Usability Test.

I shared my screen with the participants and instructed them to direct me to where I needed to click. I asked each participant before moving on to the next screen, “Where should I go on this screen to do the task?” or “When I click on this button, then what do you expect to see on the next screen?” or “Is this what you imagined that you would see?” while they navigated and completed the given two tests and various tasks.

USABILITY TEST

Usability Test Objectives and Goals

• To test the ease of Hiding an Item on the Starbucks app

• To test the Filter function of the Dietary Preferences and Food Allergies

Usability Test Findings

• All Testers unanimously thought the menu item would be completely hidden from menu selections during the first test

• Filtering Nutrition seemed to be more of a preference over Hide Item function from the Participants

After I conducted the Usability Test, I compiled all the feedback and observations into an Affinity Map. Each post-it color represents a Participant and provided comments and observations are categorized under Successes, Pain Points, and Suggestions.

Some of the feedback that all five participants mentioned during the test:

• (under Successes) that the Filtering and Results screen was exactly what they expected to see

• (under Successes) how the dietary preferences/food allergies listed under the food item is helpful

• (under Pain Points) thought the Hide Item function would completely remove the item

AFFINITY MAP

click on image to view in larger scale

I updated a couple items for this round of iterations since many of the pain points and suggestions provided by the Testers were not items that affected the designs. I included before and after screenshots to show that:

• I made an overlay the hidden item and item name. I created a button for Restore Item under the hidden item in case the user wanted to come back in the future and bring the item to clear view.

• I updated the Nutrition filter screen by having it fill the entire screen.

ITERATIONS

click on image to view in larger scale

UI DESIGN - FINAL

click on image to view in larger scale

FINAL HIGH-FIDELITY DESIGN

click on Prototype to hide an item

I worked on this project immediately after the Sushi Hanabi case study. This project was much easier to focus on because I am familiar with dietary restrictions and food allergies after being in the hospitality and food and beverage industry for the last 15 years. This project was also easier because Starbucks has an existing product so it was fun to see how close I could mimic their app design.

I would like to revisit this project soon and create screens to show what it would like look when the user decides to restore their hidden item. I want to be able to show all the steps from hiding to restoring an item to show the entire story.

Test 2: Filtering Nutrition

• All 5 Participants responded correctly on using the Filter icon to show only Gluten-Free and Dairy-Free items

• All 5 Participants said that they expected to see a list of Dietary Preference and Food Allergies to filter

• All 5 Participants said that they expected to see only items that were Gluten-Free and Dairy-Free in the final screen

• Test 2 was completed without any hesitation from all 5 Participants

• 2 Participants mentioned that they would use the Filter option if they were placing a group order and knew that someone had specific Dietary Preferences

IN CONCLUSION & NEXT STEPS

Since I did not find any food and beverage vendors that allow customers to hide items, I conducted another competitive analysis with social media platforms and music streaming companies as I knew they allowed their users to mute a follower or hide a song.

click on image to view in larger scale

PERSONA

Let’s meet Mandy Ramos! Using the information gathered from the secondary research and competitive landscape analysis, I created Mandy to tell us about her daily life, to learn and understand from that information her goals and pain points with how she would interact with the hide an item feature.

click on image to view in larger scale