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
Website Audit
Identified key issues from the existing scoreboard page:
1. Too much white space
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.
Competitive Analysis - Research Phase
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
Lo-Fi Iterations
Laid out multiple options in a low fidelity to test with stakeholders and get feedback.
Glimpse of all Lo-Fi Ideas that went into the design process
High Fidelity Explorations
We narrowed down on a concept and I started working through some high fidelity iterations
High Fidelity iterations
Finalizing a video rail
We decided to launch a fixed video rail on the right that would house:
1. Our Free Live Channel - CBS Sports HQ
2. Our list of Video On Demand content and Highlights
Hi-Fidelity finalized version of the video rail
LAUNCH 1: Adding Video Rail to scoreboards
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.
Launched scoreboards with a fixed right rail
LAUNCH 2: Introducing a new compact mode
We launched compact mode in phase 2, which added the flexibility for the user to see more games at a glance
Expanded Scores
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
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
.png)
