Starbucks Ordering and Store Locator Progressive Web App
Using React, GraphQL, and Server-side Rendering for Faster Load Times, Improved SEO, More Conversions for Orders, and a Better User Experience
A Brief Overview
- Created a performant Progressive Web App for Starbucks with dynamic functionality that feels native
- Created an experience that was 99.84% more lightweight Improved order diversity by 23%
Creating a Web App Customers Love
Having already landed on using React and universal rendering to decrease load time, the first step was to prototype and test out different interaction models with different versions of static content. Once we landed on the best option, the build out of the final product went relatively quickly. In the process of creating the store locator, several existing static versions of store pages were combined into one app. This was done in order to decrease load times, and also to simplify and improve Starbucks’ SEO efforts.
Organizing Complex Data
Beverage and food customizations have a lot of rules that require constant validations to ensure baristas aren’t asked to make impossible beverage configurations and customers get instant feedback on price and nutrition value for their customized food. For placing orders we also leveraged the GraphQL API as it let us send complex mutations that contained all the required data for customized beverages and the negotiated price at the time the customer added it to their order. The middleware also handed more complex ordering pathways such as split tender and refilling Starbucks cards.
The Impact - A Fast, Performant, Intuitive PWAThe ImpactA Fast, Performant, Intuitive PWA
The PWA ended up being 233KB, 99.84% smaller than the 148MB size of the original iOS mobile app
Related Case Studies
See more of our work and different solutions we’ve created for our clients and partners