Anatomy of a Pitch

ESPN was in search of an interactive concept. They were looking for a new way to highlight the individual pitching styles of the Arizona Diamondbacks using an existing lineup of photo and video assets. We took the project — which was initially planned as a copy-driven site with interspersed media features — and developed it into a responsive, fullscreen video site that dissects each player’s signature pitch using four unique and interactive perspectives.  An early ESPN feature site, Anatomy of a Pitch introduced a new way to situate feature sites within the ESPN brand.

  • Challenge

    Create an interactive experience to highlight the diverse pitching styles of the Arizona Diamondbacks using existing photo, video, and data-driven content.

  • Solution

    Develop a highly-sharable experience that brings baseball fans directly into the bullpen to uncover the precision of an MLB pitch.

  • Results

    A highly interactive, content-rich site that overlays photography and video with frame-by-frame throw mechanics, strike zone heat-maps, and pitch facts, earning it 19.7 million Twitter impressions within a month and over 1,400 Twitter shares.

How we did it.

  • Visual Design

    With a visually strong lineup of photo and video assets, and a request from ESPN to keep the design close to their existing brand standards, we decided to keep the aesthetic treatments minimal and allow the audience to focus on the content.

  • Responsive Development

    To stay sensitive to league dynamics, we displayed the pitchers in a responsive grid to keep all players in view and without hierarchy, even on small screens.

  • High-resolution assets can wreak havoc on site loading times. To keep the experience mobile-friendly and continuous, we used a preloader to prevent re-downloading media as users navigated through the site, which alongside our video optimization, created a seamless pagination experience.

  • We wanted to include strike box heat map visualizations for their high data value, but their lack of style was a problem. Our solution was to apply the open source project Close Pixelate to the images, which let us to include the heatmaps and maintain a unified aesthetic.