Starbucks on Gopuff

Starbucks meets Instant Delivery

Role

Lead UX Designer at Gopuff

Core team

8 Engineers

3 Product managers

1 UX researcher

Timeline

3 months

Platform

React native

Press coverage

Philadelphia Inquirer ↗

Business Insider ↗

National Restaurant News ↗

Challenge

How do we integrate Starbucks coffee into Gopuff's instant delivery service, while maintaining a standard of usability, authenticity, and consistency?

Context

Gopuff was the very first delivery service licensed to make and deliver Starbucks, from kitchen to doorstep.

Perhaps more importantly, what would ordering Starbucks look like when it's NOT on the Starbucks app? Will people still be able to order their Caramel Crunch Hazelnut Pump Whipped Cream Latte?

Key research insights

We noticed users who bought Starbucks wanted every single syrup and milk option available, even if it was from a third party partner.

Through qualitative UX research, the primary problem broke down into three secondary concerns to focus on:

40%

of users were sold on the initial idea of a Starbucks drink coming from Gopuff, with concerns surrounding the authenticity.

80%

of users were aware they can customize their drinks, but weren't always aware they could actually modify their drink customizations.

95%

of users expressed concern about how the price of modifiers is calculated, and are conscious of the price of their drink blowing up.

Vision

Customizing a drink 87,000 different ways to your liking should be intuitive, fluid, and expansive, with no hidden costs or fees.

Process

In an ideal world, the design process for creating a customization experience is linear. In practice, it's not.
‍

Kickoff

Alignment & prioritizing

Defining business goals of project
Refining problem statement

Define

Research & analysis

Precedent research (UberEats, Starbucks App)
Assess technical needs & feasibility
Aligning with UXR on testing and research needs

Design, develop, test

Wireframing & ideation

Defining information architecture
Rough user interfaces
Defining framework (system for customization)

Design, develop, test

Visualization & iteration

High fidelity mocks
Stakeholder feedback (Starbucks team, CEO, CTO)
Identifying edge cases and acting on them

Design, develop, test

Prototyping & user testing

Interactive prototyping
Real time coding & collaboration to test edge cases

Launch

Design, develop, test

Distinctly branded pages simplified the required cognitive load, affirming the authenticity of the partnership and ensuring the capture of loyal Starbucks customers.

Standard Starbucks modifiers were rebuilt into nested modifiers to aid users in understanding the full extent of customization, generating a higher average unit value.

Food modifiers were broken down into a manageable system for frontend and backend to mirror each other, reducing the need for one-off fixes.

Small details like displaying price in ingredient selections were strongly advocated for, removing dark UX of hidden fees and raising user trust and loyalty.

I partnered closely with engineering, sometimes designing and coding simultaneously to ensure no edge cases were missed which greatly decreased the average of bugs reported.

Example: How modifying a caffe latte recipe works, from the recipe vs. full modifier menu.

Changes to global app design, such as product tiles, meant constant last minute design sprints to ensure users had a consistent experience when browsing products.

Live experience

To try it out yourself, download the Gopuff app ↗

Successful results

Increased average order value due to modifiers

Overachieved initial daily unit sales estimates

Doubled expected revenue, over a 6 month period post launch

Learn more

Due to a few confidentiality restrictions, I'm not able to share things like actual numbers or all the designs. Please reach out for even more at rwshih@gmail.com or on LinkedIn ↗

Reflection

Starbucks, as a multi-billion dollar partner, meant an additional level of polish was needed. By embedding myself into every single little detail of the project, I was able to go beyond the baseline ask and innovate on how users can customize food; and it was incredibly rewarding to watch real users order with it.

In hindsight, I wish I had asked the backend engineers how catalog infrastructure works earlier in the project. Some UI issues late in the project could've been avoided had I understood how a few backend services work. Definitely something to consider the next time Starbucks comes calling!