ONLINE AND BROADCAST EXPERIENCE | NFL UP!

Summary

NFL Up! is a feature on NFL.com that allows fans to view videos and step-by-step instructions of their favorite players' workouts. The goal was to provide fans with an engaging, fun, and usable experience, driven by customer data. The NFL product team needed to understand the type of football fans who would watch the NFL Up! program and seek out online videos of player workouts. To fill this gap, I spoke to 14 football fans, and attended the Dallas Cowboys training camp in Oxnard, California, to speak to fans and conduct an informal survey. The insights gleaned from these interviews helped to hone the team's vision, both strategically and tactically, and shaped the design of the wireframes and interactions. The design process was accelerated to meet the deadline of launching NFL Up! a couple of months before the start of the football season. The final product (which also featured a broadcast component on NFL Network) won an Emmy award for its innovative design.

The Challenge

NFL Up!, a feature on NFL.com (desktop and mobile), allows football fans to view intensive videos and step by step instructions for their players’ favorite workouts. It was designed in 2013 by the team at NFL Media to tie into a television program called NFL Up! that aired on the NFL Network. The goal was to use NFL’s access to the players to feature a fan experience that the league’s competitors (such as ESPN and CBS Sports) couldn’t match. I was the lead User Experience Designer on the project and worked closely with the team to develop an experience that would be engaging, fun and usable.

Research

The NFL product team felt that in order for this feature to be popular, we needed to get a very clear understanding of the type of football fan who would watch the NFL Up! program and seek out the online videos of player workouts online. To start, the NFL Network side had a great deal of demographic information about who was watching their programming. But while demographic data gives a great picture of the age, gender, race, and location of fans, it lacks one piece that is needed for user experience analysis: behavior.

Many of my co-workers at NFL fit the profile of super fans who would watch the network and be interested in the fitness routines of their favorite players, but since they were insiders they didn’t make up a usable sample group. In order to fill in this gap in data, I was tasked with determining a way to speak to football fans who fit the demographic profile of NFL Network viewers and active online users. I needed to find real football fans who would have opinions on this feature.

My approach was two-fold:

• I enlisted a market research agency to help me recruit 12-15 football fans who fit the demographic profiles provided by the network.

• I attended the Dallas Cowboys training camp in Oxnard, California to speak to fans and conduct an informal survey to understand their attitudes about their favorite players and their exercise routines.

I individually interviewed the 14 football fans who were recruited by the outside agency, questioning their online habits and their attitudes about their favorite players. In addition, I asked them about their fitness habits and whether or not they were regular consumers of YouTube videos.

There were a couple of very interesting pieces of data that came from these interviews:

1. Fans feel a lot of affinity with their favorite players and like to know more about them personally 

2. A quarter of the sports fans I interviewed played sports (albeit informally) and are interested in how players keep fit

3. Half of the people interviewed were aware of or had actively watched YouTube fitness videos

The in-person “informal” interviews at training camp were even more interesting. Of ten people surveyed, 7 said they follow their favorite players fitness closely. Several of the interviewees said they also incorporate “football training moves” such as running backwards uphill or repetitive squats into their current fitness routines. All of the interviewees admitted that even if they are not in prime shape like their favorite players, they’re interested in seeing how they practice and achieve their goals.

Coming back to the product owners and TV producers with these insights helped to hone the team’s vision both strategically (i.e. what language to use when marketing to fans) and tactically (i.e. how would fans expect to find the content that interests them.) Based on this information, as well as the nearly completed requirements, I started designing the wireframes and interactions for NFL Up!

Design

The design process was accelerated, since the goal was to launch NFL Up! a couple of months before the start of the football season. I had about 6 weeks to move from wireframes to visual design. This turned out to be enough time since the upfront research I’d performed helped to build consensus across the internal team about the type of experience fans would use. The NFL has strict guidelines for visual design and branding, and I also wanted to reinforce the existing interaction design patterns on NFL.com. I went back to explore the areas of the site where player information is housed, and used that as a model for how users could search and view videos on NFL Up!

The product team met weekly for participatory design meetings to go through the mobile and desktop wireframes. I relied on what I’d learned interviewing fans but also listened closely with product owners who safeguard the TV partnership and sponsorship requirements. The meetings were lively, with a number of opinions being shared about how best to present the videos and additional content. Keeping them “participatory” meant that I was actually changing the wireframes within the course of the meeting to demonstrate how they would impact the fan experience. This helped my product counterparts to understand and approve the design choices being made. Overall, the weekly meetings lent momentum to the product design process and helped the team to meet its deadline.

Once the mobile and desktop wireframes were approved by all of the team members, I collaborated with a development resource to build an interactive desktop prototype with embedded YouTube videos so we could see exactly how the interactions would work. I also started working with an NFL.com visual designer so he could brand the experience in the prototype.

Once the desktop prototype was fully designed, I conducted a usability/experience exercise with a dozen football fans by posting the prototype on UserTesting.com. Since the process of selecting videos and viewing them is pretty straightforward, I paired the prototype testing with a Google Survey to capture viewer preferences about the type of content that would be most compelling and how they would use it. Although we only surveyed 15 users, this testing helped identify some issues with language, and we gathered some insights into what types of videos were most popular.

The prototype showed a lot of NFL Up! functionality, but I still had to ensure that every interaction and error state was defined. So I wrote functional specifications for the developers. NFL was using in-house developers as well as offshore resources to create the code for NFL Up! Development started while I was writing functional specifications, so I also had daily stand-ups with the on-site developers, where we could talk through open issues. As I caught additional gaps in the design I resolved them and documented them, finally posting the specifications online on Confluence so both local and remote developers could reference them.

Development started while I was writing functional specifications, so I also had daily stand-ups with the on-site developers, where we could talk through open issues. As I caught additional gaps in the design I resolved them and documented them, finally posting the specifications online on Confluence so both local and remote developers could reference them.

Impact

Additional design work by Isaiah Davis

In accordance with my non-disclosure agreement with NFL, I have omitted confidential information from this case study. All information in this case study is expressed by me, and does not necessarily reflect the views of NFL Media or any of its employees.