Starbucks Underground Menu and Group Ordering

Added feature to the current Starbucks app.

Client: DesignLab Student Project
Date: August 23, 2019
Services: Case Study, Mobile App Design

Project Background

Starbucks is a staple in many cities. Their app helps saves time waiting in line to grab a cup of coffee or sandwich. Instead, customers can order on the app and simply walk in or drive through knowing that their order is ready to go.

With the ability to customize your drink after selecting a latte, for example, customers have control over nearly every element to their drink. When customers find that perfect combination of ingredients they can reorder it from their previous orders. The Starbucks Underground Menu would allow for customers to share those customized drinks to a Starbucks community by giving it a name and uploading a picture. Starbucks customers can browse those shared drinks and find something new to try.

The concept of the Group Order feature comes from the common scenario of sending a fellow workmate or friend out for a coffee run. People can add their drink to a single order by going to their app, customizing their drink, and entering a group order code in their cart.

Scope and Focus

To design a new feature in the iPhone Starbucks app that provides a social drink creation and sharing feature. The feature will be added to the existing app and must flow seamlessly with the current design and following the Starbuck Pattern Library1.

Challenges

Menus can often become boring to regulars. People want to see new items to try while still being able to order their favorites. When it comes to coffee orders the options go beyond the standard menu recipes when a person customizes the item. A challenge for some is telling someone how to order this new creation they found.

When a person is sent to Starbucks on a “coffee run” often a challenge is trying to get the right drink with the person’s customizations. This can create a challenge in keeping track of peoples drinks and making sure their accurate.

Solution

Given the popularity of social media, people are more likely to be willing and excited to share something they create. Adding a community driven menu that enables customers to name and share their creation with others will help Starbucks to have a continuously changing menu and features real customers.

A simple way to help people make “coffee runs” is allow other people to simply add their drinks to the group order and make the customizations themselves.

1. Starbucks Pattern Library –
https://www.starbucks.com/developer/pattern-library/

01. Research and Interviews

Primary and secondary research is conducted to better understand how people use coffee shop apps in general and possible competition. Starbucks has thousands of app users and it’s crucial to find out what their needs are.

View Research Plan

User Interviews

Interviews all showed an interest in at least being able to share a customized drink through text or social media and to see what other people order. Some concerns would be that the app would get too complicated to navigate. The Group Order feature was the most popular feature mentioned and users could see it being a very helpful added feature to the app.

View the interview guide View interview findings

Competitive Analysis

Conduct market research by reading studies and reviews of competition. In addition, create a competitive analysis to organize the findings.

Summary of findings: With countless coffee shops, both local and chain, there’s a constant competition for the market. Companies have to get creative and find new ways to reach customers. Many have the same features that the current Starbucks app does, but none had a socially driven menu or a group ordering option.

02. Personas

Using information gathered from the research findings, two personas were created to help with understanding and following the user’s needs.

Persona 1 – Jake

This persona is based on observing the most common age group to enter a Starbucks. Observations showed that of the people that were staying for a longer period of time were college students that came in to study.

Persona 2 – Gretta

A common age group for Starbucks customers is highschool aged teens. This age group is more heavily invested in social media and more likely to share and show off a drink they created.

03. Feature Roadmap

The features are prioritized based on the research findings and what would be the most crucial features to focus on.

Must-Have Features

  • Button to share customized drink via social media or text.
  • Colors and style using Starbucks strict guidelines.
  • Post previously ordered drink to Starbucks Underground Menu with pic and name.
  • Ratings/likes for drinks in Underground Menu.
  • Group Order page to share group order code and view order submissions.
  • Share group order code via Messenger or text.

Nice to Have Features

  • Calorie and caffeine ratings for the Underground Menu items.
  • Top-rated drinks in Underground Menu.
  • Instagram style feed of Underground Menu drinks in the corresponding drink menu item.

Can Come Later Features

  • Featured Underground Menu items on the home screen.
  • Symbols showing if drinks are dairy-free.
  • Special star rewards for drinks ordered on the Underground Menu.
  • Special stars if you share a drink.

04. Planning and Wireframes

Now that a solid understanding of the user needs is established, as well as having researched design patterns from similar company sites, the next phase involved laying out a detailed plan for adding the features.

Site Map

User Flow

Task Flow

05. Hi-Fidelity Prototype

Using feedback from the wireframes, iterations were made and high-fidelity UI designs were put together using Figma. Colors and fonts were gathered from the Starbucks Patterns Library.

View the Figma Prototype

06. Usability Test

Usability tests were conducted through Maze.design. 5 participants were hired and 6 were volunteer students. Overall the tests identified a few areas that could pose confusion for users, but positive feedback was received on the concept and areas of improvement were identified. Some limitations of the current app design and layout also played into the results.

View Full Report
15 Blocks

Each block is a task for the tester to complete or a question to gather additional input.

11 Testers

Aged between 18-40. 5 were hired through Maze and 6 were volunteer students.

90.9% Direct Success

Testers who completed the mission via the expected path(s).

9.1% Indirect Success

Testers who completed the mission via unexpected paths.

0% Give-up / Bounce

Testers who left or gave up the mission.

07. Conclussion and Deliverables

The biggest challenge with this project was working with the current limitations of the Starbucks app. While it’s visually appealing, there are limits to how many menu items you can have before it starts to get crowded making it difficult to add a new menu tab for the added features.

When adding Starbucks Underground Menu I decided to add it under the drinks menu in the main menu screen. The reason for doing this was taking into consideration that Starbucks would likely not want the Underground Menu to overrun their main menu. In the end result users that tested the prototype liked how it grabbed their attention and said it would be a fun addition to the app.

Secret menu apps have grown in popularity and to have something integrated right into the app would help Starbucks reach people in a whole new way.

The Group Order feature proved to be most popular for people in a business-type setting. Of the two features, the Group Order addition proved to meet more of a need amongst users.

Both features being added to the Starbucks app would ultimately need more iterations and test to be successful, but the overall concept was well received.

Deliverables

Project Brief

High-level overview of the project.

Interview Findings

Research summary of interview findings.

Sitemap

Menu placement in the current app.

High-fidelity Designs

Iterations built on the wireframes including high-fidelity graphics.

Handoffs and UI Kit

Any handoff information and UI kit.

Research Plan

Set research scope and objectives.

Personas

Put together 2 personas to represent the target audience.

User Flow

Chart of how the user flow might look.

Prototype

Figma and Invision prototypes of the app features.

Case Study

Full case study and summary of the project findings.

Secondary Research

Research other coffee companies and assembled a competitive analysis.

Research Brief

Presentation of the findings put together in an interactive document.

Task Flow

Flows based on the predicted common tasks.

Usability Testing

Usability test guide and results using Maze.design.

Interview Guide

Put together questions based on the secondary research findings.

Feature Road Map

A prioritized list of the specific features and requirements.

Wireframes

Low fidelity concepts of the features inside the app.

Final Iterations

Final design changes based on test findings.