Scene 1
Setting the stage
Why now?
Been ages!
It's been years since we've updated the look and feel of our scoreboard pages on the site.
Crucial Part of Business
Scoreboards are a crucial part of our business in serving invested sports fans across our major sport offerings. Scoreboards are also a huge undertaking with the different data sets used across leagues.
User Complaints
We have been receiving lots of nitpicks on scoreboards and would look to explore making some quick wins to improve performance and overall usability. Two of them being - able to see multiple games at once on the screen and better video integration
So our goals were
Improve Video Integration
Enhance the integration of CBS Sports HQ (our free live channel) into the scoreboard experience in a way that significantly increases user interest and encourages active consumption of the content
Optimize space to show more games
Identify and implement improvements to scoreboards that optimize the utilization of page space, taking into account the diverse needs of various sports leagues and user types.
Make video feel relevant
Integrate other Video on demand content like highlights, interviews and analysis into the video experience for active consumption during game days and beyond
Improve Retention Rate
A lot of times, there might not be a lot of games or videos to offer, and it was important to give users other avenues to explore on our website and keep them longer.
Time we had
2-3 months
This was supposed to be a rather short project with not much room to revamp the entire scoreboard experience.
The Plan!
Even though this was a short project, it was important to come up with a project plan to help stay in track with the goals of the project.
Scoreboard project plan
Scene 2
Laying the groundwork
Requirements Gathering
User Pain Points
We took feedback from our users initially to get a sense of their pain points from the current scoreboard experience. These were mostly a mix of both casual and power users that want to follow multiple games at once especially during college football season.
Unnecessary information in the score cards
Video is not well integrated and feels more like an after-thought
Can't follow multiple games at once (eg. College Football)
Stakeholder and User Goals
From the research above, we formulated a summary of what a user expects from the scoreboard experience.
Wants to follow at least 9-12 games at once in the main view
Does not care about player stats as much as team scores
Utilize white space better
Would want to see more relevant video content on the page
Importance of scoreboard and video
Our scoreboard pages have experienced great traffic growth YoY. We also introduced a 24X7 Free channel called "CBS Sports HQ" along with our large library of VoD (Video on demand) content.
Scoreboard Traffic is up YoY
Video, overall, is performing well
Website Audit
Identified key issues from the existing scoreboard page:
Issues with the scoreboard page
2
Text hierarchy in the score cards made it tough to scan winners and losers quickly
3
Unnecessary information for many users, more space being taken which results in less number of games available at a glance
4
Video placement made it feel like an AD Unit and users would automatically close it resulting in less revenue for business.
Looking at the competition
How are we looking at our competitors?
With the amount of competition our there, it was important to set a lens from which I looked at our competitors. One site may not have all, but there could be pieces you can pick from each and join them to make the best experience.
Video Integration & relevance
Layouts to display multiple items
Screen estate utilization
Data elements displayed upfront
Alternate sources of engagement
Competitive Analysis
Next step was to analyze our competitors. I decided to divide them into 3 categories
Direct Competitors
I looked at our direct competitors - ESPN, NBC Sports, Fox Sports, Yahoo Sports. This was to get a 1:1 idea on what they are doing to show multiple scores and video
Competitive Analyis of various direct competitors
Other Sport Websites
I also looked at other sports websites - NFL, MLB, Cricinfo, Wimbledon, UEFA Champions League to get a sense of how we can take inspiration from other sports and implement into our own
Competitive analysis of other sports websites
Different Genre Websites
Lastly, looked at some websites outside of sports category to get a sense of how they do layouts and add personalization options to the same.
NFT Website OpenSea gives users options to switch views and see more NFTs
Key Takeways
No Live Video Integration
None of our competitors are integrating live videos into the scoreboard pages, except NBC (which itself is more of a link to a live video)
NBC Sports Scoreboard Experience.
Video Content
VoD content is quite common across major competitors
NFL.com video rail
Screen Estate Utilization
Screen real estate utilization is a 50-50 across competition. Looks like MLB, Fox and Yahoo have got it spot on, but they do not integrate video. In general, lot of screen space is wasted.
Examples of Fox, Yahoo Sports and MLB
Data Pieces shown upfront
Amongst those who are utilizing screen estate to its max, are focussed only on displaying relevant information like final score, winning team indicator, and team records. Stadiums and player stats have not been given preference on the cards since they take up space
Yahoo Sports only shows final scores and skips other data upfront to show more games
Other observations
Personalization / ability to follow teams helps in easier scanning of games when there are lot of games being played.
Video is not given much preference with scores on m-web for most competitors
Identifying opportunities
Defining multiple pathways and opportunities
Competitive analysis helped me get a sense of how the competition handles scoreboards and video. It also enlightened me with gaps that these companies have, and use them as opportunities for us to move ahead.
We had a time crunch, but I wanted to lay out the opportunities so that the Product Manager can easily analyze and make a decision on which path we want to follow at this particular time.
We decided to go with a quick fix solution since that seemed to have the most impact with least effort.
Quick Fixes
- Make use of a wider screen space (like Watch experience pages), and integrate live video / VOD playlist on the page.
- Give personalization options with respect to the UI - compact view v/s expanded view. None of the competition does that on the web so far, and it needs to be consistent across sports
- Have relevant video alongside scoreboard to make a greater impact along with our Sports HQ, rather than just sticking it on the page
Mid - Term
Can add more sections on the scoreboard page like more VoD from other sports, Betting stats, or links to other relevant articles or games when they scroll all the way down
Include more states/data on Hover on web
Ability to pin games on the SAAG
Long - Term
Maybe also give the ability to move the games around. Can be restricted to registered users only. Will lead to more registrations
Utilize our Sports App personalization options to CBS Sports Web, and show a unique experience for every user
Identifying paths we can take. We went with the short term fix since that was most feasible.
Scene 3
Start building!
Process
Start wide, narrow down
I like to start with all the wild ideas first to get my creative juices running. After that I would narrow down the best practical ones, and iterate on them.
I would present these ideas to my product and engineering teams, and further narrow down concepts that bring the best balance between user experience and business goals.
Why not user test?
In an ideal scenario or a larger project (as you'd see in the
Navigation Project), which has a larger time frame and budget, we like to involve user testing.
But, the beauty of working at a large company is that we can easily
test concepts internally. We have
a large group of people who are either die hard sports fans, the average sports fan or none at all. It gives us a good set of users to test our ideas.
My design process
Current State
This is how the website looked, and I tried to identify areas where we can quickly improve
1. Header
Header can be trimmed down with respect to its height
2. Filters
The filters can be moved up to the header to cover the white space. Consider showing date ranges too
3. Alignment of score cards
The score cards can be pushed to the left to align with the “CBS|NFL” logo (navigation bar)
4 & 5 Adding a dedicated video section
The right side can now be a “Video Hub” and all these preview or highlights videos can be moved to the right rail
Current state of the website
Going Wide:
Layouts
I started exploring concepts using a low fidelity to churn out ideas quickly. This helped me visualize various opportunities we may have in the short term or long term
Fixed Video Player. 6 games at a glance
Fixed Video Player. 9+Games at a glance
Fixed Video Player. 16+ games at a glance
Wild option. Using mobile score cards
Video Playlist. 12 games at a glance
Hideable playlist to show more games
Fixed player on top. Playlist on right. 9 games at a glance
Fixed Player on bottom. No Playlist. 12 games at a glance
Narrowing Down
Narrowed the options down, and iterated to come up with a few options to take it to the developers.
1
Trim the header, and combine it with the filters
✅ Fixes white space
2
Keep the scores UI as-is
❌ Doesn't show more games
3
Introduce a video rail on the right with live channels and league related VoD
✅ Video integration
4 & 5
Retain betting stats and ADs
✅ More revenue options
Option A - Quickest Fix
1
Trim the header, and combine it with the filters
✅ Fixes white space
2
Introduce a video rail on the right with live channels and league related VoD
✅ Video integration
3
Devise a compact view for the scoreboards and show it by default
✅ Shows more games
Option B - Mid Term Fix
Option C: Mid to Long Term Fix
1
Trim the header, and combine it with the filters
✅ Fixes white space
2
Immersive scoreboard view with ability to follow multiple games at a time using a 4X4 grid with options to further trim it down
✅ Shows more games
3
Have the video hub fixed at the bottom by default. Users will see Watch HQ playing by default with options to change and watch the next video
✅ Video Integration
4
If the user chooses to hide the video rail, we can trim it down so that it still plays the HQ in a minimized form and users can see thumbnails of VOD
✅ Video Integration
Option C - Mid to Long Term Fix
Effort vs Impact
Plotting the matrix!
I presented the 3 concepts to our stakeholders, and we plotted each one of those using an effort vs impact graph.
Effort vs Impact Matrix
Decision!
Finalizing an option!
Option B - Mid Term Fix
After plotting the matrix, we decided to go with "Option B -Mid Term Fix". It covered all basis on what we wanted to achieve. The slightly added time would mean we had to split it into 2 phases:
Phase 1
Live Video w/ VoD playlist
✅ Instant revenue impact
Phase 2
Compact scores view
✅ UX Enhancement
Cannot re-work the header since it clashes with AD placements, and adds extra layer of effort
No Changes on Mobile layouts since they already have a 2 across layout for scores. Can add expanded scores later
Launch phases
Scene 4
Phase 1: Video Rail
Explorations
Using existing Design System styles only!
To make the video rail look cohesive with the rest of the site, it was important to use elements from our existing design systems.
Variations of the video rail
Explorations here with a card style UI. Adds a bit of separation.
Live Video + Playlist + AD
Ideal scenario where we have a live video + video playlist + ADs available
Playlist + AD
In case there is some issue with live video, we can remove and show just playlist
Playlist + Stories + AD
In case there are few videos available, show articles to increase engagement
Refinement
We will always get a video player
After talking to developers, we got a confirmation that video will always be present. So we will never run into situations like Option 2, and 3 above.
AD placements not required
Our video players will autoplay on load, with a pre-roll ad. By doing this, we did were no longer required to show ADs in the playlist since the pre-roll ads have a higher value than display ads. We also have other AD placements on the rest of the site, so we can keep this space uncluttered.
Example of pre-roll ad
Simple refinement of the Video Rail
Interactions
Breakdown of the video rail
This is how the video rail will be laid out and the interactions on it. We wanted the users to stay on the scoreboard page, and hence we decided that the video player will act as a "switcher" between live channels and video content.
Video rail breakdown and interactions
Video on mWeb
I had proposed an idea for video on mWeb, but it took a lot of screen estate. Pinning the video at the bottom clashed with AD placements on that page. This along with the competitive analysis earlier made us sway away from having video on mWeb.
Proposal for video on mWeb
Launch 1
Launching fixed video rail
We decided to launch with just the video rail in phase 1. A few things like metadata ("Now Playing", "Highlights", etc) had to be cut down for launch due to dev limitations.
The video rail would remain fixed on the page.
Impact
We saw significant increase in video consumption on scoreboards. This also allowed us to launch another free channel later that year.
Video Revenue
4x
+400% yr/yr
Launched scoreboards with a fixed right rail
Scene 5
Phase 2: Compact Scores
Score Card Anatomy
Game states
Understanding various game states on a score card was important before starting out on working on compact score cards.
Pre Game
A pre game state would have the following data points:
1. Date & Time
2. Streaming Info
3. Betting Odds
4. Stadium Info
5. A preview video for most leagues
6. Special Treatment for P+ streams
7. Quick Links
Pre-game card of an NFL Game
In-Game
An in game state would have the following data points:
1. Time elapsed in the game
2. Headers for phases of the game
3. Scoring info on all phases of the game
4. Stadium Info
5. Last play
6. Rotating stats
7. Link to Gametracker or Live Stream (if any)
In-game card of an NFL Game
Post-game
A post game state would have the following data points:
1. "Final" in a black font signifying end of game
2. Headers for phases of the game
3. Scoring info on all phases of the game
4. Stadium Info
5. Match Highlights / Analysis video
6. Final stats
7. Quick Links
Post-game card of an NFL Game
Compact Scores
How did we decide to remove data elements?
It was important to find a balance between making the cards smaller yet keeping all relevant information on display. From the competitive analysis earlier and with some feedback from sports fans within the organization, I came up with a few ideas for each state.
Power users want to see more games
Some leagues like college football, college basketball, NBA and NFL have more than 15 games in a single day. There are some power users who like to keep an eye on multiple games at once, and only care about the main score.
Stat nerds are more likely to open the full gametracker experience
For those users who want to follow the game closely with all details, plays, and stats are more likely to open the game in the gametracker mode which has all the data pieces.
Early Explorations
Here are some early explorations for compact scores:
1
Combine Day&Time with Stadium Info
✅ White space saved
2
Paramount+ Callouts for streams
✅ Easy recognition for streams
3
In-house streams would have logos, others would be text only
✅ Easy recognition for streams
4
Reducing video thumbnail size and adding it closer to Odds
✅ Video Integration
Pre-game states Hi-Fi explorations
1
Exploring options to add Last plays
✅ Data elements
2
Live Stream explorations
✅ Video Integration
3
Exploring expandable drawers to show more info
✅ More Data for ardent fans
4
More explorations to show CTA for live streams
✅ Video Integration
In-game states Hi-Fi explorations
1
Better text hierarchy for Win/Loss scanning
✅ UX Enhancement
2
Example of expandable drawer
✅ More Data for ardent fans
3
Example with scores of all phases of the game
✅ More Data for ardent fans
4
Example of showing only final score
✅ Important info only
In-game states Hi-Fi explorations
I added all of these options in actual layouts to see how they look in context of the page. Narrowed it further down to two options. One option was expandable scores w/ explicit P+ callouts, the other was non-expandable w/ cleaner callouts.
❌ Expandable Scores w/ explicit P+ callouts
This version seemed the ideal one. But adding functionality of an expandable drawer was out of scope. The P+ callouts also looked too harsh when seen in context, especially when there are too many of them in a single view.
✅ Non Expandable Scores w/ cleaner callouts
This version felt the most balanced in terms of engineering costs, as well as from a UI perspective. The red buttons felt more intentional, and the colored logos for Paramount+ felt cleaner than having big banners.
Final Touches
Final designs for compact scores
After deciding to go ahead with the non expandable scores version with the cleaner callouts, it was time to spec this out for the developers. Here are all the different finalized states.
Pre-game states
CBS Streamed game, no video
Externally streamed game, no video
P+ streamed game, preview video
In-game states
P+ streamed game, no datapoints
External streamed game, no datapoints
Phase 2: External streamed game, extra data points
Post-game states
No Video, Extra Datapoint
Launch 2
User onboarding
We wanted to give the users flexibility to choose between expanded mode (old version) and compact mode (new version). We added a segmented controller on top and tooltips to educate users about the new feature.
Segmented controller to switch between modes & tooltip to educate users
Expanded vs Compact
Here is a glimpse of a score card in expanded mode vs compact mode. Compact mode saved a lot of space, and allowed users to read more games at once.
Expanded Scores
Compact Scores
Comparison between Expanded and Compact scores
Improving retention rates
We also added a reading section below the scores. This helped balance the page when there were only 3 or 4 games on a day, and also keep users within the experience.
Adding stories below scoreboards to keep users engaged
Impact
Users preferred the new compact mode over the expanded mode to consume more games at a time. This combination of video rail and compact scores allowed for a greater retention rate on dense pages like NFL and College Football.
Games at a Glance
12-15
4 times more than expanded
Compact Scores Users
75%
of users use compact scoreboards
Retention Rate
2x
on NFL and NCAA pages
Catch a glimpse here!
You can
visit the website and browse around. Switch between expanded and compact mode to see the difference
Compact Mode allowed the users to catch 12 games at a time compared to 3 in expanded mode
"Simplicity is the ultimate sophistication"
"It takes a lot of hard work to make something simple, to truly understand the underlying challenges and come up with elegant solutions"
Crew
Hamish Jackson-Mee
Design Director
Caroline Sikes
Senior Product Manager
Neil Meskauskis
Sr. Software Engineer
Chris H.
Vice President, Product
David F.
Sr. Manager 2, Software Engineering
.png)
