Loading ...

Responses by Studio 28K and ESPN.

Background: In 2022, National Hockey League (NHL) superstar Alexander Ovechkin joined the elite NHL 800-goal club, a milestone which has been achieved by only two other players in hockey history. ESPN wanted to commemorate this rare achievement and contacted us to help create an innovative, immersive digital experience beyond anything sports fans have seen before.

This mobile-first experience targets a general audience to include all sports fans. It immediately launched after Ovechkin scored his 800th goal on ESPN’s broadcast.

Larger picture: While the documentary-style video was produced specifically for the interactive experience, a segment was featured on ESPN’s NHL show The Point in lead up to the record-setting game, and design elements were used for graphics on the sports network’s subscription channel ESPN+ to promote the countdown—or rather, count up—to 800.

Design core: The concept was simple: create an interactive documentary telling the story of Ovechkin’s career and let fans participate in the journey. We built an interactive timeline that enables fans to dive deeper into rich content about Ovechkin’s journey—his shooting technique, friends and foes—and interact with real-time data.

Each chapter is uniquely built and designed to tell the best possible story. This was made possible by joining the world-renowned content team at ESPN with their exclusive athlete access and world-class storytelling.

Favorite details: Making an interactive documentary in which fans can immerse themselves in the experience—for example, interacting with data visualizations instead of only looking at them. At Studio 28K, we believe combining interactions like this with storytelling makes for a more memorable viewing experience. We appreciate ESPN for sharing the belief.

Challenges: Keeping up with Ovechkin! He just kept on scoring, which made our timeline to finish the project shorter with each game. In the record-setting game, he scored three goals, which can often take a player weeks to achieve rather than mere minutes.

Time constraints: The experience ended up as we intended, but there is always room for improvement in any project. We had planned for more interactive elements and animations, but Ovechkin just kept scoring quicker than anticipated. Better compromise than be late to the game—no pun intended.

New lessons: We were once reminded to always look for a different angle. We have devoted Studio 28K to making memorable experiences, and finding the right angle is probably half of that work.

ESPN’s extensive NHL video rights provided access to all of Ovechkin’s goals over his eighteen seasons, so we started out with that as our focus: show all 800 videos because they are impressive and immense. However, we quickly realized that showing all 800 goals wasn’t solving a problem or telling a story—it wasn’t the right angle.

That’s when we realized that by combining our strengths with ESPN’s, we could create a much more memorable story by approaching this from an unexpected angle. The idea was born!

Navigation structure: While the experience is driven by a video, the navigational structure provided the option for fans to do either of two things: lean back and watch or engage with the content by jumping in for richer, deeper reporting and contextual information.

The navigation needed to be clear enough to be spotted as the key feature but subtle enough to not distract from the story. We even leaned into the colors of Ovechkin’s team to make the navigation blend in appropriately with the content. Go Caps!

Technology: The site was built using typical front-end languages although a GSAP timeline was used to implement a coded layer on top of the video, enabling the responsive design of elements such as interactive data charts along with traditional television broadcast elements like chapter titles, closed captions and lower thirds. The timeline allowed for fast forwarding and rewinding of animations to seamlessly tie into each video frame.

Special technical features: One interesting element was the automatic management of the video presentation to always provide the best viewing experience no matter the device or window size. The video covers the window until the cropping starts to impact the presentation. At that point, the video is contained within the window, and blurred extended bars fill in the remaining space. Using the window’s aspect ratio to swap between a center-aligned 1:1 and a broadcast-style 16:9 aspect ratio is key to making the experience as ideal as possible for viewers.


Browse Projects

Click on an image to view more from each project

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Already a subscriber or have a Commarts account?
Sign In

Get a subscription and have unlimited access
Already a subscriber?
Sign In