CBS Video Player Concept
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.
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.
Original Site Design and interaction Flow
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 and User Flow
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. 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
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.
Wireframes - Desktop Player
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.
Wireframes - Mobile Player
Users choose video category from show menu. Inline video player presents above sub-navigation bar in portrait mode so users can watch while browsing. Alphabetical show navigation displays as side scrolling on mobile devices significantly minimizes scrolling work for users.
User Research
“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.”
Revisions after User Testing
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.
Content Navigation
Users can read episode detail by clicking info on show cards. Sub navigation adapts to the selected Show's menu items. With Full Episodes tab selected, menu presents list of available show seasons. When Videos tab is selected, navigation menu shifts to present CBS sub-categories of videos i.e. Clips, Previews and Behind the Scenes.
Mobile UI
Video browse panel layout and functionality carries into the mobile platform. Users can view inline video player in portrait view while still scrolling through episodes. Shows browse tab brings up full library of CBS shows with alphabetical navigation for faster access.
Desktop & Tablet UI
After multiple rounds of user testing, the show menu bar was modified to lead with Full Episodes, Video Clips with a tab to browse All Shows. We observed that users found the All Shows link easier when it was placed along the main sight-line of the other primary navigation items.
In-Player Shows Browse
On tablet and desktop platforms, the in-player show navigation utilizes a vertical alphabetical menu format. Users can tap on a letter to jump to show names starting with that letter or scroll the list and the indicator adjusts its position according to shows in-view. Tapping on a show poster brings user to that show within the video player experience.
Video Clip of Prototype
Results
Based on overwhelmingly positive user testing results of the Show navigation feature, it has been implemented on the CBS website starting with the Shows page on the mobile web platform. Future design plans are being studied for evolving the video player across all platforms.