Wednesday, September 22, 2010

Sunday Night Football Extra 2010: Back and Better than Ever

I'm proud to announce the launch of Vertigo's latest live HD video experience: NBC's Sunday Night Football Extra 2010! You can check out the live action every Sunday Night this season.
We first worked with NBC last year, building the Sports Emmy®-nominated SNF Extra 2009 application. We've since partnered with NBC to build the 2010 Vancouver Winter Olympics video experience, as well as this year's US Open (golf) and Wimbledon live HD video players. Vertigo's team for this project has returned to Sunday Night Football again this fall with the ambition to design the most engaging live sports experience ever created for the web.

A great way to get a feel for the application in only a couple of minutes is to watch this video, which provides a quick high-level run down of all the features in the application. For some more depth, let's crack open the application, take a look at some of the goals we set out with, and discuss how we solved some tricky design challenges to create an industry-leading live video experience for the web!

Great looking, High Definition video
Using Microsoft's IIS Smooth Streaming technology and working with our partners at iStreamPlanet and Akamai, the video you see in this player will once again serve as the standard for clean, smooth, multi-bitrate, adaptive HD video on the web. The core video player is built using the open source Silverlight Media Framework, which Vertigo developed in cooperation with Microsoft.

Picture-in-Picture (PIP)

One of the major goals for this project was to make the entire application more engaging to users. What better place to start driving engagement than in the actual video being consumed? The PIP provides the following:
  • The PIP control allows viewers to see the action from an alternate camera angle while watching the simulcast feed in the main window.
  • The menu on the PIP provides a streamlined way to switch to another camera angle, or to swap the main video into the PIP and start watching an alternate angle in the main window.
  • Great viewing experience: This year, we decided to make the PIP a first-class video player in its own right.
  • Full Screen Scaling: To provide a great experience on televisions and large monitors, the PIP will scale up in size when users move into full screen mode. This keeps the PIP relevant, even from across the room.
  • Draggable: Don't like where the PIP is positioned? Drag it anywhere you'd like!
  • Collapsible: If you'd like a totally clean video experience, you can use the Minus button to collapse the PIP and remove it from your field of view.
The Ultimate Timeline
One reason that Sunday Night Football is such a fun event to work on is all of the interesting data we have to work with. One of the biggest challenges we faced was how to visualize all of that data without creating a noisy or distracting user interface. We also had to envision how to allow users to socially interact with all of this data, and how to create data of their own that might be interesting to their own social circles. Here's how we addressed these challenges:
  • Positional Thumbnail Preview: When mousing over the timeline, the player displays a preview image of what's happening in the video at the point you're hovering. This allows users to quickly browse an entire game and look for interesting action.
  • Play by Play Data: We use team-color-coded markers on the timeline to indicate when key plays occur. When mousing over one of the key play timeline markers, data from the NFL displays inside the timeline preview image indicating the details of the play that happened.
  • Deep Linking to Plays: Users can select any point on the timeline to share a deep link into that location within the video with their social network. This feature allows a user to brag to her friends about a big sack on a 3rd down on Facebook, or to tweet the location of a close-up shot of a player who attended her high school a few years ago on Twitter.

Flexible Video Modes

We have so much great functionality this year that we faced a major design challenge in deciding where to put it all! Job #1 of a good online video player is to provide big, beautiful video with minimal distractions and visual noise, but our audience of football fans also loves statistics, social interaction, highlight clips and updates from the sidelines. To have our cake and eat it too, we decided to create 2 video modes: "Big Video", and "Engage".
The application starts in Big Video Mode, where you get a large space to watch the action with optimal video size and quality.

Big Video Mode:

When you want to dive in to all of the additional content and fun features offered by the player, clicking the reveal button transitions to a (still very respectably sized) video window, exposing all the additional functionality. This approach allows interaction with the statistics and social features while still watching the video.

Engage Mode:

Multi-speed DVR Controls
To give our users full control over the action, we provide instant replay, slow motion, and 4x/8x fast forward and rewind DVR controls. Direct every play, see that last catch over and over, and even decide on that last penalty call for yourself!

Twitter Battle

When it comes down to it, football fans tune in to see a battle on the gridiron every Sunday. To let fans be a part of that battle, we included the Twitter Battle as a leading social feature.
  • Users are encouraged to Vote/Tweet for their favorite team.
  • "Tug of war" results are shown within the app
  • The Tweets contain links back to the player to garner larger audiences and add fuel the battle

Twitter Integration, Ask Mike Florio

Some of the most popular features in the 2009 SNF application were the interactive Chat with Mike Florio that allowed fans to see their questions answered in real time, and Andrea Kremer's tweets from the sidelines. However, those features were scattered across the application. To improve on the concept of interactive Chat with Mike Florio and tweeting with Andrea Kremer, we unified and aggregated all of the Twitter streams including: Q&A from Mike Florio, Andrea's tweets from the sideline, and even stand-out tweets from the fans in the Twitter Battle!

Highlight Clips

While SNF Extra 2010 gives users greater control than ever over their game experience, sometimes you just want a nice big thumbnail to take you to that last touchdown. NBC's editors can also use the Silverlight Rough Cut Editor to create drive cut-downs and other aggregated highlight content on the fly.


For those fans that love to keep up to date on all the details, the Statistics section provides in-game updates every 1 minute.

Team Effort 
I'd like to thank the entire team at Vertigo for all of your dedication, enthusiasm, and creativity in creating a beautiful, innovative piece of software. I'd also like to thank our partners at NBC Sports, iStreamPlanet, Microsoft, Akamai, Ascender, Inlet, and TweetRiver for your commitment and expertise that make the Sunday Night Football experience possible!