Starbucks released their mobile ordering app nationwide in 2015. When it came time to add ordering functionality to the Starbucks website, they wanted to create a system that would be universally accessible to both established and emerging markets, so they called in Formidable to help them create a Progressive Web Application (PWA). Because PWAs are built around the concept of "offline-first", they are great for emerging markets, like rural communities, where internet connections are less reliable. They’re also great for people on the go, who may go in and out of internet connectivity throughout their day. The goal was to build a Starbucks PWA that would allow customers to browse the menu, customize their orders, and add items to their carts, even if they weren't online.
Expert solutions for complex software problems
Starbucks Progressive Web App
- Create a performant Progressive Web App with dynamic functionality that feels native, despite being on the web platform
- Build a user-friendly ordering system that accounts for complex business logic and works smoothly throughout the entire ordering process
- A fast, performant, intuitive PWA that looks and feels like a native app
- Emerging markets will be able to utilize the new web app even without consistent internet access
- Customers can customize their food and drink orders seamlessly
- The new GraphQL layer has made it possible for Starbucks to use consistent business logic and data across all platforms
Prix.ai Dynamic Pricing Dashboard
Prix.ai is a startup focused on delivering dynamic pricing structures. Their product is currently geared toward the hotel industry, and they are working toward a technology for dynamic pricing in any industry. Prix utilizes a complex predictive algorithm to suggest the best price based on demand, allowing their customers to predict the future with a level of accuracy that is outperforming other industry-leading statistical models. Because the data is so complex, Prix struggled to find a user-friendly way to display it in their dashboard. They asked Formidable to utilize our data visualization and React expertise to create a polished front end interface.
- Create a polished front end interface that allows customers to easily parse complex dynamic pricing models
- A polished, user-friendly dashboard interface that utilizes custom data visualizations to display complex data in an easily-digestible format
- With Formidable’s training, Prix’s developers now have the skills they need to maintain and update the React-based dashboard
When Microsoft needed a reliable, scalable internal web application built quickly, they turned to Formidable. The app, called Hackbox, is a web application for easily running hackathons within Microsoft. Hackbox is used to manage the annual company-wide hackathon, //oneweek, and also supports custom hackathons both big and small at any time.
- Build a reliable hackathon app that handles intense periods of traffic
- Unexpected executive attention drew more traffic than anticipated
- 6.5 million API requests in a 2.5 week period
- Up to 60,000 requests per hour
- 99.9% API availability
- API requests had a TP90 of <300ms
Style Guides: Starbucks and Walmart
Starbucks and Walmart are both huge organizations. Their org charts are made up of lots of teams, and these teams all write different applications. Both companies were encountering issues with consistency - if they changed a button color in one place, it might not be reflected everywhere else in the project. Efforts to keep things consistent were tedious and time consuming. It was hard to communicate changes across teams, and when the changes were communicated, the solution was often to hunt down every instance of a UI component and manually change each one. Both companies brought in Formidable to find a better solution.
- Create style guides that can be used across all teams using React to keep branding up-to-date and consistent with less time and effort
- Scalable and maintainable style guides
- Reusable style code with reusable components
- Simplified code base
- Improved accessibility
- Consistent user experience
Starbucks Store Locator
- Build a Store Locator app with fast load times and improved SEO
- Load time decreased significantly; instead of loading piece by piece, the store locator now loads immediately.
- Improved user experience, particularly for mobile users
- Simplified and improved SEO
Walmart React Native Pharmacy
Walmart had an iOS app built as a hybrid of native and webviews. The performance of the app was less than satisfactory - it was slow to load and the hybrid setup kept it from feeling like a true app. Walmart was happy with the performance of the native components of the app, but the webviews needed to go. Walmart worked with Formidable previously to update portions of their website in React, so they called us back in to help get their app up to speed.
- Improve the speed, performance, and user experience of the Pharmacy portion of the Walmart iOS app by converting webviews to React Native
- Train the Walmart Mobile team on best practices for React Native
- Successfully rebuilt and reintegrated the Pharmacy portion of the Walmart app with React Native
- The new Pharmacy app runs faster, performs better, and has improved overall user experience
- Brought the Walmart Mobile team up to speed on best practices for React Native
Walmart knew they needed to modernize their website to improve user experience and increase revenue. They decided to build out their website with React, expecting the change to increase traffic substantially. Unfortunately, they found their extensive update yielded a traffic increase of just 1-4%, which indicated that their load speeds hadn’t improved as much as they had expected. Walmart knew there was room for improvement, so they called in Formidable to get to the bottom of what was slowing things down.
- Work within an existing app to increase the speed of the Walmart.com Checkout system and increase conversion rates
- Reduced the Walmart checkout bundle of code by nearly 50%, improving speed and performance
- Established best practices for code for the Walmart team