A Quicker Cup o' Joe

Starbucks Store Locator

Double tall mocha with an extra pump of superfast load time and React on top

A.The Set Up

Starbucks, like all great companies, wanted to make their website faster and better for the end user. After a lot of research they had decided that React.js and universal rendering were going to be the best options to create the experience they wanted.

The biggest challenge was not having a team that had done this before—they needed help getting started, and that is where we came in.

Show Me Proof

Whenever you want to take on a big re-architecture project, smart engineers know that it’s always better to start with something small and build from there. By finding a part of the website that we could use as a proof of concept, we could make sure that this would work, while also getting the Starbucks’ team familiar with the process and development style.

And, if it all went well, we would move forward and build out the rest of the site with React.js.

Check, and Check

Given these parameters, the store locator was an obvious choice – the code was isolated (allowing us to make changes without touching a lot of other pieces), and the functionality and requirements were clearly understood (meaning we didn’t have to involve a lot of designers and product people to know we would get the UX right).

And so we started working on implementing and refining the new Starbucks store locator.

B.How Did It Go?

Over the course of a year, our team worked at both Starbucks’ headquarters and occasionally the Formidable office. The old Starbucks store locator gave rough requirements for what it needed to do and how it functioned, with the design and architecture being defined over time. We started working on a prototype and tested out different interaction models with different versions of static content. From there, we went on to build out the real thing, which went quickly.

C.The Results Are In
A learning process

A key part to this engagement was overcoming the learning curve and workload for Starbucks—because Starbucks is not a heavy JavaScript organization, we mentored the developers and helped with their workflow and productivity, teaching best practices and implementing new process (including rolling out new tools like git and Jira).

As fast as lightning

On the technical side, the app turned out to be a whole lot faster. With the React version of the store locator, the load times decreased significantly. Instead of the page loading piece by piece, now the store locator loads immediately—which is a much better user experience, especially for people using mobile phones.

Improved & simplified SEO

Before, Starbucks had to render several other static versions of store pages for local SEO. With the new store locator, those pages are all contained within the new application so it simplifies and improves their SEO efforts.

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.