Running

Dick’s Sporting Goods asked us to create a product-driven and highly shoppable site that would also serve as an engaging piece of their branding outreach to runners. We met their challenge with a video lookbook that creates an immersive and cinematic user experience to take online shopping to the next level.

We decided to create a cinematic site experience that draws users into an immersive video lookbook. It uses aspirational imagery of runners wearing featured Dick's products. 

Throughout the looping narrative, a single click on the video takes the user to a paneled product selection view. Choosing a panel transitions the user to a video vignette of that product.

Each vignette highlights detailed footage of the product in motion. It also provides links to share and buy the item on the full e-commerce site. 

Because virtually every page features full-screen product video, we wanted to make sure we started with content that met our narrative and technical needs.

We ended up storyboarding the entire site and working alongside the film production team to provide art and photography direction at the shoot. This level of collaboration put us ahead of the game when we started to build out the site.

We wanted to integrate products into the emotional narrative of the site and not just tack on a shoppable feature. Providing each product with its own full-screen video produced some exciting results.

First, the product level of the site feels like a natural extension of the video narrative — almost a behind-the-scenes peek at what’s happening in the sequence as a whole.

And second, the individual product videos allow visitors to see detailed views of material, color, and construction. They can watch items in action and on runners, which creates a shopping experience that’s as close as they can get to having the product in their own hands.

We also faced the issue of running the site on mobile devices that push video content to a native player. We decided to serve mobile users separate site content with videos they can opt to select and view.

To elevate the site’s feel and user experience, we focused on creating smooth and seamless navigation by using CSS transitions and transforms to animate content between pages.

We also developed some unique and interactive diamond-shaped elements. Because everything in CSS is a block element, to create diamond shapes that can hold text and images we rotated block elements 45 degress using CSS transforms. After creating our diamond elements we applied CSS effects so they appear to animate when scrolled over. 

We discovered that it is possible to combine the drama and story of a video narrative with the interactive content of a shoppable product site. We are excited to provide Dick’s Sporting Goods with a new online experience that seamlessly melds emotional brand storytelling with e-commerce shopability.