Fan TV 10ft Browse
Context
Fan TV is an app that enables users to browse millions of TV shows and movies, add them to watchlists, and deep-link to viewing resources. The initial version of Fan TV on the TV platform was designed years ago. The visual design appears outdated, and the user experience is not user-friendly. The project aims to rebrand Fan TV with a new UI and UX.
I am the lead designer of this project, responsible for designing from concept to completion, including research, wireframing, workflow, high-fidelity mockups, transitions, and animations.
Project Goal
Browsing is a section where users discover content. Users should be able to browse content efficiently on a TV screen using a TV remote.
The design goals include:
Redesigning the information architecture to make it easier to understand and reduce confusion.
Redesigning the layout to make the interface user-friendly for a TV-watching experience from a 10-foot distance and with TV remote input.
Improving the visual design to make it modern and match the Fan TV iPhone app.
Platforms
Amazon Fire TV, Google TV.
Current Design
Navigate left and right to change sections (Friends, Genres, In Theaters). Navigate up and down to change lists (Action, Adventure, Animation).
Posters at the bottom are not selectable; they are just for preview.
Navigate left and right to change posters.
Actions such as 'Play On Demand,' 'Trailer,' and 'Watchlist' are not selectable; they are just for preview.
Problems with the Current Design
The interface and behavior are not TV device-friendly. Many TV users instinctively press the down button, expecting to navigate downward to select a poster or play a movie. However, the information at the bottom is solely for preview purposes. The interface was originally designed for a touchscreen device, not for a TV screen with a remote control.
The lists menu occupies 2/3 of the screen, while the posters only take up 1/3. It's not enjoyable to read a large amount of text on a TV interface.
The visual design is outdated. Orange and purple are no longer the brand colors of Fan TV. The design team has decided to transition to black and white, as seen in the Fan TV iPhone app.
Design Solutions
Utilize vertical scrolling effectively to display content.
Decrease the amount of text content on the screen.
Revise the visual design to align with the style of the Fan TV iPhone app.
Redesign
Wireframe
There are six different layouts, all adhering to the grid system to maintain a clean interface.
Hi-fi Mockup
To align with the Fan TV iPhone app, black and white are used as primary colors.
Black overlays and gradients are applied to posters to ensure readability of text.
White is utilized to indicate focus states.
