Universally Accessible Ordering on a Performative Platform
Universally Accessible Ordering on a Performative Platform
A platform that meets the customer’s needs and allows menu customization based on preference.
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%
THE CHALLENGE
Creating a Progressive Web App Customers Love
Creating a Progressive Web App Customers Love
Despite the existence of the mobile app, the PWA ordering system would need to be built from the ground up. Because customers were used to using a dynamic, native mobile app for ordering, it was important to create a similar experience within the PWA. The app would need to incorporate images, animations, and interactions, while still fulfilling the requirements for a PWA.
OUR APPROACH
User-Friendly Ordering On The Web
User-Friendly Ordering On The Web
Formidable needed to build a user-friendly ordering system that accounts for complex business logic and works smoothly throughout the entire ordering process. Additionally, the Formidable team would need to do extensive work to ensure that the ordering system was user-friendly and functional, so both the customer and the business would have a positive experience through the entirety of the transaction. Because the app allows for myriad customizations, complex business logic would need to be implemented so that every possible deviation from the default menu items could be accommodated.
Menu Customization
Menu Customization
Each menu item includes many different customization options, each of which has its own unique business logic, so the team had to consider what options would be displayed to the customer, how the customer could modify the product, and what information would get sent to the Point of Sale. Each order would need to specify the default recipe and any ways in which the order deviated from that standard so the barista could make the order without any hiccups.
Organizing Complex Data
Organizing Complex Data
Because no existing APIs could account for all of this logic right out the box, it all needed to be written in. Formidable utilized GraphQL to organize the complex data set and business logic for use across all clients, and to wrangle a legacy API into an efficient, performant one.
Complex Caching
Complex Caching
In order to create the offline functionality for the PWA, complex caching had to be set up to download the information for each menu item, store information on customers’ previous orders, and store static pages from the website. Formidable’s team set up the server so it could handle in-memory caching and efficient server-side rendering. Formidable utilized React to create performant, content-specific animations, that would provide feedback to the user and help the content feel alive. These kinds of animations are common in native apps, but a luxury in web apps.
THE IMPACT
A Fast, Performant, Intuitive PWA
A Fast, Performant, Intuitive PWA
Starbucks now has a fast, performant, easy-to-use PWA that looks and feels like a native app. Smooth animations make the app feel native, and the tiny app size makes it fast and ultra responsive. The implementation of caching has given customers the option to use the app to look at menus and nutrition information, accurately customize their food and drink orders, and more, all without an internet connection. Once online, customers can use the PWA to view pricing specific to the location they’re ordering from and place their order. Because much of the app is available without an internet connection, the app is viable for emerging markets that may not have consistent access to the internet, and to customers who may lose access periodically throughout their day.
99.84%
smaller
The PWA ended up being 233KB, 99.84% smaller than the 148MB size of the iOS mobile app