Home/ Portfolio/ Starbucks Mobile Order & Pay

Starbucks Mobile Order & Pay

ClientStarbucks
RoleSr. Product Designer
Timeline21 weeks
ToolsFigma, SwiftUI, HTML/CSS
ProductQSRMobileOrdering

A mobile-order flow that respects the morning ritual — seven taps to caffeine or it's a failure.

Starbucks Mobile Order & Pay runs across 35,000+ stores and handles 26% of all in-store orders. The existing flow had grown feature by feature into a seven-screen maze. I led the redesign with one non-negotiable KPI: time from app open to order placed must stay under 20 seconds for a known drink.

View Live Design
16sMedian reorder time
+12%Completion rate lift
35k+Stores supported
26%Of all orders

The Challenge

A Starbucks order is a customization bomb — dairy, temp, flavor, foam, drizzle, topping. The old flow exposed every option as a modal on a separate screen. For a regular ordering "the usual," it felt like paperwork. For a first-timer trying to build a venti oat milk iced vanilla latte, it felt like a customs form.

We needed to serve both users — the regular and the newcomer — in the same flow, without making either one feel like the design was for the other.

Approach

  1. Favorites-first homeHome screen leads with your three most-ordered drinks as one-tap reorder cards. 60% of daily orders are reorders; the interface now acknowledges that reality.
  2. Drink builder as single screenReplaced five customization modals with one scrollable drink-builder screen. Every option visible; nothing hidden behind a tap.
  3. Store capacity indicatorEach store card shows live capacity — "Ready in 3 min," "Busy, 9 min wait." Ordering decisions shifted toward less-crowded stores, balancing partner load.
  4. Pickup-time expectationAfter order placement, a live ETA with barista progress — "Drink started," "Drink finished," "Ready for pickup." Cut "is it ready?" anxiety, which was the #1 complaint.
  5. Rewards inline, not separateStars accrued show as a tiny meter under the order total. No more "did I claim a free drink?" confusion.

Key Features

Favorites Reorder

Home hero is your top three drinks as tap-to-reorder cards, pre-loaded with your last customization.

Drink Builder

Single scrollable screen with size, temp, dairy, flavor, foam, and toppings. Inline price update as you add.

Store Picker

Nearby stores with live capacity, drive-through availability, and "Starts serving at" for early hours.

Live Pickup ETA

Barista-progress states from "queued" to "ready" with an animated progress meter and push escalation.

Stars & Rewards

Stars accrued shown inline at checkout — no separate rewards screen, no "did I get credit?" ambiguity.

Order History

Browsable past orders with one-tap reorder and customization recall — handles the "I want that same thing" case.

"Reordering my drink used to take 45 seconds and three decisions. Now it takes 16 and one. That's what I want from technology." — Starbucks Rewards member

Results

  • Median reorder time dropped from 38s to 16s.
  • +12% order completion rate across the full mobile-order cohort.
  • "Is my drink ready?" support tickets fell 58% after pickup-ETA launch.
  • Rewards visibility doubled after inline treatment — redemption rate up 19%.

Strategy

  • Ordering research
  • IA simplification
  • Flow architecture
  • Partner-load balancing

Design

  • iOS / Android UI
  • Drink builder
  • Store picker
  • Pickup tracking
  • Rewards integration

Tools

  • Figma
  • SwiftUI prototypes
  • HTML / CSS / JS
  • Lyssna
Back to All Projects Get in Touch