Owen Jones and Partners
Nike
Nike
Skateboarding Website
Best Homepage /
People's Voice Winner
Owen Jones and Partners
Best Homepage
People's Voice Winner
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
Q: Talk about your initial prototypes. How did those ideas change throughout design and execution?
A: 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.
Q: What influenced your chosen technical approach, and how did it go beyond past methods?
A: 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.
Q: What web technologies, tools, or resources did you use to develop this?
A: 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.
Q: How did you balance your creative and technical capabilities with the client’s brand?
A: 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.
Q: How did the final product defy your expectations?
A: 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.