Starbucks ordering and store locator progressive web app

While updating the Store Locator app to have faster load times and improved SEO was the main challenge at hand, we also needed to ensure that the Starbucks team would be able to maintain and update it going forward. Since their developers largely were not well-versed in JavaScript, GraphQL, and modern React development, they would need to be brought up to speed on best practices to make sure they had the confidence to carry the project into the future after we finished our work. Starbucks had several data sources and APIs required for placing orders, getting the menu items, and drink customization options.

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.

During the process, the team worked closely with the Starbucks developers, acting as mentors to improve their confidence with JavaScript. We helped with workflow and productivity, best practices and process implementation, and even rolled out new tools for them like GitHub and Jira.

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.