Using React, GraphQL, and Server-side Rendering for Faster Load Times, Improved SEO, More Conversions for Orders, and a Better User Experience
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.
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 PWA ended up being 233KB, 99.84% smaller than the 148MB size of the original iOS mobile app
See more of our work and different solutions we’ve created for our clients and partners