The CBS News "watch experience" was a catchall term used to describe the video/live features of its website and apps, which hosted a combination of live streams and video-on-demand clips. This case study covers a few projects I worked on, large and small, related to the CBS News watch experience on its OTT apps. See also my contributions to the Web and iOS watch experiences.
Covered in this case study:
Original App: Header Refinement
One of the first OTT app-related project I worked on was a refinement to original app, to which I had not previously contributed. Static mocks coudln't do the job, so I built an interactive prototype, shown in the screen recording below. Headers such as "Shows" and "Latest" would appear in a floating roundrec when navigating up and down using the remote.
App Redesign
Circa 2019, I was the designer for a substantial redesign and relaunch of the OTT apps. This was a long and difficult process, for a number of reasons. For one, CBS News had apps on almost every available platform (tvOS, Roku, Amazon Fire, Xbox, etc.), all with varying constraints. For another, the Product person in charge of the project had a strong vision that the Creative Director did not believe in, and I was caught in the middle.
Her vision was to move away from the existing app model of a full-screen interface presenting an array of available livestreams, VOD segments, and playlists, of which the user moves in and out. Instead, the new app would always be playing something: the national livefeed immediately on launch. The interface would only cover approximately half the screen at any given time, and any selected content would replace the stream. Also explored but cut due to platform restrictions was the ability to play multiple feeds at once.
I would describe my role for this particular project as being far more UX than UI. We began the project working in "aspirational wireframes", meaning real content in loosely designed state, while exploring and evaluating features and functionality. The Creative Director did not like what he was seeing, and created a UI treatment, which I had to work within on all subsequent explorations.
We ultimately had to discard most of the Creative Director's work for platforms other than tvOS, which were not able to render elements like gradients, transitions, rounded corners, etc. The original plan had been a single design for all apps, but I wound up having to create and maintain two full sets of designs: one for tvOS, and another for everything else.
I am currently going through my files and screenshots to pull selections from this long process. But for now, below is a screen recording of the interactive prototype I built to showcase the redesign in internal presentations, made after the Create Director's UI treatment. The user could view it in any browser, and interact with it using the keyboard arrow keys to simulate a remote.
Video Push Alerts
After the 2019 redesign of the OTT apps launched, I continued to work with the same Product person on a new feature: Video Push Alerts. Below are screen recordings of my prototypes.
This first is my own preferred interaction model, where a new alert would push back the currently-playing live feed or VOD clip, and the user could use the remote's arrow keys to select between the currently playing video or any of the available alerts. This would have been difficult but possible on high-powered Apple TV devices, but likely not on almost any other platform. Also, I don't recall anybody else other than me liking this.
The below prototype demonstrates a horizontal panel that is initiated by either a new alert being delivered, or the user manually clicking the left arrow on their remote (or swiping left on an Apple TV remote):
Below is a screen recording of the close-to-final version of the feature:
A quick variation of the above, exploring how it would look and work if it was tied to the remote's "up" button:
I also produced at least one non-interactive prototype, to demonstrate the delivery of a new alert, and the expiration of an existing one. Screen recording: