Streaming TV App Plus
Fire TV • Roku • Apple TV
Project Overview
The goal of this project was to create a new local news streaming TV app platform for each of TEGNA's 64 new stations. This new "+" app features a 24/7 stream and advertising-based video on demand. This app is available on Roku, FireTV, and Apple TV.
My Contributions
I was responsible for the full design process - information architecture, wireframes, and user interface. I worked with the product owner and dev team at different stages. Later, I presented to the Chief Digital Officer, VP of Content, and other stakeholders.
Information Architecture
The content organization consists of 1) main sections, 2) categorized carousels , and 3) the secondary sections (search and settings). Main sections titles are the same for all new stations, but the carousel's content within each section can be managed in the CMS.
Wireframing
After we defined the content structure, and thus what screens we needed, I created wireframes so that I could rapidly iterate on placement and hierarchies.
A major requirement of the app was that video would be playing in the background on the main content sections of the app. The "home" section of the website is called Watch and this is where a user can watch the 24/7 stream and peruse featured content. The carousel at the bottom of this section was in effect a "channel changer" UI. When a user scrolls horizontally the background video updates.
The remaining video sections use the same template. When a user clicks on a video, the background updates. After a specified time the carousels and nav disappear and the video is in full screen mode. Interacting with the d-pad on the remote will bring the UI back.
Final UI
The splash (loading) screen was a great opportunity to showcase location specific photos already being used in the mobile apps as well as reinforce brand consistency between platforms. A different photo displays during morning, day, and evening times. A streaming TV "plus" logo, designed by TEGNA design hub, is placed on top.
The look and feel of the app utilizes black as the main color. I used transparency and gradients to both highlight content as well as make UI more readable when it is layered over a video or image. I followed best practices regarding font sizes and layout "safe areas".