live-extra-head

NHL Live Streaming Graphic Stats Product

NBC Sports in Stamford, Connecticut produces a live and on-demand streaming product called LiveExtra. LiveExtra is a comprehensive product that streams sports competitions to its cable subscription audience. Both NBC properties, Premier League (soccer) and the National Hockey League, are live streamed using LiveExtra to broadcast games to their online users.  

As NBC Sports’ Interactive Designer, my role was to enhance the viewers’ online sports game viewing experience. Designing, constructing, and delivering a streaming companion product, I produced multiple informational widgets. The array of widgets were placed in three quadrants: Video Box, Game & Team Stats, Player Card & Roster Stats. These visuals are an easy way to deliver statistical information to the viewer.  Listed below is a breakdown of each widget.

  1. Video Box
    1. League game ticker bar
      1. shows other game results and upcoming game times cross the league
    2. Game video
    3. Key game events
      1. Click to rewind to marked event
  2. Game & Team Stats
    1. Scoreboard
    2. Home field information
      1. Location
      2. Capacity
    3. High level stats
      1. Premier League (PL)
        1. Ball location percentages
          1. Displayed as a bar graph inside the rink graphic
        2. Possession in minutes
        3. Shots
        4. Shots on target
        5. Corners
        6. Tackles
        7. Offsides
        8. Fouls
        9. Yellow cards
        10. Red cards
      2. National Hockey League (NHL)
        1. Actions plotted on rink graphic
        2. Face offs
        3. Hits
        4. Goals
        5. Shots
        6. Blocked shots
        7. Puck location percentages
          1. Displayed as a bar graph inside the rink graphic
        8. Give aways / Take aways
    4. Play-by-play
    5. (NHL) Penalty box
      1. Game penalties in minutes (PIM)
      2. Season penalties in minutes (PIM)
    6. League standings
  3. Player Card & Roster Stats
    1. (PL) team formations on field
    2. Player stats
      1. Game stats
      2. Season stats
    3. Roster
    4. News
      1. Connected with sister site – rotoworld fantasy sports news

The UX/UI design and build process was as much an individual effort for me as it was a team endeavor. In the lead up to a project kickoff meeting I researched and learned the minor details of tracking the sport, as well as, preparing a competitors analysis. After a project meeting with the stakeholders, where a list of product requirements and a schedule was determined, I designed a series of wireframes or storyboards for the product’s layout that included interaction spots, game play scenarios and statistical data. Once these wireframes were reviewed and approved, I constructed graphics for the interface. The progression of my work is illustrated in Figures A to E.  

Figure A – Preliminary mapped panels

Figure B – Fully designed panels

Figure C – Elements properly placed according to the wire-framed layout

Figure D – Illustrates sponsorship locations and background breakpoints.  

BPL_ad_integration_1

Figure E – completed product.  The bottom area of Figure E is also showing the custom social media element.  A real time update of the events’ social media feeds.

pl-page-screenshot

Throughout the design process, there was continuous collaboration with the team and the development vendor. Additionally, after the completion of each online product, my designer support continued for tweaks, updates, and advertising support.