MLBAM
NHL.tv REDESIGN
Project: NHL.TV Re Design for AppleTV • 2016 • Role: UX Lead
The Challenge
MLB Advanced Media entered into a licensing agreement with The National Hockey League to secure exclusive distribution rights to out-of-market games on NHL.tv. Our team was tasked with redesigning the experience across digital platforms with the goal of giving hockey fans a better user experience and increasing subscriptions.
My Role
I served as a UX Lead on this project, responsible for the overall user experience, partnering with product to explore ideas and tightly integrated with engineering for asset delivery. Our team’s focus was to redesign the app on connected devices, starting with the new tvOS version of AppleTV as a reference design followed by XBOX, Roku, Playstation and FireTV.
Every screen in this version of NHL.tv was re-designed. New features included a dark theme, In-App-Purchase, a dual-screen video experience, and optimizing the on-boarding experience.
Scores screen with closed navigation.
Foundational Research
The initial part of my design process was to understand our subscribers better and what motivated them to follow the sport of hockey. I conducted multiple rounds of interviews, recruiting subscribers and non-subscriber hockey fans, to learn about their NHL consumption across all media. Speaking directly to fans helped me to understand more about their rituals, goals and pain points before jumping into the re-design.
The questions we wanted to answer:
- What is the degree of hockey fandom for subscribers? What are the most important attributes of watching hockey? What are their motivations for using NHL.tv vs other viewing options?
- Subscribers are generally split between fans of a single team or fans of NHL hockey generally.
- Fans of mulitple teams are passionate and knowledgeable about the sport and consume news and stats across many media outlets.
- Live content is the main driver for most fans, therefore avoiding spoilers is very important. Once outcomes are known, the urgency to watch plummets.
- There are multiple avenues for finding game updates, highlights, scores etc. (including pirated streams) so NHL.tv offers convenience, consistency and high quality.
User Personas
We understood that our primary customer had one favorite team but also followed other teams in the league. We also knew that some of our most passionate (and vocal) fans love to watch great action no matter what team is playing. Based on insights from the generative research, and the customer stats we had from our data team, I noted these high level persona characteristics:.
“ I’m pretty sure my family would disown me if I rooted for someone else.”
- Lifelong sports fan of hometown teams. Attends games.
- Sports are primary entertainment all year round.
- Follows all aspects of sports including players, team narratives, trades, personal lives.
- Needs: Reason to watch when their favorite is out.
- Needs: Easy way to find big moments/catch up.
- Lifelong fan but has limited time for sports consumption.
- Goes to great lengths to avoid spoilers.
- Prefers streaming over cable for the control (on-demand).
- Consumption pattern is quality over quantity.
- Needs: Compelling content before / after their team’s game.
- Hockey aficionado. No single team affinity.
- Sports are primary entertainment all year round.
- NHL.tv subscription; Cable; Social Media; Talk Radio
- Needs: Way to understanding which games are most intense
- Needs: Easy way to pivot between games.
Documentation
First Launch Flow
Enabling in-app purchasing was a key goal of this project. It was a complex user flow because customers could purchase subscriptions through multiple touch-points including Apple, Rogers in Canada and directly from the NHL. I worked with product and engineering to capture the business rules that would impact subscription and onboarding flows for the US, Canada and the rest of the world.
Log-in Flow
App Map
Designing Navigation
A challenge of designing for television is communicating focus feedback (what is currently highlighted) because for most devices, the user is limited to up, down, left, right and enter controls. Our design leverages both contrast and scale to communicate design affordances and feedback. I collaborated with engineers to create optimal paths through the experience, think through edge-cases and get subscribers to the games they wanted to see as efficiently as possible.
Dual Video
Dual video is a split screen experience that allows fans to watch two games at the same time. While the majority of fans want the full screen experience at the highest quality, there are times when the outcome of another game impacts the user’s favorite team.
I inherited this feature from our MLB.tv design partners and it checked the box for our business stakeholders, but I wasn’t happy with the implementation. While the feature received positive feedback with fans, it had a major usability issue — a hidden affordance for invoking the dual screen layout. First, the default view for watching a game is full screen so users would have to navigate to a squeeze back view in order to see the option. Secondly, the CTA was too small and easily overlooked.
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.
