Starbucks Store Locator

Using React and Universal Rendering for Faster Load Times, Improved SEO, and Better User Experience
Background

Starbucks was faced with a set of problems that many companies can relate to: they wanted a faster website for better user experience, and they wanted to improve their SEO. They had identified that React and universal rendering would help them achieve their goals, but Starbucks didn’t want to jump in head first on their website re-architecture since they weren’t a JavaScript heavy organization. They called in Formidable to analyze the website, select a section to rebuild as a proof of concept, and get their team up to speed on JavaScript best practices. The Store Locator was the logical starting point since its code was isolated and its functionality and requirements were already understood.


Challenge
  • Build a Store Locator app with fast load times and improved SEO
  • Bring the Starbucks team up to speed on JavaScript best practices
Solution
  • Prototype and test out different interaction models with different versions of static content
  • Utilize React and universal rendering to decrease load times
  • Combine several existing static versions of store pages into one app to simplify and improve SEO
  • Mentor Starbucks developers in JavaScript best practices, processes, and tools
Results
  • 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
  • Starbucks developers confident working with JavaScript
Benefits
  • Project created proof-of-concept for full website re-architecture with JavaScript, which would result in faster loading times and better user experience across the board
Challenge

The ultimate goal for Starbucks was to re-architecture their entire website with JavaScript, but they didn’t want to jump in head first. Formidable carefully analyzed the website and decided that the Store Locator would be the best place to start. The Store Locator code was isolated, allowing changes to be made without affecting the rest of the website, plus the functionality and requirements were already understood. It was the perfect candidate for a proof-of-concept project.

While updating the Store Locator app to have faster load times and improved SEO was the main challenge at hand, Formidable 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, 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.

Solution

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 Formidable team worked closely with the Starbucks developers, acting as mentors to improve their confidence with JavaScript. Formidable helped with workflow and productivity, best practices and process implementation, and even rolled out new tools for them like git and Jira.

Results

The update to the Store Locator improved load times significantly. Instead of slowly loading piece by piece, the store locator now loads immediately. The faster load times improved user experience dramatically, particularly for mobile users. By updating the Store Locator from multiple static sites to a self-contained app, Starbucks’ SEO efforts were simplified and improved. Through Formidable's training and mentoring, the developers at Starbucks now have the confidence to maintain and update the Store Locator and utilize JavaScript for other projects.

Benefits

The success of the Store Locator gave Starbucks the confidence they needed to re-architect their whole website in JavaScript. This will be a big undertaking, but will result in faster load times and better user experience site-wide.

Conclusion

With a faster Store Locator in place, and a team of developers trained up on JavaScript best practices, Starbucks is now slated to improve user experience across the board. Having a great Store Locator ain’t bad either.


We Are Formidable

Formidable is a Seattle-based consultancy and open source shop, with an emphasis on Node.js and React.js. We deploy a mixture of consulting, staff augmentation, and training to level up teams and solve engineering problems. Whether it’s transitioning walmart.com to React, moving speedtest.net off Flash, or helping a startup build and scale an MVP, we’re ready to help teams of any size.

Interested in hiring or working for us? Get in touch or view our careers page.