Enhancing the review & post order experience

Starbucks

Interaction design | UI design | Prototyping | Usability testing | Writing

Project overview

Background

Due to Covid-19, Starbucks had to quickly pivot and modify their store operations and formats. Starbucks could no longer offer in store ordering and pickup; so new, no-contact methods were added. Customers needed to understand and be informed of these ongoing changes.

Goals

• Maintain or increase orders through app

• Establish benchmark CSAT score

• Lay foundation to unlock backend improvements and operational efficiencies

My role & contributions

I was the lead product designer on this project and I collaborated with one other visual designer, developers, program managers, and other stakeholders across Agile, multidisciplinary product teams.

I designed 3 new UI components/patterns and all interactions for 4 pickup methods across 3 platforms. I conducted usability tests and iterated designs based on findings.

I created user flows, matrices, functional specs, a11y specs, defined version deltas, and worked closely with product and engineering for handoff and validation.

Initial response to Covid-19

In order to set some context, before Covid-19, the 2 ways to order and pickup Starbucks were in store and drive-thru. Suddenly, in store ordering and pickup weren’t possible, so 50% of the options were gone.. We needed to Implement curbside quickly as a pickup option.

This initial design and flow were done by a fellow designer. The project that I led was a fast-follow to this and meant to be more robust and scalable. I took this as my starting point

Understand customer needs and expectations

Our researcher conducted user interviews to understand customer expectations around curbside pickup as the feature was getting designed and built. Concurrently, I worked with the researcher to understand customer sentiment and expectations around ordering and pickup, in general. The top findings are highlighted below:

Analyze competitors and existing app capabilities

Identify pain points and opportunities of existing experience

Apply findings to explorations

Starting with low fidelity designs, I started sketching out what a potential new flow for review and post order enhancements could be. Some considerations:

Review order screen

• In addition to what customers expected and competitors were delivering, allowing customers to select pickup intent upstream (before placing an order) also laid the foundation for backend and operational efficiencies for the stores. The technology wasn’t there at the time, but teams were working towards improving backend system connectivity and data flow between all the systems. This means that the pickup intent option could be passed to the stores and baristas would be able to make and stage orders in a more efficient manner.

Post order overlay

• Instead of having putting crucial order information into a bubble on the Order > Previous tab, I wanted to utilize a full screen overlay to keep the information focused, organized, and actionable.

Post order bubble + active order feed card

• Orders are active for 20 minutes after placing them. In order to retrieve the information on the post order overlay, I explored minimizing the existing post order bubble and adding a way to get back to the full screen overlay. This was both a familiar design and location for users and it reduced the amount of screen real estate that was taken on this screen.

• Additionally, I explored having an active order feed card on the Home tab so that customers could launch into the details overlay from that screen as well.

Define & prioritize potential features

With so many moving pieces, teams involved, and undefined requirements, I created a matrix that mapped out possible scenarios and feature prioritization. This served as a great resource in having conversations with business stakeholders, product, engineers, and fellow designers in working towards alignment and meeting business and customer goals.

Scope the V1 experience

Collaborating with cross-functional partners, keeping goals in mind, focusing on features that would deliver the most value, and understanding what was technically feasible near-term and long-term, we defined the V1 experience:

• Pickup intent is determined upstream, before placing an order

• 4th pickup option called “outdoor” was added

• Curbside and outdoor options require check ins via a web form

• Not technically feasible to surface an order tracker/status

• Active order feed card on Home tab out of scope

Validate with a usability study

Even though this project was moving quickly, I wanted to validate with customers that our direction for this new experience was the right one. Additionally, our order time estimates weren’t especially accurate either.

I built a fully functional prototype in Figma and set up an unmoderated test through UserTesting. My 12 participants included a representative sample of barcode SR (Starbucks Rewards) users, order ahead SR users, and non-SR users.

Findings

• All participants were successful in navigating back to the overlay. Half of the participants wanted to see their active order info in the home tab.

• Copy option 1 (“See you at 9:45 a.m.”) and option 3 (“Estimated pickup is at 9:45 a.m.”) resonated the most with participants. They liked the familiar, friendly tone of the former and appreciated the transparency of the latter. Interestingly, all participants preferred a specific time as opposed to a range.

• All participants felt that the overlay contained the right amount of essential information.

Design considerations and decisions

Review order decisions

Option B was the clear winner for the following reasons:

• All available options are visible

  • it is critical when a customer is in a conversion funnel, to not introduce an additional step or obstruct information behind an additional interaction/tap.

• Option selection can be defaulted

  • A default can be set and the defaults can get smarter over time, taking into account location, time of day, etc.

• Supports 4 pickup options, dynamic type, and text wrapping

• This configuration also supports dynamic type for iOS and Android and can handle string wrapping.

Post order considerations

For the post order experience, I explored many options taking into account considerations like incorporating tipping, downstream pickup selection, and granular order trackers.

Post order decisions

Putting it all together

Bring the new experience to web

Collaborate with engineers on implementation

I documented extensive specifications capturing accessibility, dynamic type support, long value handling, edge cases, error states, deltas between existing and updated experiences, and interactions.

I collaborated with engineers early and often in the project cycle to understand the technical feasibility. I would also routinely QA test builds and file bugs to ensure high quality implementation.

Establish CSAT score to learn and improve

Project summary