Starbucks Moblie Ordering
Designer on Starbucks Android mobile ordering product.
Worked closely with cross functional partners on this work: Product Design team, Engineering team, Engineering Manager, Product Manage, Technical Product Manager, User Research, Content Manage, Product Catalog, API Manager, Brand Design Team, VP of Product, Chief Digital Officer.
Create a personalized ordering experience for Starbucks customers.
Problems Solved For
For customers: the line is too long when coming into a store to order, making it hard to get in and out of the store quickly enough during their commute.
For Starbucks: store partners cannot fulfill orders or engage with customers at their expected pace.
The ask from leadership was intentionally ambiguous: helping solve the problem of long lines, let people order ahead with their phones. There was tremendous emphasis on how a large, loyal number of Starbucks customers expected a quality mobile ordering experience on par with the physical store experience. With this direction, the design team defined the entire experience and scope in order to address this need.
We presented progress in weekly design reviews to the Chief Digital Officer and VP of Product, getting feedback on how the experience and expression of the Starbucks Brand could meet high customer expectations.
Pilot program tested in Portland, OR market to 159 stores: 8-week user research study conducted among early adopters program. Why Portland? Lowest performing store market, highest mobile app adoption rate.
We identified several paint points in the experience that we prioritized addressing before a national launch.
- It was unclear to customers how the mobile ordering touch point ends and the physical store pick up begins.
- Customers want the app to learn favorite drinks and stores.
- Decrease steps to order.
Solution Approach We took our leanings from research to define a complete ordering experience that support menu browsing, product customizations, order builder, store chooser, payments and order tracking.
Default to Content
Starbucks mobile ordering defaults to product content throughout the ordering experience. A customer can add an item to their order at every level of the menu hierarchy.
A customer can tap into any product to add customizations, easily calibrating their favorite drink to their exact specifications.
The “Recents” tab in the menu, displays previously ordered items. With 1-tap a customer can re-order items, including customizations. Heavily customized drinks do not have to be reconfigured from scratch upon reorder.
Starbucks store menus vary based on region. Real time store inventory displayed in the menu. To see another store’s menu, choose a different Starbucks store anywhere the order flow by tapping on the store name at the bottom of the screen.
The Order Builder screen provides a detailed description of all order details. Customers can easily edit items in their order, change their pickup store, or get directions.
We grew company revenue and product engagement as a results of launching this feature.
11M active monthly users (20% year over year increase)
7M Mobile order transactions per month
We observed after launch some practical usability issues that were preventing users from moving throughout the order flow. Here were some key findings and corresponding solutions...
Improving Forward Motion
The original design featured a product options view with a back button. This created confusion in user testing over the back/forward progression of their order. Customers weren’t sure if hitting “back” on the product options page was adding those changes to their order. We reinforced forward motion upon save by adding a persistent footer to the options view.
We learned that customers were arriving at stores to find their order was not ready or had been sitting too long, affecting product quality. To resolve, we updated the order builder to include a prompt about their order eta based on their distance. Providing this summary helped users make better decisions about when to send their order.
Customers were surprised to find only partial orders during pick up, based on store inventory shortages. To provide users more control, we surfaced inline if an item is out of stock based on real time availability at the selected store. This allowed users to pivot their order to a different store and prevent any surprises.
At launch, we underestimated how much the mobile ordering experience needed to factor in the real world scenarios. Accounting for issues like inventory shortages, unexpected busy hours, traffic delays that would affect pick up time all influenced how we evolved the design over head. We learned the lesson that simple is usually better, and to error on the side of overcommunication when it comes to time sensitive experiences.