Eddy Chen
Product Design | AI Brista | Mobile
A global coffeehouse chain, popularizing darkly roasted coffee and creating a café culture. A sponsored project focused on its digital innovation.
My role expand from conducting secondary and field research, brainstorming ideas, to building interactive prototypes in Figma and iterations based on user testings.
Our Goal
As more locations reopen from lockdown, Starbucks has set a goal to increase the percentage of mobile ordering. Our team attempts to redesign the current Starbucks mobile app, aiming to resolve some of its current flaws and create a whole new experience for the customers.
Our Solution
A digital barista that will take care of your online and hands-free ordering experience.
Interacts with customers with natural and personal responses, just like talking to a barista in-person.
No worry about stalling the lines for complicated orders, order complete in 2 min
Initial Research
To identify frustrations and problems of the current Starbucks' mobile app experience (not limited to ordering experience), we did a lot of whiteboard exercise, and we all ordered through the Starbucks' mobile app at least once and compared Starbucks' ordering experience with other food app such as McDonald, Luckin Coffee... We also conducted 10 user interviews asking about their starbucks experience, and we referred to user reviews from various forums and App stores to gain more insights on common problems and potential improvements.
Our approach for the initial research was to start from identifying small components to gaining a broad picture, which is also called "Bottom-up Design" method.
To demonstrate the user's pain point due to the bad information architecture, let's order an Iced Vanilla Latte w/ Oatmilk together:
Based on our initial research, we created a user persona Matrix to guide us finding potential solutions to the problems we found.
How might we improve the current app to be smarter and more intuitive to use?
Next, we did some brainstorming exercise and came up with 11 new ideas, topics ranging from redesigning Starbucks Rewards program to integrating AI, and we hand-sketched the key flows for those concepts and walked through them with 8 user interviews to get more insights and validate our new ideas.
Below are some example concept sketches:
After walking through our new concepts with the users, we were able to narrow down to 2 higly rated concepts with the smart chat assistance as our core concept, as well as order ahead of time and pick up time.
Hypothesis: Easier Said Than Done
Communicating orders to a Barista is more straightforward than searching for your order on the app.
It allows customers to have natural, in-person like interactions using voice input to order – 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, you’ll never have to worry about taking too long and stalling the line.
Now let’s see how might this look like from the user’s perspective in the same senario (order an Iced Vanilla Latte w/ Oatmilk)
Before we moved on to the usability testing, we did some market research on the existing AI chat bot, such as Cortana and Apple Siri to find the industry standards for AI chat bot in general and examples of voice-assisted AI. Then, we designed mid-fedility wireframes to show the hands-free ordering experience.
AI Chat Bot Industry Standard: Infomation
Clean and minimal design but still retain important information
We kept the user's previous input and the AI prompt, with some options for users to choose from
Creating the natural and in-person like conversation
AI Chat Bot Industry Standard: Input
Voice focused input combined with text and options to allow maximum freedom to the users
Using options, card, images to maximize focus and highlight important information or next steps
AI Chat Bot Industry Standard: Background
By using a transparent backgroud, this allows the users to still 'be in the Starbucks' app' instead of jumping to a different application
Design Decisions: Hands-free conversation
Actively listening when prompt with options
Showing animation when reading voice input
Here is a demo to help you better envision how this will come together and be animated
Imaging you are driving to work right now and wants to order an Iced Vanilla Latte using our new starbucks AI
In this stage, we started to focus on one user flow, which is ordering during driving with limited attention to the screen, emphasizing the convenience and the 'save-time' concept. We then conducted 10 usability testing by asking the users to order the Iced vanilla latte and closely monitor their reactions and difficulties on completing the tasks. We also asking post-interview questions to get more insights. Some of the key findings and observations are:
During the driving scenario, we observed the users still having a hard time concentrating on the important things on the screen, specifically the questions and options.
All the users would be able to complete the tasks successfully within a reasonable amount of time, but they feel the conversation is like talking to a machine, unlike the natural converstation with the Brista.
Based on those feedbacks, we decided to do a second-round of iteration on the design to solve those issues.
Design Decisions: Background color
Using darker background to create higher contrast between words and enhence readability on the card and options
Introducing Tyler, our personalized AI barista!
By clicking on the gear icon on the top right corner, give users power to customize their barista with personalized ordering experience, such as different voice, and change to a different Brista at your favorite store
Lastly we conducted usability testing with additional 5 users to see how users might interact with our screens and gauge the intuitiveness of our design. We required them to complete two tasks 1) order a grande iced vanilla latte on the ave through the AI while driving to work 2) begin to change the barista’s voice
Our usability testing revealed a couple key insights.
All users were able to successfully complete the tasks and did them efficiently (as demonstrated by users taking only 1-2 minutes to complete the ordering process).
They appreciated the minimalist design and felt that the overall experience was intuitive.
Users felt that the profile picture of a real Barista made the ordering experience personal and enjoyed how “human” it felt.
There was confusion regarding the functionality of the mic icon on the homepage, which is intended to enable the AI barista.
Microphone Icon match the other icons with a solid fill-in.
Users also felt limited by the predetermined user input options.
After 10 seconds of silence from the user, potential options for user inputs will be presented and read aloud.
With the new AI Brista, let's order an Iced Vanilla Latte again:
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.
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.
When conducting user interviews and usbility testings, start from lower fedelity wireframes will minimize users getting distraction from visual appealing so they could focus on the real problem in user experience.
