Project Title
Starbucks Digital Barista
Starbucks AI Barista is a course project for Applied Product Design. The project redesigns the current Starbucks mobile app in the US market, aiming to create a whole new hands-free experience for the current app users.
Type /
Academic Group Project
Role /
Product Manager,
Designer
Year /
2023
Duration/
10 Weeks
Tools/
Figma, Miro
Problem:
Context: As more locations reopen from lockdown, Starbucks has set a goal to increase percentage of mobile ordering to 85% (up from 50%).
We want to explore some ways to improve the mobile ordering experience and reduce friction to users ordering via their devices.
Specifically, how can we improve the current app to be smarter and more intuitive to use?
Solution:
As a solution to the problems we identified from user interviews, we decided to focus on the AI Barista Concept. This allows customers to have natural, in-person like interactions–such as having orders taken and being asked what sized drinks when you don’t mention it–but without the awkward “how was your day” sort of filler talk. With this concept, users will never have to worry about taking too long and stalling the line.
Easier Said Than Done!
Research
In this phrase, I conduct both primary research and secondary research on the current app during the first two weeks.
Identifying frustrations with the current flow...
Let's order an Iced Vanilla Latte with Oatmilk on my way to work today!
I could not even find an Iced Vanilla Latte on the menu!
I tried customizing it, but the process took way too long.
Pain Points:
The current Starbucks mobile experience
-
Complicated Menu Architecture
-
Cannot Customize Pickup Time
-
Lack of Price Transparency
-
Cannot Edit Customized Drinks in the Cart
-
Lack of Order Status Details
Screenshot of Some Research Findings
Concept Development
In this phrase, I brainstormed multiple concepts and conducting interviews with customers to gain key insights.
Concepts:
Hypothesis:
It’s easier said than done.
Speaking out your order to a barista is more intuitive and convenient than scrolling through menus in an app.
What if I can order with my voice?
Wireframing
Wireframes:
Using Figma, we translated our core concept sketches into low-fidelity wireframes.
The user story we picked was ordering while driving.
The sketches display how users can order an Iced Vanilla Latte w/Oatmilk through the AI Voice Assistant.
Mid-Fi Prototypes:
Once the core concept was settled down, we moved on to design the key screens in Figma. The goal was to create a visual identity that’s aligned with the Starbucks' minimalist style, while also incorporate the key values that other AI voice assistants (e.g. Siri, Cortana) share.
I specially compared Siri, Microsoft Cortana, and Google Assistant as they are the dominant smart AI assistants in the US market, and some design decisions were:
-
Only display the most recent conversation on screen since it is too text-heavy to display all conversation for voice-focused AI.
-
Having a semi-transparent background than a concrete background for smooth transition within the application.
-
Display voice flow when users are speaking
Usability Testing
5 users got tested .
-
Task 1: Suppose you are on your way to work and want to order a Grande Iced Vanilla Latte on the Ave through the AI Barista while driving. Demonstrate how you would go about doing so.
-
Task 2: Let’s say you want to change the barista's voice. Show us where you might click to complete this action.
Prototype used for Usability Testing
GOOD:
-
Effective for ordering while driving, walking, and distracted
-
Completes order within 1-3 minutes
-
-
Personal
-
Barista profile picture
-
-
Intuitive
-
Completes tasks successfully
-
Similar flow to in-person orders
-
-
Minimalistic
BAD:
-
Icon on the homepage is somewhat mysterious
-
Predetermined options may limit the user’s input
Details on the flaws
User said:
-
"The microphone icon on the homepage is not intuitive. It could be confusing as they don't know what it is for."
A potential solution:
-
"To emphasize the microphone icon and move it to the bottom center so they can see it at the first glance and assume it represent 'order'."
User said:
-
"The pre-determined options that AI gives limit their responses."
-
A potential solution:
-
"To not show the pre-determined options at the beginning and only show them when users say something that is out of scope or when the AI doesn't detect any responses for 7 seconds."
Final Deliverable
Solution:
Introducing Tyler, a digital barista that will take care of your online ordering experience.
Tyler interacts with customers with natural and personal responses, just like talking in-person to a barista. Besides, users will never have to worry about stalling the line with complicated orders because Tyler will always be there and ready to help!
Say hello to Tyler!
Demo:
Now, let's order an Iced Vanilla Latte with Tyler!
Design Rationale - Humanizing AI
The ordering experience feels much more natural and personal!
We gave our digital barista a realistic profile picture, a name, and a voice. Tyler’s voice is also adjustable in the settings. He will speak colloquially in a casual tone, just like a friend.
Design Rationale - Display Voice Flow When Speaking
How could we give users visual confirmation when they are talking?
Design Rationale - Minimalist Design
We prioritized color contrast and minimal design for accessibility purposes.
Takeaways
These lessons are essential for my personal growth and development.
See you next time!
Think big and Broad
Starting from a broader perspective and thinking creatively is essential for designers. Consider the potential impact of your design product on stakeholders, the community, and society as a whole.
Always connect with customers
It is absolutely essential to conduct user research, understand customers’ pain points, and constantly ask oneself and the customers whether the proposed solution addresses the problem.
Create awesome, not just great experience
It is crucial to avoid limiting oneself to preconceived design schemes and explore unique and innovative solutions. As a designer, the goal should be to create exceptional solutions rather than simply settling for satisfactory ones.