NHL Videocast

Problem

Videocast is a desktop app officials and NHL employees use to stream games, play back specific events, create clips of events and highlights, monitor live games, and go back and watch past games. On-ice officials don't always have easy access to a laptop, so there had been a real need for an iPad version. This was a special project for me in that I got to own it beginning to end, rather than stepping into something already underway. The app is being released in phases, with this first phase focused on game selection and video viewing for streaming only, not including clipping capabilities, which are planned for a later phase.

Before designing anything, I met with and interviewed the teams who'd actually be using this day to day: Hockey Ops, the Stats Bureau, and the people responsible for game selection and the video view and play-by-play drawer. Understanding how each group actually worked, not just what they said they needed, shaped almost everything that came after.

Site Map

I documented every existing page within Videocast's current desktop experience and built a full site map from it, to make sure no path or screen got missed once we moved into designing for iPad.

Design Goal

A lot of design and development work had already gone into Videocast as a desktop application, so for the iPad version, I took a lift-and-shift approach, while also building in native iOS iPad functionality where it made sense rather than just resizing the desktop experience. Since this project had no official deadline, part of my job early on was creating my own roadmap to keep the work moving with real structure instead of drifting.

User Personas

Three user personas were considered overall, but for this first phase, there was only one: the Streamer.

Streamer (NHL Employee)

About: Matt is an NHL employee and huge New York Rangers fan, working and living in New York City. He doesn’t pay for cable or MSG+, so he’s unable to watch his team due to blackouts. Matt uses Videocast to stream games from the comfort of his own home. Because he’s participating in a hockey fantasy league, Matt also tunes into other teams’ games to monitor his players.

Goals: To view NHL games without blackouts | To stay up to date on all teams and individual players

Frustrations: Unable to watch most New York Rangers games

User Stories

As a streamer student, I want to select a current or previous NHL game to watch.
Tasks: Go to the current date | Select a date from the calendar | Navigate to the next or previous day | Click a game to watch | Logout
As a streamer student, I want to watch one or multiple NHL games.
Tasks: Change the video stream to access another broadcast | Add up to four total games to watch | Playback the video in full screen | Airplay the video to a smart device | Adjust the playback speed from 0.25x to 2x | Adjust the volume | Adjust the video via control button | Navigate to a specific game time within a particular period | Return to the Game Selection screen | Jump back and forward in the game using the game progress bar
As a streamer student, I want to replay captured events.
Tasks: Adjust the filter on the type of game events to be displayed | Jump the video stream to the selected event in the game after clicking the play button | Go to the next or previous item in play-by-play | Replay the currently selected item in the play-by-play

Use Cases

Use Case Name: Watch an NHL game

Primary Actor: NHL employee

Preconditions: The user is an NHL employee with Videocast permissions and is logged in.

Triggers: The user selects an NHL game to stream.

Basic Flow: On game days, the NHL employee browses the games available to stream. They select the current date, and click a specific game to watch. They change the broadcast feed to suite their needs. They play the video in fullscreen. They adjust the volume to make the video louder. They add another game to watch at the same time and Airplay/Chromecast them both to their TV. One game finishes before the other. They play the one game remaining on their computer and filter the game events by “Shots on Goal.” They replay the most recent Shot on Goal and navigate to the previous occurrence. The game ends.

Alternative Flows:

If there are no games, the NHL employee logs out.
If there are no games, the NHL employee selects a past date in the calendar. Then, they choose a game to watch.
If there are games for the current date, but it is before game time, the NHL employee logs out or selects a past date in the calendar to watch a previous game.
If the NHL employee started the game late, they start the stream from the beginning by using the progress bar or adjust the video using the control buttons.
If the NHL employee missed a play, they adjust the video using the progress bar or control buttons, or navigate to a specific game time within a particular period.
If the NHL employee clicks the wrong game to stream, they return back to the Game Selection page.

Explorations

I met weekly with the main stakeholder on this project, and started by presenting explorations of how other streaming services approached iPad layouts, components, and paths of travel, including Netflix, Max, Prime Video, Hulu, and NFL RedZone. Looking at those patterns mattered because millions of users had already learned how to navigate them. There was no reason to reinvent conventions people already understood when the real problem worth solving was specific to Videocast itself. From there, I wrote user stories and walked through full user journeys before moving into wireframes and mockups.

Wireframes

This layout mimicked the current Videocast desktop site, however, adjustments were made for the smaller screen size. The navigation pattern was also moved to the left sidebar in the mockups.

Mockups

The mockups went through many iterations after meeting with all of the stakeholders. They cover the game selection view, and once a game is selected, the video view itself, where users can stream a live game, see the players currently on ice, and access events already clipped by Hockey Ops or the Stats Bureau. From there, users can play back those clips or share them with other employees. The designs also support expanding and collapsing the on-ice player view during live games, and adding or switching between up to four total games or broadcast channels to stream at once.