CBS app - download & Play Overview
CBS All Access is in pursuit of growing its presence in the streaming TV space. Offering video downloads for offline viewing on mobile devices has been identified as an opportunity to increase value of the Commercial Free premium subscription tier. This project represents a collaboration between product, design, engineering and stakeholders to ideate, prototype, user test, build and prepare for launching this feature on the CBS App in Q3 2018.
Design Team
Daryl Harris, UX Design Manager
Elaine Fang, UX Designer
Kamil Markowski, Sr UI Designer
Original CBS App
UX Team and Product Management assessed CBS Mobile App and determined the existing video card components would require redesigning to accommodate the upcoming video download feature. The video card layout was too small and dense with labelling detail to allow for any additional action buttons at the top level.
Strategic Goals
Increase Commercial Free Trials, starts and existing subscriber upgrades.
Improve Commercial Free subscriber retention.
Improve Commercial Free customer satisfaction.
User Flow Comparison
Initially, the engineering team wanted to pursue the easiest route to implementation for the download feature which was to simply add it onto the content ‘info’ overlay screen. However, this was shown to be a rather inefficient 5-step process from discovery to download and return to show page. The most efficient user flow was provided when quick access to downloading content was provided at the top level with a revised card structure and a single column page layout. Initial steps to discovery were reduced to 3 and each subsequent download was only a single tap action.
List-View Layout
Select show seasons with dropdown menu. Single column list view maximizes number of viewable episodes while scrolling. Download multiple episodes at once.
Carousel Layout - MVP
Displays show seasons in rows of carousels. Video cards resized to present episode image, title and action buttons for details and download.
Initial Sketches
Explorations of new layout configurations and information structures for video card components to include the download functionality.
Redesigned Carousel Video Card
Increases video card width and height from existing app layout to allow for larger font size, spacing and lower action buttons for episode info and download.
Show Page - Episode Carousel Format
Showing action sequences of arriving on show page, scrolling through season carousel, initiating an episode download and reviewing on download manager page.
List-View Video Card
Structured to provide minimized footprint for faster browsing while offering quick access to episode details and initiating multiple downloads at once.
SHOW PAGE SEASON MENU
Full screen overlay format was explored as a navigation option to accommodate shows with both short and long season catalogs.
Show Page - Episode List Format
Presents new single column layout for Show Pages. Episode info displayed as a full screen overlay. Tapping multiple episodes for simultaneous downloads easier with less scrolling.
USER TEST - Key Takeaways
The second prototype having a listview show page layout tested best with users for overall browsing usability and downloading multiple episodes simultaneously.
The MVP prototype tested well with users who preferred its larger episode card size and easy to tap buttons for episode information and downloads.
Users were evenly split on action of swiping through horizontal carousels vs. scrolling list views of video content.
Both prototypes tested better than the original CBS App in terms of overall impression of simplicity and improved ease of use.
USER TESTING - SHOW PAGE CAROUSEL FORMAT
Users appreciated larger size episode card over current app and clarity of functionality, but were evenly split on preference of swiping through horizontal carousels vs. scrolling with a vertical list view. User observations revealed many did not realize they could download multiple episodes simultaneously mainly due to only viewing and interacting with 1 card at a time.
“Downloading is very easy but I waited for one episode to finish before downloading next one. ”
“I prefer swipe format, the problem with up and down is if you go too far it becomes annoying to scroll back to the top of page...at least left to right there’s a limitation to it.”
USER TESTING - SHOW PAGE LIST FORMAT
In comparison to the carousel format, the overwhelming majority of users (11 out of 12) found the vertical list structure of the show page 'very easy' to browse, access episode info and download multiple episodes simultaneously. Smaller thumbnail size allowed for reduced scrolling work while making it more clear that users can download multiple episode simultaneously. Additionally, users commented the season selector dropdown menu made the page view more focused on the desired content.
“This version works better because you can download multiple episodes at one time, it makes it much easier.”
“Works wonderfully; I’ve got a nice way to download multiple episodes in one shot, and delete multiple episodes in one shot.”
Video Download Manager
Tapping ‘Edit’ displays delete buttons for each downloaded video. Bottom action button competes delete selection/s.
Account Upgrade Flow In-App
Users with 'Limited Commercials' plan are prompted to upgrade to the premium 'Commercial Free' subscription plan to enable the video downloads feature. This process is made easy with a simple 2-step flow that returns user to the show page with the episode download initiated.
Production Build - Show Page
Final configuration of the production MVP build in carousel format. Revised card structure increased space for title, and positioned episode, date, download and info buttons along the bottom action bar.
For compatibility with the interaction design between iOS and Android platforms, the 'download status snackbar' was replaced by a download indicator in the upper right navigation area when a download is active. Tapping this icon links to download manager.
Episode Browse and Download
Slide 1: Episode information overlay
Slide 2: Episode 1 download initiated, download manager icon displays active status
Slide 3: Episode 2 queued, download manager icon updates active count
Slide 4: Episode 2 download starts
Slide 5: Episode 1 video card updates status that download is complete
Download Manager
Once user has downloaded video content, the 'My Downloads' page serves as the access point for saved episodes within folders for each show. The number of downloaded episodes is displayed with each show card. Users can remove downloaded videos by tapping the 'Edit' tab.
The bottom CTA 'Browse More Downloads' links user to the Shows Browse page listing shows with downloadable content available.
RESULT
Given the high priority of launching the Video Download feature, the carousel card version was selected to be built upon the existing app architecture for the initial release. The user-preferred list-view show page format was scheduled to follow post-MVP with an app update.