top of page

Starbucks

Starbucks_Mockup.png

Add App Feature | Case Study | UX/UI Design | Testing

PROJECT OVERVIEW

Challenge:
       
In this pandemic, many Starbucks loyal customers have resorted to placing their orders for delivery through the UberEats app but have lost the opportunity to either cash in or keep adding to their Stars Rewards in their Starbucks app.

Solution:

The solution is to add a delivery feature to the Starbucks current app which would allow customers to get their cup of joe to their home (their current work places) while continuing to take part in Starbucks' rewards program.

Objectives:

  • Integrate a delivery feature in the existing app where the customers can place their order for delivery.

  • Integrate a feature that connects outside apps such as UberEats with the current Starbucks app so that customers can still participate in the Rewards program even if they order from a third party app. 

Specs:


Project Scope
 
Add Feature to Existing App

Tools

Figma, Adobe Illustrator, Whimsical, Miro, Maze

Role
 
UX + UI Designer 
(User and Market Research, Visual Design, Interaction Design, User Testing)


Client

DesignLab Case Study

Team

Solo with feedback from DesignLab's mentor and peers.

Project Duration

Spring 2021
Empathize

EMPATHIZE

I wrote a Research Plan to guide me as I focused on learning about Starbuck's market, their competitors, common food delivery app practices, and the target audience. My goals and the methodologies used for the research were:
Research Goals:
  • Understand how the current app and rewards system works.

  • Understand how an order is placed in UberEats for delivery.

  • Research if other apps with delivery and rewards systems exist and how do they work

  • Identify various challenges faced by customers when placing an order on UberEats or Starbucks app.

  • Learn common success and pain points of placing an order, reward system, and redeeming points. 

  • Identify successful navigational patterns and filter functions on similar delivery apps.

  • Learn how competitors use the digital space to target their audience.

  • Understand the needs and requirements of Starbucks customers who use the app.

Methodologies:

  • User Interviews and Observations

  • Market Research

User Interviews and Observations:
I conducted user interviews to understand other users' specific wants, needs, and behaviors while using Starbucks app, while placing order through or outside of the app, and overall behaviors regarding delivery orders. Although I myself am a user of the Starbucks app, I needed to separate myself from the product as a designer. It was crucial to gain other users' insight to design a user driven solution. Here are the participants that I recruited for the user interviews:
Participants
  • Starbucks Customers

  • Starbucks App Users

  • Customers who have ordered Starbucks for delivery using UberEats

Before conducting the interviews, I prepared an Interview Guide where I split the questions in two categories: Starbucks and Food Delivery. The Starbucks questions were to understand how the participants used the current product. Whereas, the Food Delivery questions were to understand how the participants currently placed order for delivery online, what were some common pain points that they experienced and observe any other behaviors that might emerge. I asked questions about order for delivery to understand what were some of the users' goals and fears while ordering for delivery.

Key Insights from User Interviews

User-Interviews-Key-Insights.png
Competitive Research
When I started this project, my goal was to add a new feature to the Starbuck's existing app that allowed Starbucks' customers to make delivery orders. However, I wondered why this feature didn't already exist, and how Starbucks's competitors dealt with home deliveries. To achieve in depth results, I focused on Starbucks' 4 main competitors: Dunkin' Donuts, McDonald's, Tim Hortons, and Seven Eleven. I analyzed the competitor apps to learn what were some of their strengths and weakness based on the insights I gained from user interviews.
Competitors-Research_Dunkin-Donuts.png
Competitors-Research_McDonalds.png
Competitors-Research_TimHortons.png
Competitors-Research_Seven-Eleven.png
Problem:
Upon doing the research, I hit a major roadblock. It turns out that the reason this delivery feature did not already exist was because places like Starbucks, Dunkin' etc did not have enough customers placing delivery orders for the franchise to have their own drivers and delivery service. Because of this reason, all of these companies have partnered with 3rd party apps such as UberEats to still allow their customer's to have delivery options. 

This forced me to reevaluate the scope, the goal, and the project itself. 
New Solution:
To solve this, the new aim of this case study was to incorporate the partnership of UberEats and Starbucks within the apps in a way that users can continue earning and redeeming the Stars Rewards. 

I reached this solution as I reviewed the results of my user interviews where several had stated that they would place order for delivery if they could redeem their reward points for the order, thus making it cheaper. 
Define

DEFINE

With a new path for the feature addition laid out, I started to define user persona, product goals, and mapped out user needs to get a clear idea of what needs to be designed. 
Persona
The first step in defining the product was to define a user persona to design for. While creating the persona, I combined market requirements along with user needs. This way all of the data points from the research were visualized in one place for reference as I worked on fine tuning my new solution. 
Persona_V2.png
App Map
With a clearer understanding of the market and user needs, I compiled my research findings to define a sitemap. I started by mapping out how the current app is laid out. However, I revised some functions of the current app in this sitemap based on pain points stated during user interviews. I also added the new features that were part of the scope for this project.
App Map.png
User Flow
Similar to the app map, the user flow started with the existing user flow of the app, but incorporated the new features along the flow to map out when the new features were required and where the screens to design them would connect. This helped me visualize the connection between the current app and the new features to be added.

