MLB.TV Media Player 


With over 1.5 million paid subscribers, the new MLB.TV Media Player allows fans to watch any baseball game, any time. The new player design combines enhanced video, scores, highlights, fantasy and game specific information creating a new way to watch baseball.

 
 
ROLE:   UX / UI DESIGNER
TIMELINE:   6 MONTHS
VISIT:   MLB.TV
 
 

 

Old Player Analysis

Starting in 2014, the business, technical and UX teams looked to reintroduce the MLB.TV experience to its over 1.5 million paid subscribers. The player at that time was suffering from growing pains, the functionality was stiff, the need for a third party plug-in to launch the player was problematic, and the supporting features had low click rates. We wanted to return back to the core experience of watching baseball in a simple and engaging experience that would reinvigorate the product online. 

 
 
Old MLB.TV


Old MLB.TV

Multi View Controls
Allows users to watch multiple games in a pip, dual or quad view

Scoreboard
Game Scoreboard sorted by LIVE vs Archived Game showing all the games that were played that day.

Player Controls
The player controls provide users the option to manage the game feed and the video

Global Controls
These controls manage closed captioning, volume, mini mode, fullscreen and preferences

Supporting Features
These features allow users to see relevant data and video based on the game

 

 

New Opportunities

What we largely found after our analysis and user interviews was that that there were three big opportunities for us to explore.

1.  We needed to rethink the relationship between the video and the data showing what is happening on the field. 

2.  We need to look at improving our player controls as well as simplifying multi-view, pitch fx and our clickable linescore.

3.  We need to show off video highlights, play by play feeds, box scores, fantasy tracking and social media which MLB.TV had but were hidden. 

 

 

 

Layout Approaches

After identifying the three areas of the UX we wanted to focus on we needed to look towards different layout approaches we could take to achieve our UX goals.

With Option 1 we explored overlaying game data modules over the video player similar to our connected devices and mobile products. However, the technical team asked us for a different approach so the video feed would be easier to build and less prone to bugs.

Option 2 was most similar to the old player with a scoreboard module to the left of the player. We moved away from this approach because we were hiding relevant information.

Option 3 was the approach we chose. By expanding all the additional features below the player that cleared up the viewing experience above the fold.

 

 

New MLB.TV Design

 

 

Scoreboard & Gameview

 

past with relevant data showing score, time, inning, etc. At the micro level, a user to look at game specific data tied to the video they are currently watching. This view was thought of as a graphical reference showing what was happening on the field. Showing both these views not only tied both video and stats together visually but it allowed us to add an array of new features around these modules.

 

 

The first area we wanted to solve for was the relationship between the game video and the information around that video such as stats and scores. The key question was, how can we elevate and engage the user experience to provide baseball to them in a new format. Our solution was to have a persistent strip above the player which users could toggle between two views at different scales. At a macro level, users could look at all the games occurring now or in the


  Scoreboard

 


  Gameview

 
 

Prototype
Interaction diagram showing scoreboard and gameview transition. 

 
 

 

Game Alerting

To provide users with contextual information on what is happening in game and around the league we introduced game alerting. Game alerting will connect users with live look in, situational, highlights and fantasy instances. Alerts provide users with quick access to baseball information in and around the game. 

 
 

Live Look In
We developed alerting for MLB Live Look In with the game highlighted in the scoreboard and an alert message below allowing users to see a short description and the ability to jump into that game. Live Look In at MLB allows all users to watch selected games without blackouts.

 
 

Disclaimer
The first time a user closes an alert message they will receive a message providing a shortcut for users to cancel all alert messaging if they please.

 
 

Situational Alert
For breaking events in other games around the league, situational alerts will appear allowing users to jump into games at key points.

 
 

Highlights
When new highlights are cut in the game, alerts appear indicating the highlight title allowing users bring up a highlight video in the picture in picture slot.

 
 

Fantasy Alerts
Users who participate in fantasy baseball will be alerted when their players are pitching, batting or on deck.

 
 
 

 

Feed Selector

Sitting underneath the Scoreboard and Gameview is the Feed Selector with a new user interface and position. A departure from the previous Feed Selector, the new one was built to persistently show what video and audio a user is playing with their video. If a user wished to change their video or audio to a different announcer from the other team they could. We also built the option for users wishing to just listen to the radio feed of the game.

 
 


  Feed Selector - Video

 

 
Feed Selector - Audio

 
 

 

Calendar

With MLB.TV users can watching games that are LIVE or Archived. If a user wishes to watch a different game we placed a calendar icon at the top of the page allowing users to see a dropdown 3 month view of the baseball calendar. We included a today button, allowing users to find the current day, and a total game count for each day so users can see how many games were played. 

 
 
 

 

Multi - View Capabilities

In the new MLB.TV, the multi-view experience has been enhanced to provide users with a more intuitive experience to select and view multiple games at once. When a user selects a view mode, that view will appear with a blue selection box around the frame. Users are prompted to select a game to watch and that game is show as selected in the scoreboard. 

 
 
 

 

In-Line Player Experience

As seen above, we placed all the additional MLB.TV features below the video player in a new interface. These modules enhance the video experience providing users with Fantasy, Social, Highlights and Box Score. When designing for this new interface, something became very apparent, watching the game and looking at these features was disjointed. We needed to bring the video down to these features so we devised an in-line player which would dock to the top as a user scrolls down. This new mini player allows users to never lose their place in a game while exploring the games features.

 

 
 

Plays & Box Score
The In-Line player consists of the game video, the game score and a module navigation allowing users to jump to a specific module. The plays and box score module shows a play by play breakdown of what is happening in the game as well as a team box score and full game lineup. To conserve space, the module has a max height and View More button expanding that height. 

 

Highlights
Highlights proved to work best with the In-Line player because it allowed users to watch highlights from this view without have to scroll back to the top of the page in the main video. If a user did wish to watch this in a bigger view, the highlight would appear as a Picture in Picture view. Additionally, while watching a highlight, we kept the game score of the main game a user is watching in view. 

 

 

A new immersive baseball experience

Baseball stats, highlights, fantasy tracker and twitter feeds can allow a user to become fully immersed in the baseball experience by providing them with rich content in a simplified interface. For the new MLB.TV we took the content of the old media player, simplified the organization of information, cleaned up the interface and made each module user friendly.

 
 
1 Previous Boxscore


1 Previous Boxscore


1-1 New Boxscore with a Play-by-Play game feed included

 
2 Previous Highlights


2 Previous Highlights


2-2 New Highlights with larger thumbnails and greater content visability

 
3 Previous Fantasy Tracker


3 Previous Fantasy Tracker

3-1 New Fantasy Tracker with improved roster editing experience and a seamless third party fantasy integration

 
4 Old Twitter Feed


4 Old Twitter Feed


4-1 New Twitter feed with larger embeds to showcase content

 

 

Social Media Response

The public response to the new MLB.TV Media Player was overwhelmingly positive on social media. Of course, there was also plenty of feedback for improvements or technical issues. We took this feedback very seriously and we are attempting to resolve and add new functionality to continually improve the player.

 
 
 

 
Spirit of Space Companion


Spirit of Space Companion

MLB Global Navigation


MLB Global Navigation

Pace of Game


Pace of Game

MLB Global Calendar


MLB Global Calendar

Situ Research


Situ Research