Fan TV Live TV Listings

Creative Director

Overview

As Fan TV matured beyond a streaming content aggregator, partnering with cable companies to provide an end-to-end integrated content discovery solution, our applications needed to better incorporate live tv as a source. We aimed to create a Live TV Listings solution that put the user and her interests first, going beyond the conventional grid layout.

Primary Contributions

  • HTML/JS Prototype – Surfacing Data Availability and Structure
  • Creative Direction, UX Design, UI Design
  • Interaction Prototypes Demonstrating Transitions and Behaviors
  • Available in the App Store »

Examples

  • Live TV Listings Landing Screen & Listings Screen

Low Fidelity Prototype

When design work began on the Live TV listings feature for the Fan TV iOS app, APIs did not yet exist to accommodate listing programming on a per-channel/chronological basis. To provide Product and Design a better idea of the amount of content and meta data available, I created a very rough HTML/JS prototype against our existing APIs.

The end result enabled the team to immediately get started on more clearly defining the feature and gave a much clearer picture of how we may want to (or not want to) architect the feature. Additionally, the teams were encoureaged to use the prototype at home any time they watched television. This would both help establish user empathy, as well as give a clearer understanding of what filtering of content may or may not be useful – allowing us to see what filters were effective, and the amount of real-world results for any given set of filters.

Try It Out »

High Fidelity Bahavior Prototype

Behavioral prototypes were created at varying levels of fidelity for engineering, to demonstrate animations and interactions with the UI. We experimented with new tools as they became available: Origami, Invision, Marvel, Framer, Proto.io, etc. Principle quickly becoming our preferred tool for prototyping. We still use whatever might be most appropriate for the given scenario, on a case-by-case basis. The example provided here was created in After Effects.

View the Prototype »