Order Placement Flow

App User Flow.png

Delivery Feature Flow

Delivery User Flow.png
Task Flow
As the user flow above became very complex and detailed, I focused on defining a user's task flow through the app with the new feature incorporated. Creating the task flow helped me visualize which screens needed to be revised and which needed to be designed for a user to successfully complete the main task.
Flow Chart.png
Ideate

IDEATE

Final UI Design
In this project, I was only working on adding a feature to the existing product. Thus, this did not require any brand or other design changes. I familiarized myself to Starbuck's color palette and style guide to work on implementing the changes and design. 

Here are some of the key screens that I either revised or designed:
iPhone_Portrait_0103.png

Homepage Proposal

Revision
One of the biggest pain points mentioned by participants during the user interviews was that the current Starbucks app required way to many clicks from users in order to get to their desired product for purchase. To tackle this pain point, I revised the Starbucks app's current homepage to incorporate a Favorites card that allows a frequent user to place the order for their drink right from the front page with as few clicks as possible

Linking Delivery App

New
To incorporate delivery feature within the app while also keeping in mind the market requirements, creating a page that allowed users to link and open the appropriate delivery app was the best solution to allow users to link their accounts and continue earning + redeeming reward points.
iPhone_Portrait_0114.png
iPhone_Portrait_0112.png

Redeeming Points

New
The current app never explicitly asks users whether they would like to redeem their points even when placing orders for in store. Therefore, I added a page as the user chooses their method of purchasing the order (pickup or delivery), a pop up appears reminding them about redeeming their points. 

This is an important addition because during research and user interviews, I received feedback of how many times the users are not even aware of their points that get expired before use. 
Prototype

PROTOTYPE

Once I completed designing the hi-fi wireframes. I put together a usability test plan. I planned out my testing goals and tasks for the participants so that I could prepare a full responsive prototype accordingly
Objective:
Evaluate if the users are able to successfully navigate through the app, purchase a drink, and track it.

Subject of the test:

Testing high-level prototype for mobile app

Task:

 

Purchase the Matcha Green Tea Latte

Usability Goals:

  • Navigate through the homepage to the Order Page

  • Go to Favorites List

  • View the Product Page

  • Add Product to Cart

  • Review Cart

  • Proceed to delivery checkout

  • Select whether or not to redeem points

  • Open UberEats to place order for delivery

  • Confirm payment and review purchase

  • Track Order in Starbucks Mobile App.

Please click on any screen below to experience the full prototype.
Test

Test

For this case study, I decided to create the usability test on Maze as I wanted to get visual results to analyze the design's success and fail points.
Methodology:
Create a usability test on Maze

Participants and Recruiting:

  • Starbucks Customers

  • Starbucks App Users

  • Customers who have ordered Starbucks for delivery using UberEats

Delivery Process Result.PNG
Overall the test results were successful. As seen in the image above, the usability score for most screens was between 86-100. 
maze_screenshot_1-209_1-209_1-293_1-290_1-295_1-298_1-301_1.jpg
maze_screenshot_1-290_1-209_1-293_1-290_1-295_1-298_1-301_3.jpg

Successful Results

As seen in the heat maps on the left, users were successfully able to navigate through to select the UberEats to place an order for delivery

Needs Improvement

The worse results were for the screen where the users had to finalize the order and choose whether they were placing it for order or for pickup. 

These visual mappings produced by Maze were very helpful to analyze the results of the usability testing.
maze_screenshot_1-171_1-269_1-277_1-171_1-237_3.jpg
maze_screenshot_1-171_1-269_1-277_1-171_1-237_3_nb.jpg
Conclusion
Throughout this project, I learned to work within the constraints of an existing product and design within an existing system and style. The biggest challenge during this project was tackling the unknowns. Going into this project, I had assumed that the next step for Starbucks is to add a delivery feature to their already popular app. This assumption was proven false when I conducted market research and learned that their isn't a big enough user demand of Starbucks home deliveries.

Although learning this could have been the end of this case study for me, I learned how to revise the solution to tackle the same challenge. I found another way to continue with the project in a way that did meet market and user demand. This problem was unlike any other that I had previously encountered, so I am grateful that I learned how to adjust to constantly emerging problems while working on a project.

View Other Projects

Artboard.png

Finect

UX/UI design of an End-to-End Mobile App  for self financial management.

16x9 Device Mockups for portfolio copy.j

Silicone Zone

Designing a Responsive E-commerce Website.

bottom of page