Android Peel App: Part2

image1.png
 

Design Objectives

The goal was to create a show details screen that was not only functional but aesthetically pleasing. 
The redesign of the show details screen needed to meet these following goals:

image2.png

Offer a navigation that was intuitive to understand, could scale for multiple features, easily be localized and be easily accessed.

image3.png

Increase user retention by integrating social media, relevant Youtube content about the show and tertiary content (voting module for live events, surveys, etc.)

image4.png

Give users the options to consume and explore content directly with the Peel Smart Remote or broadcast it via Chromecast.

 
image5.png
 

Glyph Navigation

The power of a glyph based navigation is that it scales easily compared to the tab bar. This 
approach utilizes less space compared to a tab bar navigation and it resolves the issues with 
localization. As a means to familiarize users to the new navigation approach the layout takes
inspiration from a classic analog remote.

 
image7.png

Expanding the navigation displays all features as glyphs. This approach enables user to quickly scan the navigation. Glyphs are organized as rows and stacked based on order of importance.

The navigation locks with the top action bar insuring persistent access when sifting through content cards. Content cards flow behind the navigation in a nonobtrusive manner. 

image9.png

When pivoting to a section the access point to the glyph navigation is always persistent and located at the top upper right corner of the screen. This offers easy access to all feature at any time.

 

Tune-in Features

An issue I worked to resolve was around the ability to tune-in while keeping context in the 
program guide. The original design forced users to make 2 taps in order to access the tune-in
button which was located in the show details page. This created a ping-pong behavior and made
channel suffering difficult. Below are some motion test I did that allowed user to tune-in while
keeping context. All while serving unobtrusively a shows details either from the right side or below.

 

Option A

image11.png

Option B

Option C