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.
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.
Create an interactive experience to highlight the diverse pitching styles of the Arizona Diamondbacks using existing photo, video, and data-driven content.
Develop a highly-sharable experience that brings baseball fans directly into the bullpen to uncover the precision of an MLB pitch.
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.
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.
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.
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.