At You.i we have been investing heavily in the TV and media space, and working with some of the biggest brands to define the future of Smart TVs and media management.
We recently developed our FlipTV demo, which demonstrates our user interface framework’s capability as well as our vision of how tablets and TVs will continue to provide new and innovative ways to watch your favourite content in a complementary manner.
While many of us have been cutting cable and experimenting with all these services, we’ve also experienced some of the frustration as well. Now that I use Netflix every day and love the service on many levels, I find myself frustrated with the current state of the application experience and design. I thought it would be a great opportunity to take some features from our FlipTV demo and translate them over to Netflix for fun.
So here goes…
In recent weeks Netflix has started to ramp up their social integration but iPad lacks the ability for users to login with their social credentials. Yes it seems to be the new flavour when it comes to logins, but if the user experience is incorporating social features then social logins make sense. And most of the time it cuts back on the tedious task of remembering and entering your login info.
I’ve also introduced a little visual impact by bringing in some rich imagery to give Netflix users early insight into some of the great content recently added and available through the video on demand (VOD) service.
I think everyone agrees that one of the most frustrating parts about Netflix is that your personal recommendations can quickly get muddied when having multiple people using the service in your home. And the “Just For Kids” setting just isn’t cutting it. Apparently all I want to watch is My Little Pony no matter which ‘mode’ I am in.
Here I’ve inserted a profile selection option into the application. Not only does it allow the service to now offer up the right recommendation on my specific tastes but it also brings a level of ownership to each user. Now my kids can really feel like they own my iPad – wait – they already do.
Users can now customize their own profiles with their own images and quotes while also receiving specific notification and alerts based on their profile.
Here is a visual prototype of what the experience would feel like as a user navigates from the login screen to the profile selection screen. This shows how companies can start owning their visual brand by introducing custom and purposeful animations to their products. In this example the animation helps emphasize continuity and relationship between the login and profile states of the application.
NAVIGATION & DISCOVERY
To the left you’ll notice a new vertical menu strip. This allows users to access options easily using their thumbs while optimizing the vertical real estate of the device. Not only functional but it also looks sweet and unique.
I admit that grid layouts generally drive me nuts and it’s typically due to the context in which they are used. I don’t like using grid layouts when trying to present users with content lists or items that should be given the ability to be sorted or have some chronological order to them.
However, when I think of ‘Discovery’ as a grid layout, it seems appropriate. There doesn’t have to be rhyme or reason to the content. It’s an area to stumble upon something you may not have considered before, while also presenting the content in a fun way.
In this prototype, animation has been incorporated to bring the grid to life. Each grid area can provide more detail for each discovery item. Within the grid are five types of content discovery: quotes, people, image galleries, posters and features. Each item could present the user with multiple instances of itself for a much deeper look into a piece of content to discover. For example, image galleries could cycle or allow users to swipe through various images associated to a piece of content and similarly with quotes.
I’m also showing how users can swipe the grid up and down to unveil more discovery items that are specifically tailored to that individual’s tastes.
In the current iPad approach the search field is very small and confined in the top right corner of the app but search is a powerful tool and deserves to shine.
A full screen search option gives users more visual real estate to list many more results on screen at one time. Pushing the keyboard off screen would list five times more results on screen than you get in the current app. Yes that’s right, five times the amount!
Here I’ve divided the results in three vertical scrolling lists represented by TV Shows, Movies & People. I’ve purposely included a People category, a lot of users browse and find content options based on actors and directors; the current app doesn’t support this level of search.
Visually I kept the listings screen consistent with the online version. I’ve supplemented all category listings with consistent social feeds as the current app only presents a social feed on the home screen.
A ‘view all’ button allows users to expand a specific category and it provides a numeric indicator to give users a sense of how many titles are part of that list.
At the bottom of each title are both Netflix community ratings and a 3rd party rating system. When users are trying to make a quick choice between content items the community rating can help them make that call. Additionally 3rd party ratings are great as these ratings are given during the early stages of its release when audiences are more engaged in providing an opinion.
Because of the vertical menu layout, I’ve been able to present the user with more onscreen options without having to scroll too much. Efficient use of the available space.
Categories such as New Arrivals, Popular on Netflix, Recommended and Friend Favourites have been added and/or given their own full listing screens. Being able to see a full list of content influenced by my friends’ viewing habits without having to dig through categories and sections brings more value to the user.
Dynamic animations have also been explored to bring a more unique and brandable experience to Netflix users. These memorable interaction moments deliver differentiation to users.
WATCH LIST & ALERTS
For a VOD provider like Netflix where the content releases are not timely, not consistent, or not perceived as such, watch lists and notifications can help provide visibility for users. Can someone please tell me when the next season of Sons of Anarchy is getting released on Netflix?
Watch lists can facilitate the option to watch something later or provide updates on a TV series when a new season is released. Similarly, if choices are based on your favourite actor or director it could also provide recommendations or notifications when new content has been added to the catalogue featuring that person.
Unique and intuitive interactions, for example, pressing and holding on a title to trigger the watch list to automatically open with the ability to drop that title into your list is a great way to provide fluid, effortless and fun moments to the app.
This interaction prototype illustrates a streamlined use case of adding a title to a watch list. By simply long pressing the poster, the watch list component automatically opens to allow a user to drop their selection into their custom list. Again these simple interactions coupled with branded animation styles will give someone like Netflix a more memorable and usable experience. These are moments that capture a users attention while also making a feature unique and fun.
One of my favorite pieces in this redesign is the details page. In the current app everything is crammed in this little pop-over box and features like recommendations are compromised between TV shows and movies due to a lack of space.
Now we get to see content in all its glory! Rich images can rotate in the top header area along with a set of tools to promote content. A three column layout provides enough real estate to list episodes, view cast members and provide ample recommendations.
How many times have you had to leave the app to see details on an actor? The intent here would be for users to tap a cast member to view their actor page and movies they’ve been in. Recommendations has been improved to see more recommendation sets, not just “people also watched this” but something like “more shows on FX”.
I took a look at the video player and believe there’s still room to explore.
I streamlined the player by giving it the same look and feel as the rest of the app. Additionally, I felt a tagging feature was worth further consideration. As part of the Netflix community, I’d like to see the “Water Cooler” aspect of TV Shows and Movies expanded.
“Do you remember that part?” or “Did you see Jubilee sitting in class during X-Men?”
Giving users and their friends the ability to tag moments on the content’s timeline could create a dialogue between friends while also promoting more social activity within the app.
This layout considers the user is air-playing content to their Apple TV and can now take advantage of the space to provide a second screen experience.
The three column layout consists of your standard Twitter feed and hashtag conversation as well as bonus cast and crew information. My ideas include serving up contextual shopping items from amazon and eBay. Research has shown that users engaged with their favorite content are primed to purchase related items during their viewing experience.
I’ve also built in contextual ad serving. No more Tide banners while watching Sons of Anarchy; finally relevant ads that would grab my attention. Another extra, an HTML 5 second screen app platform that enables content owners to build entertainment extensions that can simply be loaded into a webview within the Netflix app while avoiding app bloating.
So there it is, a quick look at where Netflix can start to rethink and improve their user experience and refresh their design
Content will always be the primary focus at Netflix and I understand that, but while new VOD services and Apple sealing similar licensing deals, sooner or later Design and UX will have to become a differentiator. Will someone beat them to the punch?