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.
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.
The site map is broken down by each screen (black cards) and its associated content (white cards).
A clickable remote was added to the Invision prototype to help simulate the TV experience during user testing.
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.
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, not below, the details. Note: other mocks do not reflect final changes.
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 (based on more user testing) include genre browsing, a full movie description, and a universal "Return Home" button for easy access to the home screen.
Back to Top