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

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.