Manager, User Experience
Video Player-Index.png

CBS Video Player

This project was to rethink the CBS web video player page to provide an improved user experience for browsing and discovering video content. Envisioned a new approach where users could have quick access to the full library of CBS shows and video clips without needing to dig through long carousels or deep link in and out of show pages.

Role: UX, UI and Prototyping

Strategic Goals

Strategic Goals

Make it easier for users to navigate and discover videos.

Streamline organization of shows, episodes and video clips.

Increase viewer immersion and retention within the video player experience.

Current Site Structure

Current Site Structure

User flow path of current CBS live site from Shows Catalog to Show Page to Video Page. User research presented multiple opportunities to simplify path to and from shows and video content for a smoother, more immersive experience. Objective was to rethink the Video Page so that users could view show content while simultaneously browsing other videos as well as navigate to other shows without leaving the player itself.

Revised Architecture

Revised Architecture

Merges site navigation for CBS Shows, Episodes and Video alongside quick access to All Shows and the global site. This approach creates a digital video room where the user can watch any video they choose while staying within the player experience. 

videoPlayer_showsHub.png
All Shows Navigation

All Shows Navigation

Users can browse full library of CBS shows while viewing videos. Alphabetical auto-scroll tool makes this process quick and easy. Clicking back button returns user to current show page.

Ideation

Ideation

Exploration of a side-panel menu to combine video browsing and expand navigation to all CBS shows within the video player experience. Initial concepts utilized a single button dropdown list which would open up the video categories for each selected show.

Episode Browsing

Episode Browsing

Video list icon in upper right corner opens side panel scroll presenting episodes of current show.

Show Content Menu

Show Content Menu

Each show presents its own menu list of video content. Here users can quickly jump to different sections.

Show Navigation

Show Navigation

Users select 'All Shows' from menu then click on the first letter of the show name to auto-scroll to their selected show.

Mobile Video Browsing

Mobile Video Browsing

Users choose video category from show menu. Selected video plays above sub-navigation bar so users can watch while browsing.

Mobile Show Browsing

Mobile Show Browsing

Having the alphabetical show navigation on mobile devices significantly minimizes scrolling work for users.

User Feedback

User Feedback

“I feel like it's easier to navigate with video episodes and clips displayed on the side rather than having to scroll the full page and lose the player view. I prefer being able to watch a video while browsing other videos.”

Show Video Menu

Show Video Menu

User testing uncovered room to further streamline navigation by surfacing high-use categories to top level and simplifying dropdown menu. Arrived at a 4-button menu architecture for CBS Show navigation and content filtering. When users select Full Episodes, dropdown menu presents the Seasons list. With the Video tab selected, dropdown presents the Clip Category list. The All Shows tab pulls in CBS Shows catalog with an alphabetical navigation used to autoscroll names by letter.

Video Menu Flow

Video Menu Flow

Users can read episode detail by clicking info on show cards. Sub navigation adapts to the selected Show's menu items. In this instance, the Full Episodes tab presents 8 Seasons of NCIS Los Angeles and the Video tab presents sub-categories of Clips, Previews and Behind the Scenes.

Mobile Experience

Mobile Experience

Video browse panel layout and functionality carries into the mobile platform. Users can play video in portrait view while still browsing.

Desktop Experience

Desktop Experience

After multiple rounds of user testing, the show menu bar was modified to lead with Full Episodes, Video Clips and Season selector. All Shows button placed as a global link at top right corner. Show pages open with key art photo and description.

Viewing

Viewing

Episode detail is displayed under each playing video while in the browse view format. Users can also click the info button on episode cards for a description dropdown.

Alphanumeric Navigation

Alphanumeric Navigation

Based on consistently positive user testing results of this Show Navigation feature, it has been engineered and deployed on the production CBS site starting with the mobile platforms.

Prototype Development

Prototype Development

Built in Proto.io, this prototype focused on the desktop and tablet experience. As we went through user testing rounds, the design evolved each time to streamline the user flows and information design. 

Click below to see the prototype.