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
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.
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.
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.
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.
Video list icon in upper right corner opens side panel scroll presenting episodes of current show.
Show Content Menu
Each show presents its own menu list of video content. Here users can quickly jump to different sections.
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
Users choose video category from show menu. Selected video plays above sub-navigation bar so users can watch while browsing.
Mobile Show Browsing
Having the alphabetical show navigation on mobile devices significantly minimizes scrolling work for users.
“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
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
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.
Video browse panel layout and functionality carries into the mobile platform. Users can play video in portrait view while still browsing.
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.
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.
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.
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.