Dick's Sporting Goods

Baseball Gear in Action

Taking the field. As convenient as online shopping has become, there’s still something special about seeing  a real product “in action”. Finding a way to bring that product tangibility online was the goal for our 2014 Baseball campaign for DICK’s Sporting Goods (DSG) . With the season right around the corner, DSG needed a way to get the word out about their new baseball gear — and it had to be something more attention getting than just another catalog. Our solution to this dilemma was to create a video “lookbook” — essentially a catalog come-to-life, made up of interactive full-screen video that makes the player’s view of the game the shopping experience.

  • Challenge

    Create a shoppable, product-driven platform that grabs the attention of DSG’s target audience: 16-to-25-year-old baseball-loving guys.

  • Solution

    Create an online environment that lets users step into the game and experience the next best thing to being on the field themselves.

  • Results

    An interactive video lookbook featuring products “in action”. Visitors spent more than 4.3K total hours exploring, sharing and shopping across desktop and mobile.

How we did it.

  • A blend of digital UX and film storyboarding

    We used storyboards to map out the scenes and assumed any site UI would be subordinate to the film experience. This forced us to concept simple interactions that would augment the video, instead of driving it.

  • A big and small idea

    We needed a concept that could span from mobile devices to a 42” in-store touchscreen display, so focused our efforts on creating one set of interactions that would work across all views and added design complexity iteratively from there.

  • Video and Interactive Hotspots

    We featured six on-field player positions and pinpointed the moment before the play’s ultimate play climax to transition to a slow motion sequence with interactive “hotspots” atop the player’s gear; each hotspot opened a product description and a link to buy.

  • The site sports some pretty cool features including a countdown “flip-clock”, a 3-D field navigation and fun animations and transitions.

    Make a Flippin’ 3D Countdown with CSS & JavaScript
    Doug Avery, Front-End Development Director
  • Paid media was an important part of driving traffic to the site. Early on, we saw that traffic from paid media engaged with the site at levels notably lower than than those from organic searches. We worked with DSG to re-align the media buy resources which resulted in a 59% drop in bounce rate, a 215% improvement in average session duration, and a 36% increase in conversions.

  • The video needed to be fullscreen on all devices, so we devised a scaling solution with CSS transforms to address the variety of displays being targeted.

    Going Fullscreen: Scale and Define Focal Points for Responsive HTML5 Video
    Chris Manning, Front-End Developer