Navigation Redesign
5 min read

Synopsis

Our navigation has been cited by users as a detraction from our site usability (NPS score).

It is clunky and makes it difficult for users to find what they're looking for. There are also several different versions of our navigation across our products.

We'd like to build the new navigation in a way that makes it easily shareable to all of these legacy applications.As part of this project, we also need to take a look at our site information architecture and site hierarchy.

We want to make it easy for users to navigate to content, but we also want the navigation to align with our business strategies.

Goals

Make it easy for users to navigate to content
As basic of a goal as it sounds, its a very complicated process to make sure your navigation does its job perfectly. Its a core principle for the navigation to make it easier for users to find content, something we haven't been able to do up till now.
Align with our business strategies
We want to push users to different parts of our website and explore the plethora of content we have to offer. Currently we get a bulk of traffic from search results and users exit afterwards. Business wants users to learn more about our offerings.
Key Results and Metrics
- KR1: Increase NPS (net promoter score) by 15%
- KR2: Increase PPS (pages per session) by 20%
- KR3: Decrease bounce rate by 10%

Quick Facts

My Role
Co-lead, Research, Discovery, Lo-Fi Wireframes, Hi-Fi Prototypes, Design Handoff, Stakeholder
Tools
Created for
Desktops, Tablets, Mobile
To be expanded to other parts of business and platforms too in the future.
Time frame
November 2022 - January 2024 (1 year, 3 months)
Stakeholders
Product Manager, Design Manager, VP of Product, Engineering Manager, Business Management, SEO, Editorial, VP of Design, VP of Engineering
Leading a project of this scale and impact took a lot of effort. With a loose set of requirements, we had to rebuild the navigation from ground-up as it would set a standard for other brands at CBS to follow.

Timeline

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.
Too much white space
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

Outcomes

Impact
Numbers are yet to come since we just launched in Q3, 2024. So far, we've gotten positive reviews from our users as well as stakeholders. Other brands within the org have started re-building their navigation off of the work we did at CBS Sports.
Design Impact
From a design perspective, the work done for Navigation has had significant impacts on design across brands.
Set up a new design system for other brands to follow
Added league level, and team level branding to promote immersive experiences
Created re-usable dynamic content modules that can be re-used across all other pages on the website
Allowed for more cross platform collaboration
Catch a glimpse here!
Like what you saw? Let's work together