NHL
Launching the NHL.tv streaming service and leading product-led-growth on the official NHL app and website.
I founded, hired, mentored, and led the team that designed the official site, app and streaming service for the National Hockey League. My engagement with the NHL spanned more than five years with my role ranging from team lead, design strategist, art director, storyteller and UX researcher.
It was also an opportunity to build centers of excellence around UX Research and Prototyping for BAMTech Media.
Project Highlights
- 2015 conducted the first user research at MLB
- 2016 launched the NHL.tv streaming service
- 2017 added innovative video features to TV apps including Around The League and MultiGame view
- 2018 Advised executive leadership on a product-led-growth program to boost mobile video engagement 200%.
- 2019 Led the design of the innovative GameFlow™ data visualization and multi-screen viewing experience
NHL.tv
In 2016 we redesigned and relaunched NHL's streaming streaming service across mobile, web and TV devices. My team redesigned the streaming experience and new user acquisition funnels.
Around The League
One feature we were especially proud of was "Around the League". This was a user-centered feature that is authentic to the game. Our UX research revealed viewing habits that are unique to the pacing and rhythm of hockey. There are long breaks in the action, during which fans want to check in on exciting moments from rival teams or favorite players. At the same time, their FOMO prevented them from taking their eye off the current game, even though there was a break. ATL provided a fluid way to watch highlights while keeping an eye on your team.
This feature was a cross-functional effort to align the data feeds, UI build and design into a seamles UX.
Mobile Redesign - Product Led Growth
Team:
Design: Brian McConnell, Connor Paglia, Paul Amsbary
Product: David Singer, Tom Kozlowski, Benji Gottlieb
Situation
Leading up to the 2018-19 season we conducted extensive user research to find pains and gains. A very common complaint was the navigating videos on the mobile app and the ad experience. Videos blocked users from navigating the app while playing and multiple ads played with each video (which degraded overall engagement).
We formed a hypothesis that a light redesign of the team home pages (the most visited screen in the app) could boost engagement and ad revenue. We worked with the mobile developers on lightweight changes that leveraged existing UI components.
Key Updates:
- Videos are pinned at the top of the screen.
- Introduced a secondary nav with relevant video playlists.
- Added an algorithmically curated playlist of content for that team.
- Updated advertising UI with time remaining and playlist queue.
- Throttling the advertising fill rate from 2 per video play down to 1 every two videos.
Screens
Results
We saw a 150% increase ↗ in Recency
and Frequency
engagement metrics measuring video consumption. This netted a 25% increase ↗ in ad impressions despite the lower fill rate.
Web - Keeping up the momentum
Based on these findings we carried over the same idea of improving curated playlists and non-blocking browsing to the web experience. We branded this new feature "On The Fly". The results were not quite as impressive as on mobile but still positive.
GameFlow
GameFlow™ introduced a groundbreaking way to visualize the momentum of action in a hockey game. This feature in the NHL app uses real-time data from the rink to render a graph of how much offensive pressure each team is applying.
Team:
Design: Brian McConnell, Bill Blair, Sean Dolinsky
Product: David Singer, Sasha Eysymontt
My role as director was assembling the team of designers, prototypers, and researchers, setting our Design Strategy, and Storytelling to align cross-functional partners. I also designed the v1 interactions and built the visiontype to secure funding.
Navigating game highlights through the shot pressure chart in the Mobile App.
The multi-screen interaction lets fans keep an eye on the action while watching highlights.
VisionType
To secure buy-in from NHL and Disney leadership we needed to shop the feature in context. We built a VisionType in Keynote to walk execs through the experience. It also facilitated collaboration with services and client engineering. Our Apple developers in particular were eager to build new PiP capabilities in TVOs, and experiment with synchronization capabilities between Apple devices.