CBS News for Apple TV

Refining interactions and transitions to make browsing seamless.

Following Apple’s major refresh of the Apple TV operating system and hardware, our CBS Interactive team embarked on a major effort to bring a brand new CBS News app to Apple TV. I guided User Experience and Interaction Design for the project, and was heavily involved in shaping Information Architecture and Visual Design.

Date: Summer 2016

Brief

Fresh off our total redesign of CBS News for iPhone, we were asked to bring CBS News to a much larger screen: TV.

Using Apple’s tvOS UIKit, we would need to reimagine the basic CBS News content modules from the iPhone and iPad app for a medium with a vastly different interaction paradigm: tiles on a larger screen—which users sit farther away from and interact with with a remote. The app would need to include core functionality from our apps and website: show channels, video-on-demand (VOD) clips, curated playlists around timely news events, and our 24/7 live streaming news channel, CBSN.

Process

cbs-news-apple-tv-3

With interaction so critical to the platform, we iterated interactions early on with everything else—which also helped us win over stakeholders internally.

The tvOS platform has fairly a standard interface baseline: rows of tiles that users navigate between using the remote, with a “focus” state to indicate which tile is “selected”. As interaction design is so integral to the platform, we didn’t have the luxury of a typical linear process: we would need to iterate on all aspects of design at once and let them inform one another.

Our first task strangely combined information architecture and visual design: how should we curate the rows, in which order should they appear, and how should we visually differentiate them from one another? We introduced hierarchy with standard 3-across rows for VOD, an optional giant 1-across hero for content we wanted to promote, and smaller 7-across fixed row for the show channels. Each row’s visual treatment—both focused and unfocused—varies to differentiate them.

One special consideration was the live channel: how to foreground and promote CBSN? We decided to aggressively promote CBSN by having video (and audio) launch upon app startup in a minimized state in the corner, then transition to full screen video after a few seconds of inactivity.

cbs-news-apple-tv-2

Task flow and interaction notes

Throughout, I iterated the interaction design—focus states, and transitions between elements using Facebook Origami, which allows highly accurate interaction prototypes that simulate development and allow communication with developers. These interaction prototypes also came in handy when presenting to internal stakeholders. As the comps came into view we met with various teams within CBS News—show producers, business teams, etc.—to shop around ideas and get a daunting list of approvals. As these teams typically weren’t fluent in design, we needed to come in with fairly polished / high-fidelity visuals and interactions to get buy-in. Additionally we met with Apple interaction team in Cupertino to review early prototypes and get their feedback.

After we got sign offs and the app builds became more polished, we tested a high-fidelity prototype with paid, random users from the public. We asked them to explore the app, complete a series of tasks, and solicited feedback as they were doing it. Feedback was generally highly positive, but we did get feedback that allowed us to improve the product for shipment.

Solution

Our app feels familiar yet fresh, foregrounds CBS News’ live video, and allows users to customize their experience.

Our app feels familiar as it adopts basic tvOS conventions, yet innovates enough to achieve internal business objectives and introduce our audience to key CBS News products.

The app was a huge success. It was featured on stage during WWDC, and increased streams dramatically according to internal metrics.