Nike Skateboarding Website

We designed and built the new Nike SB website to push the boundaries of design while creating a disruptive, yet seamless, experience for the consumer

- Owen Jones Team

Can you briefly describe your project and the concept behind it?

Nike Skateboarding (Nike SB) has an online consumer shopping experience through Nike.com, a sizeable archive of skateboarding videos housed on a YouTube channel, and a short form storytelling channel with the Nike App, but no digital home that can flex to support all of the brand’s content, partner athletes and local retail partner stores. NikeSB.com was created to be the brand’s central digital content hub to serve and inspire the skateboarding community while providing the brand the flexibility it needed to accomplish its business goals. The inspiration was a wide collection of other brand websites doing interesting things promoting product, branded editorial content, or some mix of both.

Talk about your initial prototypes. How did those ideas change throughout design and execution?

Owen Jones’ initial moodboards and design explorations were intentionally pushed to every limit we could think of. It’s rare that you get to work with a client who asks, “Can we make this like 25% crazier?,” but that’s exactly how our relationship with NikeSB unfolded. We wanted to see how far we could test design sensibilities, knowing that we would have to build a flexible back-end CMS that would compliment it. In the end, we created a website that balances whimsy, fun and the need to serve targeted consumers with a mobile-first experience that consistently delivers fresh content.

What influenced your chosen technical approach, and how did it go beyond past methods?

After undertaking a comprehensive digital ecosystem discovery that included understanding Nike’s own internal systems, identifying Nike SB’s target audiences, Nike SB’s desired user journeys and outcomes for these audiences per acquisition channel, we landed on the technical solution to build the website using ReactJS powered by Craft CMS. Previously, we had built a few sites using a JS framework which utilized a static data set; but this was the first attempt to integrate React with a full-featured CMS. This meant creating a custom REST API to distribute the data to React and making smart decisions about caching, API segmentation, and React tooling to support site performance and SEO.

What breakthrough or “a-ha” moment did you experience when concepting or executing this project?

The breakthrough or “a-ha” moment for the Owen Jones team came after we mapped out Nike SB’s targeted consumer journeys. These User Journeys showed how audiences might engage with the Nike SB website based on their acquisition channel, mindset, and desired goals. After this breakthrough, we designed and built the new Nike SB website to push the boundaries of design while creating a disruptive, yet seamless, experience for the consumer that enhanced existing shopping and product browsing behaviors through richer content in the form of athlete pages, video stories, “behind the scenes” athlete and product stories, and a skate shop locator.

What web technologies, tools, or resources did you use to develop this?

This project was built primarily with ReactJS and Craft CMS. Craft acts as a headless CMS and distributes content to React via a customized REST API. This API supports caching and proper segmentation for the CMS data and we’ve set up image optimization on the CMS side which allows us to serve the best image size for each user’s device. The React app uses a server-side rendering tool called Razzle and runs on a Node server maintained by PM2. We also created a custom Google Maps integration on the “Skateshops” page, which integrates with data from the CMS and makes use of several different Google APIs.

How did you balance your creative and technical capabilities with the client’s brand?

Immediately after being awarded the work, we collectively went through a discovery process with our client team that identified the key target audience profiles we wanted to reach and engage through the new Nike SB website, along with a consumer journey mapping exercise that showed how we were going to reach and serve these audiences the content they want to see, in the format they want to see it. By doing this, when we entered the design and build phase of the work we were able to balance our own creative ideas and technical capabilities with a fair representation of the client’s brand by always keeping who the website was for in the forefront of our decision-making.

How did the final product defy your expectations?

Owen Jones knew when we started this journey with Nike SB that we had to deliver a website that balanced whimsy, fun and interactivity with the need to serve target consumers a mobile-first experience that keeps content fresh while delivering product, athlete and retail store information through an easy-to-navigate user experience. After going through our detailed strategy, design and development process that took things from wireframes to final product, we felt we were able exceed our own expectations by delivering a prescriptive but flexible front-end design system with a flexible and easy to author back-end CMS that supports most formats of branded content.

Why is this an exciting time to create new digital experiences? How does your team fit into this?

This was an exciting time to create a new digital experience for Nike SB in that the brand had been looking to fill its need for a comprehensive digital home for all of its content for a while before Owen Jones became involved. As a result of this pent up demand, once Owen Jones was awarded the project we were able to hit the ground running with the full support of the Nike SB team and Nike’s technical teams. As time went on with the project our two teams blended together so nicely that at times it was hard to recognize where the Owen Jones team stopped and the Nike SB team began.

See More Projects

Lyft - America Is An Idea, Not A Geography

Hello Monday and Even/Odd

Lyft - America Is An Idea, Not A Geography

View the Project
Life Lolli - A lollipop designed to save lives

BBDO Duesseldorf GmbH

Life Lolli - A lollipop designed to save lives

View the Project
Mapping Chiense Art, 1972–2012: Selections from the M+ Sigg Collection

HATO

Mapping Chiense Art, 1972–2012: Selections from the M+ Sigg Collection

View the Project
World Press Photo: Connecting the world to the stories that matter

Emakina

World Press Photo: Connecting the world to the stories that matter

View the Project
Load More Projects