Adding a group order feature to the Starbucks mobile app
Overview
Background:
Starbucks is a multinational chain of coffeehouses and is known to be the world’s largest coffee chain. It has a very popular app, with over 31 million users.
Problem:
While the app is very popular, the user is unable to create a group order. As a result, users either have to use a third-party app such as Ubereats, and deal with the hassle of splitting the payments through various methods
Solution:
I decided to add a feature where users can create group orders with others users
Role:
Product Designer
Tools:
Figma, Maze, Google Docs
Timeline:
4 weeks
OS:
iOS
Competitive Analysis
For the competitive analysis, I compared three food apps that Starbucks is available on, as well as a direct competitor. The four companies I compared were Doordash, Ubereats, Grubhub, and Dunkin’ Donuts.
Quick Analysis:
I noticed that with the exception of Dunkin’ Donuts, all of the other apps had the group order feature.
Ubereats and Doordash have an order deadline where users are given a time limit to put in their group order.
Grubhub, Ubereats, and Doordash allows users to split payments.
User Interviews
Four user interviews were conducted. All users had experience creating group orders in general, and also had experience using the Starbucks app.
Some of the interview questions asked were:
How long have you been a Starbucks customer?
How often do you order Starbucks?
When you go to Starbucks, is there a social element?
Have you ever done a group order?
Can you describe a situation where you had a difficult time making a group order? What parts of the experience made it difficult?
If you use the app, what would you like to see done differently when it comes to making orders?
Synthesis Debrief:
Splitting payments was a common issue when it came to creating group orders.
The participants wanted to see an option where they could text the link to people so that they could add their own orders.
There was the frustrations with having to adhere to dietary restrictions, and allergies.
User Persona
I created a user persona based on the information gathered from my user interviews.
Meet Reid!
Reid is 26 years old, and a coffee enthusiast. He tends to order coffee, and gets frustrated with having to deal with multiple orders.
Design
For the design, I mainly looked at the apps Doordash and Ubereats. I looked at how each app presented the group order feature, and took what I believed would integrate well within the Starbucks app.
Ubereats
Ubereats’ group order feature allows the user to set an order deadline, a spending limit, and a reminder to place the order.
When a user creates a group order, they invite others using a link.
Once the other users create their orders, the user is notified and the order is tracked.
There’s the option to either pay for everyone and split payments.
Doordash
Doordash has a similar user journey to Ubereats.
The user creates a group order and shares the order with other users.
There’s also the option to create a spending limit, and the option to either pay for everyone or do split payments
Once everyone creates their order, the user is notified and the order is tracked.
Style Tile
To make sure that my design was as close to the app as possible, I used Starbucks' creative website . There I found the colors, fonts, as well as case studies.
Design
When creating the prototype, I decided to take screenshots of the app on my own phone. I was able to use those screenshots as a model to how I wanted to incorporate the group order feature. The purpose was to create something that didn’t exist.
High Fidelity Prototype
After working on my low fidelity wireframes, I created my high fidelity wireframes and prototype in Figma
Usability Test
The usability test was conducted using Maze. There were a total of nine participants. The users had to complete three tasks.
Task 1: Create Group Order
Task 2: Order Selection
Task 3: Checkout/Place Order
Results/Feedback
One user wanted to see a notification of the group order being added
One user wanted to see the orders labeled by name to prevent confusion
The majority of users found the experience to be seamless
Priority Revisions
Below are the revisions that were applied to the key screens based on user feedback.
Key Takeaways
What I’ve Learned:
While designing, I was trying to recreate the whole app. I had to remind myself that I was creating something that didn’t exist.
I learned to focus on what’s best for the user and where to apply feedback.
What’s Next?
I would like to see how else I could add other features within the app.
I will apply what I’ve learned in this case study to future case studies and designs going forward.