Select Page

MLBAM

NHL.com | NHL app

Project: NHL.com NHL app • 2018 • Role: UX Lead

The Challenge

Starting the third season of our partnership with the NHL our design team took shifted focus from NHL.tv, the subscription streaming service to NHL.com and the official NHL app. 

A strategic theme guided us based on user feedback, business viability and engineering constraints:

 

  • Capitalize on existing high traffic areas  by improving the video player experience.  
  • Bring back fans to the official NHL app by leveraging more of the game and player stats and stories that fans seek on our competitor’s products.

My Role

I served as a UX Lead across multiple features and was responsible for the overall user experience, partnering with a product designer and art director.  While I continued to deliver assets, my shifted to more strategic leadership, meeting directly with NHL stakeholders and execs. Additionally, I managed research initiatives with our fans, led workshops to ideate innovative features and supported rapid iteration through prototyping and testing.

I managed the UX design and research responsibilities for Mobile video improvements, gamecenter enhancements and sunsetting the NHL Arena app and integrating its features into the NHL official app. 

 

Foundational Research

In preparation for redesigning NHL.tv, I had conducted multiple rounds of interviews with fans, to learn about their NHL consumption across all media. For our design effort on the app and website the focus shifted from questions about watching hockey games to questions about a fan’s consumption of news and video, stats and other information related to their favorite teams.

The questions we wanted to answer:

What kinds of information do fans seek out prior to games, during game and after? What are their motivations for using the official NHL app/website vs other sports products or social media like Youtube, Reddit, Hockey­reference.com, Hockeydb? What are their patterns/rituals for checking NHL news throughout the day and where does our experience fall flat in these situations?

    • Hockey fans have many choices for viewing highlights during and after games and social media provides quick and easy access to big moments that the fanbase is talking about.
    • Fans will seek out stats and news in preparation for watching a game. Player stats enable fans to gauge the recent success and skills of their players as well as the opposing team.  Particularly with rivalries, fans are eager to learn about streaks or top performances.
    • Within the NHL app, fans want to watch more videos featuring their favorite team but also star players from around the league.

Improving the Video Experience

For the vast majority of fans, the app opened to the landing page featuring their favorite team. Fans expressed interest in watching more video, but video on Team Pages required scrolling or switching to a dedicated tab. Our team proposed video-centric redesign featuring a more playlist-focused video consumption experience replacing a one-and-done video viewing experience. 

Prior to exploring design concepts, I conducted a heuristic analysis of the existing experience to uncover usability issues we could address in the new approach. I created a deck to present my findings to the design team and NHL leadership to help (convince the team this was a worthwhile initiative).

 

An example of a concern that emerged following the expert review was the complexity of the user path to specific game data and video highlights we knew users were seeking.  The labelling was unclear and there were too many choices — Wrap, Watch, Box, Video — linking the user to various destinations. We hypothesized that poor information scent and choice paralysis were negatively impacting traffic.  

Based on our research with customers and prioritizing a key business KPI of increasing video views, we consolidated the main CTA into a single card, emphasizing the video corresponding to the game state (e.g. Re-cap video plays in a post-game state). Secondary links would drive to our subscription service NHL.tv and “Gamecenter” an experience where fans can follow the game with live data tracking,  view game highlights, player stats, etc. 

Improving the Video Experience

Another issue we observed both with users and as part of the heuristic evaluation was what we called a “one-and-done” or pogo-sticking video experience in the app and on web.

Users would select on a video tile and navigate to a video player page that felt very separate and void of context from the rest of the experience. Moreover, once the video played the user would need to close the player to reveal the next item in the row. We proposed numerous solutions of varying complexity and engineering effort.

Improving the Video Experience

Another issue we observed both with users and as part of the heuristic evaluation was what we called a “one-and-done” or pogo-sticking video experience in the app and on web.

Users would select on a video tile and navigate to a video player page that felt very separate and void of context from the rest of the experience. Moreover, once the video played the user would need to close the player to reveal the next item in the row. We proposed numerous solutions of varying complexity and engineering effort.

User research

I tested to confirm is was usable and engaging.
The proposed updates move the club-specific video carousel higher up in the page and reduced the height of the scores module. In a redesigned UI around the video player experience, the selected video is pinned to the top of the screen with a queue of videos below. When the selected video finishes, the app would autoplay to the next video in the queue. This is a more seamless, modern experience that resembles other leagues and video platforms like YouTube. The queue encourages browsing and repeat viewing: click-to-watch, scroll, click-to-watch again.

Technical Considerations: UI redesign using existing data feeds that power the carousels on existing Team Pages. Does not require any service-related engineering work.

Teams Impacted: Mobile engineering

Design Exploration: Dual Video

We knew that the feature was easily overlooked, because there was no explicit navigation for launching it. A quick round of usability confirmed that unless the user stumbled upon it, or was already aware of the feature, they would miss it.  We were working on another feature related to the intermission experience when I realized the there was an opportunity to make the call-to-action more noticeable.

During intermission, there is a 17 minute gap in the content feed. In order to showcase other action around the league, without ending the main feed, I began working closely with PM to explore solutions. This feature not only helped with the problem of intermission, but also was a convenient way to explore related content anytime the user wanted to navigate away from their game without closing it entirely. When the user invokes the player controls they see two contextual menus providing access to the supporting features. 

The top menu  exposes the customization features including dual video and the feed switcher.

 

The bottom menu exposes the related highlights from around the league. If there is a lull in the game the user is watching or it is intermission, they can watch highlights tailored to their favorite teams and quickly return to their primary game when ready.

 

Reference Design

AppleTV, at the time was the most robust set-top-boxes and had rendering, animation and video quality capabilities that exceeded the competition. In prior versions of the app, we were often limited by native templates and OS conventions. This redesign afforded more innovation with layouts, but still grounded in good ten-foot design principles: clear, simple UI design, prioritized default content and a focus on video consumption. 

As we learned what worked (and what didn’t) we carried this design language to other platforms. Ultimately, the feature that viewers care most about in a sports streaming app is high-quality video that doesn’t buffer. Information like scores, standings or game status should be used to provide context that drives people to discover and view video.