The splash screen is the user's first impression of Fandor. It offers a short brand overview and two buttons: "Sign Up" and "Log In". The image was chosen from several that were tested in a Facebook ad campaign.
Overview
Fandor is partnering with Costco and Vizio by pre-installing Fandor all Costo-sold Vizio TVs. This gives Fandor the opportunity to cast a wider net and acquire new users. It also provides a new streaming experience for current subscribers who own Vizio TVs.
The Problem
• Fandor does not have a TV app that can be ported to the Vizio TV OS
• Urgency from the Fandor executive team and Vizio partners
The Solution
• Build a TV app in the most smart and efficient way: Use existing data and structure from existing Fandor TV apps, incorporate learnings from other platforms, focus on simplicity and strive toward future use cases
Goals & KPIs
Business Goals
• Acquisition (gain new users through a new platform)
• Retention (give current users another opportunity to connect and watch)
Business KPIs
• New users via Fandor.com/vizio sign-up page
• Conversions percentage (free trial to subscriber) vs. overall average
• Total movie starts vs. average across all Fandor TV platforms
• Monthly viewing hours vs. average across all Fandor TV platforms
Product & Engineering Goals
• Create a universal TV app that can be repurposed for Roku, Comcast, AndroidTV and other devices
Research & Planning
Competitive Review
• TV app interfaces: Netflix, Hulu, Amazon, HBO Go/Now, Great Big Story, FilmStruck
Fandor Audit
• TV apps: Roku, AppleTV, Comcast, Android TV
• Desktop app: Fandor.com
TV App Documentation
• Best practices: Roku, Vizio
Past Fandor Research
• Movie Discovery Survey (2017)
• Subscriber Cancellation Exit Survey (Weekly)
Fandor Brand Book
• Fonts, colors, buttons, copy tone, etc.
User Personas
Primary (Acquisition-based)
• New to Fandor
• Male 18-44 interested in Arts & Entertainment
• Costco member and new Vizio TV owner
• Motivation & Goal: Explore Vizio TV apps, find relevant ones and sign up for Fandor
Secondary (Retention-based)
• Fandor subscriber
• Vizio TV owner, no OTT devices (Roku, Apple TV, etc)
• Motivation & Goal: Download the Fandor Vizio TV app and enjoy their service on another platform
Initial sketches and wireframes took into account the project's constraints: limited movie collections, few engineering resources, several Vizio OS-specific restrictions, and a tight deadline.
Data Limitations
One important thing to note is that because of time sensitivity on this project, as well as limited backend effort, we focused on simpler ways to bring movie data into the TV app. Our solution was to ultimately pull in the same data that is available in the Fandor Android TV app.
Data Available
• Movies
• Movie Collections (Featured, New, My Queue, For You & Continue Watching)
• Movie Details (Title, Cover Photo, Description, Genre, Year, Region & Related Movies)
The site map is broken down by each screen (black cards) and its associated content (white cards).
Ideal user flow to the movie page through homepage browsing or search. The KPI with all platforms is viewing hours, so movie starts are very important.
User Testing
Testing was conducted on Usertesting.com using a clickable prototype built with Sketch and Invision. 5 users were asked 15 questions about onboarding and discovery.
Part 1: Onboarding
• Goal: Determine if users understand what Fandor is and what actions can be made when they first open the app
• Test: Users were given the Fandor splash screen and asked a series a questions about the brand and the process to log in and sign up
• Learnings: The product purpose and screen actions are clear, sign up within app and better splash screen imagery are nice-to-haves
• Considerations: In-app sign up for post-MVP and continue testing of images on social
Part 2: Discovery
• Goal: Determine if users understand how to browse by asking them to navigating between rows and visit the movie page
• Test: Users were given the Fandor home screen and asked a series a questions about what is shown and how they would access a specific movie
• Learnings: TV browsing is intuitive ("feels like Netflix"), hierarchy of movie info is unclear, discovery is limited, "how do I get back?"
• Considerations: Update at-a-glance movie information, add a "return home" button and outline post-MVP collection pages
A clickable remote was added to the Invision prototype to help simulate the TV experience during user testing.
Movie cards evolved after user testing, from just the title to the title and high level details. The hierarchy also changed so that the title was above the details. Note: other mocks do not reflect final changes.
Design
Design included the initial prototype, changes to the prototype (based on user feedback), additional screens and interactions, animation examples, and much more.
Tools
• Whiteboards
• Sketch
• Principle (animations)
• Invision (prototyping)
• Contrast (accessibility)
Keyboards are consistent across the log in and search screens for user familiarity and minimal engineering effort.
The log in flow keeps users on the keyboard with "Back" and "Next" buttons. This avoids a potential frustration of jumping back and forth between the keyboard and fields.
The home screen displays rows of movie collections. There are two types of collections: Fandor-curated (ex: "New Releases") or user-initiated (ex: "My Queue"). The row order changes if the user is new or returning.
The selected movie is always anchored in the top left to help maintain the user's focus.
The movie screen contains essential movie information and actions that were learned from previous user research. There is also a related movies row, which is dimmed until the user selects it.
Push up and fade in of related movies to shift user focus when that row is highlighted.
The player screen repeats essential movie information, as well as a progress bar and clear remote status icon in the center (play, pause, fast forward and rewind).
Fade in/out between the movie screen and player to prevent jarring transitions.
Search is a different experience from the homepage. It includes a grid movie format that provides users search results as they type. It also allows them to navigate easily between the keyboard to movies.
Next Steps
• Learn from initial user data and make small iterative updates to the base product
• Determine approach needed for AVOD implementation
• Introduce new feature ideas to enhance the user experience and reach business goals
• Allow learnings from this app to help guide Fandor TV app refreshes (Roku, Comcast)
• Continue to iterate over time and make this the best TV app ever
Post-MVP designs include a genre section, full movie descriptions and enhancements to the movie page.