PORTFOLIO

It’s August 2018 and in mere weeks Nike is preparing to launch its biggest campaign of the year, celebrating 30 years of “Nike Just Do It.” Leaning into controversy, Colin Kaepernick is tapped as the first face of the campaign. Nike enthusiasts are invited into the website with a fully interactive experience where they are tasked to enter a dream that gets represented on the website with other crazy dreamers. But the site is still a dream and the deadline is only two weeks away. With a need to elevate the customer experience to full interaction in a premium way, Matter Supply developers are searching for a solution other than a custom build. And with Gatsby, they find a way to build an interactive web experience with built-in performance. In Nike speak, Gatsby helped them just do it.

Two Weeks to Launch

Matter Supply and its principal, Marc Ammann, needed a solution to a problem posed by one of the biggest and most leading-edge companies in the world, Nike: “create an engaging user experience where people can be part of something alive and interactive.” The Matter Supply team wanted to explore the outer limits of web technology but had no time for a custom build. They needed a tool that would come with performance already built-in and be flexible enough to build a dynamic web experience. As a small, but flexible digital company with deep roots with Nike creative, they were handed the reins to bring the “Dream Crazy” campaign to life.

But with only two weeks to build the new website and a lack of tools to support highly interactive experiences, Ammann needed a new approach. Then he remembered his work with another website where they launched a product in mere hours using Gatsby. With built-in performance, they could focus on building a dynamic, engaging web app because Gatsby took care of everything else. With Gatsby as the foundation, Ammann and team were able to produce a fully-immersive website that feels like an app.

The Website Toolbox

“If you go into space and take a wrench, the wrench has to work!” Marc Ammann, Matter Supply Principal

Matter Supply is an agency that specializes in bespoke experiences for their clients so it’s even more important they have a standard set of tools that give them a solid foundation to be creative. Using Gatsby, which optimizes websites and web apps for performance, meant they could focus on doing things that haven’t been done before. It gave the team time to create rather than labor over optimizing image files or decreasing page load times.

Nike needed a website that created an immersive experience for the visitor, but it’s tough to make engaging experiences while shipping quickly as it often creates a lot of technical debt and requires doing one-off work. Gatsby solved this problem by giving the team an easily repeatable foundation for building a dynamic web app with performance built-in. The team didn’t have to worry about custom code. They could build modules (with React) and pull in content from a CMS or elsewhere and Gatsby handled it all seamlessly. And with Gatsby, there are no servers or databases to manage so you don’t have to worry about anything going down.

“Working with variables you don’t control makes things crazy, so your tools have to perform. Reliable tools make me sleep so much easier at night.” - Marc Ammann

With only two weeks before the Nike launch, Ammann had to go with what he knew, and he knew Gatsby worked. They could build well, have in-house expertise, access to a responsive community, deploy, and all with almost no bugs. In other words, Gatsby was his wrench - and it worked.

“If you go into space and take a wrench, the wrench has to work!” - Marc Ammann, Matter Supply Principal

Since Matter Supply is in the business of building websites for clients, Ammann now looks to Gatsby as being fundamental to their approach. “We need a toolbox that we use all the time. And Gatsby gives us a stable base that allows us to dream big.”

Building Dreams with Gatsby

This was Nike’s biggest marketing push of the year - with controversy as the headliner. They anticipated record traffic -- and they got it. Within the first two weeks, they had 250,000 hits and captured thousands of dreams. The experience was clean and simple - enter your dream and see it join others as the Nike swoosh emerges, built from the collective dreams of everyone. Share your dream to social channels directly from the website. The website creates an engaging experience rather than a flat, static site with no interaction.

Matter Supply created this immersive experience with Gatsby, even on a compressed timeline. Building the website with Gatsby was so easy the team was able to accommodate a short development window of just two weeks. And since Gatsby gave them performance out-of-the-box, it allowed the team to focus on making the website an engaging experience rather than having to spend the time optimizing for performance. Basically, Gatsby let them fulfill their crazy dream.

Before the site launched, the Nike team had been constrained by other web technology that impacted how they could fulfill their ambitious vision. But after the Gatsby site launched, the Nike team can build according to their brand strategy rather than thinking about technical limitations.

Gatsby: A Guiding Light

When Nike handed Marc Ammann and team the assignment to build the future for Nike, he didn’t hesitate to use the one tool he knew he could count on - Gatsby. With out-of-the-box performance, server-side rendering, and providing a foundation to build engaging websites that feel like much more than a website, Gatsby helped propel the Nike “Just do it” site to another level.

“Gatsby is a guiding light in the industry.” - Marc Ammann

And Ammann was so impressed with Gatsby that he’s now using it as a standard tool in his technology toolkit to build compelling and engaging web experiences for clients. With Gatsby as the foundation, Ammann, Matter Supply, and the Nike team are seeing their crazy dreams come true.