NHL: Videocast

Problem

Videocast is currently a desktop app that officials and NHL employees can use to stream games, playback game events, create clips of events and highlights, and monitor live games. Users also have the ability to watch past games. There has been an ask for an iPad app because the officials on ice do not always have easy access to a laptop, and need an efficient way to stream. For this first phase, only streaming capabilities will be implemented, with editing capabilities to come in future phases.

Site Map

I documented Videocast’s current pages online, and created a site map to ensure every path was accounted for.

Design Goal

A lot of design and development work had already been put into Videocast as a desktop application, so for these designs, I took a “lift and shift” approach, while also incorporating iPad iOS native functionality. It was also important for me to create a roadmap for myself, given this project had no official deadline.

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

  1. 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

  2. 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

  3. 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:

  1. If there are no games, the NHL employee logs out.

  2. If there are no games, the NHL employee selects a past date in the calendar. Then, they choose a game to watch.

  3. 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.

  4. 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.

  5. 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.

  6. If the NHL employee clicks the wrong game to stream, they return back to the Game Selection page.

Explorations

I met with one of the main stakeholders weekly, and began with my presentation of Explorations for how other streaming services were using iPad layouts, components, and patterns of travel. It was an important step to identify key patterns and paths of travel that millions of users have already established. These services included Netflix, Max, Prime Video, Hulu, and NFL Redzone.

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

Many iterations went into these mockups after meeting with all of the stakeholders. The following mockups include the ability to expand and collapse players on ice for live games, adding and changing up to 4 total games or broadcast channels to stream at once, and more.

Game Selection, Individual + Multi Game, Playback Settings:

Challenges: Arranging live data into a smaller layout / Adding in additional and new features

Conclusion

The first phase was a success and signed off by all key stakeholders. A requirements document was put together for the developer eventually placed on this project, as we are waiting for resourcing.