Video News

The Problem
Our client, a digital news aggregator was looking to increase their Android user base by enhancing the phone and tablet experiences. They also had a new partnership with Amazon's newly introduced Fire TV platform, but they needed help breaking into the OTT ("over-the-top" TV app) market.

The Solution
Our team developed a suite of device-centered designs for Android phone and tablet, Amazon Fire TV, and it's mobile component Amazon Fire Phone. Focusing on an easy-to-use interface and a robust library of curated news videos, the OTT application became one of the leading apps in the Fire TV marketplace, becoming the #8 most downloded app on the Fire TV charts. The product paved the way for our client's future OTT apps, such as Apple TV.

Product: Amazon Fire TV + Fire Phone, Android Phone + Tablet App
Industry: News & Media
Agency: Punchkick Interactive

Roles
Concept Strategy
UX Design
Interface Design

Fire TV UX
As a brand new platform, the design team began with a comprehensive study of Fire TV's user experience guidelines. We found that the platforms recommendations were similar to other standard OTT practices, but were limited by the capabilities of Fire TV's remote. 

OTT UX
After doing a competitive analysis of similar video platforms, I used the Fire TV guidelines to inform my initial concepts. I found that a category-based navigation would work simply with the Fire TV remote. I continued iterating on the overall navigation through wireframe sketching, until finally settling on a homescreen view that would allow the user to see top stories with one click. 

TVs layout_newTVs layout_new

Fire TV Interface Design
The final design utilizes the Fire TV's built-in gestures, such as "click and hold" to view more. A large hero image for each category allows the user to immediately play the video, while holding the remote button will let the user view more videos in the selected category. 
Additional features include adding videos to a queue to create a custom playlist, video search, and viewing a full written article.

The visual style followed compliancy guidelines for disabilities and general TV use. Recommendations include dark backgrounds, medium contrast, and large text sizes. Since there is no cursor on the TV, hover states are crucial for indicating the user's current position. Using a consistent color pop, the design clearly marks the location of the "cursor."

TVs2TVs2
TVs3TVs3

Native Apps
Through heuristic evaluation and competitive analysis, the team defined the main pain points of the old Android apps: A poor user experience and out-dated visual design. Repurposing features and styles used in the Fire TV app, the Android apps were given a brand new, material design-inspired visual treatment. With platform-centered user experiences, the apps also promoted mobile-specific features, such as an offline mode function, and the adoption of Android's floating action button.

Phones MockupPhones Mockup
Newsy TabletNewsy Tablet