The Lab

Rethinking Netflix for iPad    April 15, 2013

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 natural user interface (NUI) framework’s capability as well as our vision of how tablets and TVs will continue to provide new and innovative ways to watch your favorite 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 Netfllix 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 FLIP TV demo and translate them over to Netflix for fun.

So here goes…

 

Login

Login

 

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 flavor 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.

 

Profiles

Profiles

 

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

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. 

 

Search

Search

 

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.  

 

List Views

List Views

  

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.

 

Menus

Menus

 

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 Favorites 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 Lists & Alerts

Watch Lists

  

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 favorite 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.

 

Content Details 

Show Details

  

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”.

 

 

Media Player 

Media Player

  

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.

 

Second Screen

Second Screen

  

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.

 

Final Words

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?

I’d love to hear thoughts….

 

 

 
  
  • Jon

    Really like a lot of the interactions, layouts are great as well. I do think there are too many added new features though, for instance the tagging soundcloud-esque piece. Pushing more social community though the app is a great idea, as they couldnt seem to support a community on their own (see 2006 era netflix)… Overall great work, superb animation.

    • http://twitter.com/jgrenier05 Joel Grenier

      Thanks Jon, I totally agree. I think its really a thought piece to hopefully trigger some ideas. I wouldn’t see all these concepts thrown in but individually they’re all interesting.

  • Dan Rudolph

    Nice work Joel. Really good think-through. One item I’d like to see is a hamburger button, or similar, in the upper left corner of the Second Screen interface so I can easily toggle between second screen features and the media app.

    • http://twitter.com/jgrenier05 Joel Grenier

      Thanks Dan! For sure, I would love the opportunity to work with Netflix and think through all this stuff in much more detail. But I think for starters we’ve started a good conversation of some ideas they could explore.

  • http://twitter.com/themikeydonuts Mike Williams

    I was under the impression that Netflix actively tries to make the multiple-users-on-one-account experience a little muddy. Their goal has to be to get each person in a household his or her own individual Netflix account. Including the children.

    • http://twitter.com/jgrenier05 Joel Grenier

      I’m sure thats the case but I know with the majority of people we interviewed its ends up being one account per household for the simple fact that I don’t want to pay 7.99 for each account. This is why Netflix needs to allow profiles per account so their recommendation engine can be more accurate otherwise its rubbish;)

      • http://twitter.com/themikeydonuts Mike Williams

        Can you think of an easier way to urge people to get their own account than basically destroying the recommendation engine. I don’t even need separate accounts I just need a “The girlfriend watched this” button.

        • http://twitter.com/jgrenier05 Joel Grenier

          wouldn’t that be the same as having a profile selection screen and profile switch in the nav as indicated in the post?

    • JasonFlick

      I can’t see that happening, and extra account just for better recommendations? Maybe I pay an extra $5 a month for my own profile and it also gives me an extra streaming channel.. They have to embrace profiles to some extent, signing into different accounts alone would kill it for me, I use netflix on well over 6 devices and so do my kids and wife on the same 6..

  • http://www.facebook.com/tongejonathan Jonathan Tonge

    I wish there was a way to search by genre and title description. Also wish they had more keywords for every title. For instance, if I want to watch a movie about mountain climbing or nature, I can’t do that.

    Also wish that there was integration with imdb for user reviews.

    I suppose both of these are out of scope for this app though.

    • http://www.facebook.com/tongejonathan Jonathan Tonge

      I should add great work Joel! You are a pro.

      • http://twitter.com/jgrenier05 Joel Grenier

        Thanks Jonathan!!!

    • http://twitter.com/jgrenier05 Joel Grenier

      Totally agree with these points. Of course we are talking about a lot of stuff here and I wouldn’t expect every feature to get put in but I do agree a more efficient keyword search would be awesome and I’m sort of teasing that here in there throughout the post.

      Also agree with the IMDB user reviews but at the same time I think they would need to grab something and stick to it. IMDB would make sense if they wanted to introduce it as a second screen content item but at the same time that tomato rating is pretty popular as well.

  • docluv

    Great use of Metrui Concepts. I can also see how to do every single feature using HTML5 & CSS3. Great thinking!

  • http://about.me/jcorwin6 Jon Corwin

    Beautiful concept! +1 for well executed flat design.

    • http://twitter.com/jgrenier05 Joel Grenier

      Thanks Jon!

  • http://twitter.com/mad_uxd Juan Paulo Madriaza

    Hi, we on uxd.cl were talking about this just a couple of weeks ago. Great work Joel, The world would be a better place if Netflix will use your design in a future update. You can read an automatically translated version of our post here: http://goo.gl/gQCww

    • http://twitter.com/jgrenier05 Joel Grenier

      Thanks Juan this speaks to exactly what we are experiencing as well. Interesting to see how many people have similar experiences with the service.

  • Fart

    The “Discovery” tab is brutally annoying with A.D.D.rific animations and utter nonsense being shoved down your throat.

    • http://twitter.com/jgrenier05 Joel Grenier

      lol…great post. Again these are experiments and I think it would take some user testing and further thinking to flesh out these concepts but we do think a level of innovation around discover content is in order. Would love Netflix users to have more visibility into content.

      Cheers!

  • http://twitter.com/muqueca Marcelo Paiva

    Nicely done Joel! All the features I ever wanted! Don’t agree with previous comment, your design approach is subtle and aligned with the pace of the iPad user.

    • http://twitter.com/jgrenier05 Joel Grenier

      Thanks Marcelo, of course these concepts and features would beed to be put through testing but they’re meant to provoke discussion and looks like we’ve at least done that ;)

  • Mark LeMerise

    I don’t use Netflix, but I want to after looking at this concept. The second screen idea is genius. I’ve seen several recent studies that indicate people generally use another mobile device while watching TV/movies, so why not serve them relevant content?

    • http://twitter.com/jgrenier05 Joel Grenier

      Thanks Mark, it is a great service especially if you have a family as the kids content is crazy. There’s definitely some growth needed and hope this post helps bring some of those potential innovations to fruition.

  • Orly Angelo

    Really Well Done! Bravo on the UI/UX

    • http://twitter.com/jgrenier05 Joel Grenier

      Cheers Orly, really appreciate it!

  • bady_qb

    I always appreciate a study case like this. Love overall idea but I see few that I’m not sure if I like as user. Video tagging for example. When I see movie I don’t want me get interupted or intrigued to glance at the timeline and read the tags before I watch the movie. People can post anything here. It can be a spoiler whcih broken the movie experience. So does something like this really empower the value or vice versa?

    Curious to know your thoughts

    • http://twitter.com/jgrenier05 Joel Grenier

      Part of the idea would be the option to toggle the tags on and off and users would only see the tags if they’ve tapped on them. I think it would be interesting to see a profile bubble appear and then have a user tap on it to reveal the details or just turn the tagging feature off all together.

      I wouldn’t suggest to throw it in people’s faces constantly by any means.

  • ream88
    • http://twitter.com/jgrenier05 Joel Grenier

      I’m not a fan or intro animations rather than quick and simple animations. Some of these concepts are over the top really to start conversation and I agree I wouldn’t want to have to sit through this every time I load the app.

      Part of the post is to also illustrate what our UI framework is capable of handling. Most UIs on tablet are very static and peck and poke and our UI framework enables more exciting options for innovating new UIs. This is an example of that.

      Thanks for the comment!

      • ream88

        Ah, ok. Well then really nice and sexy demo! You should definitely do more of them :)

  • http://twitter.com/Bretton Bretton MacLean

    Very slick! The Netflix apps leave a lot to be desired right now, not only in terms of presentation but also in basic functionality. Considering that Netflix accounts for nearly 30% of web traffic, it’s shocking how bad it is. Hope someone over there finds this!

    Just curious: what did you use to prototype these animations?

    • http://twitter.com/jgrenier05 Joel Grenier

      Thanks for the compliment.

      I use After Effects to create visual prototypes. Our UI framework allows our team to export all the after effects data to actually build out products that we work on. Its a great workflow and technology.

      AE is a great tool to bring ideas to life!

  • BRK_studios

    Great work – well thought out and executed in concept. What did you use to create the interaction prototypes? After Effects? HTML screencast demo?

    Thanks for sharing.

    • http://twitter.com/jgrenier05 Joel Grenier

      After Effect as its part of our unique workflow and UI framework technology ;)

  • RoninQuinn

    Excellent. Very well thought out.

    One word of caution with “Social” integration/single sign on. This is a slippery slope. As an ~somewhat~ “Anti-Social Media” user, I DON’T want to see Facebook, Twitter, Share icons cluttering up my UI and thus making my UX sub par. I may be a minority, but my viewing habits are private.

    The slippery slope is when/if companies forgo an in-house login/user management system by thinking everyone “accepts” the TOS of third party companies like FaceBook.

    To participate with Company A, I should NOT be required to accept Company B’s TOS-EULA.

    • http://twitter.com/jgrenier05 Joel Grenier

      I agree with where your coming from for sure. I wouldn’t insist on forcing social down anyones throat which is why I would make it optional. The features should be implemented in a manner that they can easily not be present if you’re not in that mode. You’ll notice in the login screen the option for traditional sign in still stands.

      As an example the tagging feature can easily be removed from the media player if you choose not to participate in a more social experience. Its also flexible in the sense that even if you are signed into the more social experience that this feature could be toggled off.

      I also completely agree that a lot of users have become extremely leery on Facebook’s privacy constantly evolving and not quite understand what is really going on in the background.

      With all that said the streamlined user pattern is widely accepted and used and for those who don’t mind is a very convenient way to sign in ;)

      Thanks for reading the article and leaving your thoughts all these opinions are amazing!

  • http://www.facebook.com/jonashartley Jonas Hartley

    No hover state on mobile devices kinda makes this whole thing necessary. The existing ‘hover-to-see-more-thumbnails’ thing has caused me outright rage since it rolled out…awful, awful, awful UI. Good for you scoring the gig to fix Netflix. I’m not seeing any significant innovative concepts here but I do like your video animations that fake webkit and jQuery animations. I love animated UI more than most, but it’s just window dressing, not truly better UX.

    I can’t help but mention…it’s hard to take anything you’re doing seriously with that youilabs header nav.

    1995 called. It want’s it’s header nav back.

    • http://twitter.com/jgrenier05 Joel Grenier

      Thanks for your feedback Jonas I really appreciate hearing everyone’s opinions good or bad. This was definitely an experiment for me to express some of my pains and where I thought the service could expand. Of course these are just gut reactions with a bit of community thoughts and expressions peppered in.

      In terms of the animations, our UI framework uSwish enables these concepts to come to life. Although we’ve just presented visual prototypes here there’s nothing here that our framework and workflow couldn’t bring to reality. Have a look at our FlipTV Demo (http://youilabs.com/showcase/flip-tv/) for example. These UIs are all built using our technology.

      Thanks for the feedback on our site! I’ve only been hear for a few months and have slowly started to push that our site needs to better reflect our design sensibility if we are going to position ourselves more intimately in that space.

      I’ll be able to use this as a bit of ammo so I happy you mentioned it.

      Cheers!

  • http://twitter.com/jonponder jon sauder

    Individually, these are cool UI ideas, but I definitely wouldn’t want ALL of them implemented. I think it would start getting clunky. Keep it simple, and straightforward. If you they do integrate things like video tagging, please please PLEASE give make an option to turn it off. That’s exactly what I DON’T want – one of my friend’s snarky comments popping while I’m trying to get into a movie.

    • http://twitter.com/jgrenier05 Joel Grenier

      Hey Jon I agree completely I would envision a toggle for sure. In the mock up the option is toggled on and red right now. By tapping it you would turn it off. Also wouldn’t expect all these features but for the article I wanted to share as many interesting thoughts as possible to spark conversation.

      I agree making things overly complex would help their cause.

  • http://joshmedeski.com/ Josh Medeski

    Awesome idea guys, love it! I totally agree that Netflix should be more social.

    • http://twitter.com/jgrenier05 Joel Grenier

      Thanks Josh!

  • Chris

    I’m sorry but its difficult to take a redesign seriously that ignores many of Netflix’s best media Primitives like tThhumbnails of each video scene. In many cases here you’ve removed the in-box preview of where a user left off. You’ve removed workflows Netflix made based on real user pathways and added illogical ones in the name of social and tagging.

    The best work here is the hierarchical design for sorting while browsing.

    Drag and drop is cute, but one-button flagging to add is easier and faster.

    The magazine layout is inappropriate for long-commitment, low-update-frequencecy content.

    Tagging in the video timeline is goofy as a user is unlikely to have anything of use to add to a film from comments. Its more likely that cutting and grabbing a clip to share on social network here is faster and more useful because it solves both Social and Cross Marketing goals.

    The foldout side bar is a useless animation that neither adds to the scene and cues the user to where the data is stored for memory reference.

    In short, none of this design improves the existing product — it merely re-aranges some of the workflow while removing some good existing features and adding less utilitarian functions.

    • http://twitter.com/jgrenier05 Joel Grenier

      Thanks for your response Chris. I wouldn’t say I was ignoring the current features of Netflix but only experimenting with new thoughts on how they can evolve and refresh their experience. I wouldn’t expect this concept to be pickup and implemented tomorrow without considering those factors.

      Drag and drop is typically a hard feature for users to find or learn so I agree a watch list button would work well which is represented on the details screes.

      I wouldn’t say the magazine layout is inappropriate as it is meant for discovery. Just like a magazine or editorial sites these grid layout are created to allow for constant refresh, dynamic layouts, and visual impact.

      Tagging is a common experience for both audio and video. Companies like Sound Cloud and YouTube provide this type of functionality and its been very successful for them. In this context you can toggle it on and off and the tags are generated through your friends list and are likely an option you would explore.

      Sharing clips is an interesting concept but likely Netflix’s licensing deals wouldn’t allow them to implement such a feature.

      The side bar is much more flexible and scalable then the currently implementation.

      Again this article was to provoke conversation and it has definitely done so although mostly for the positive.

  • Logan Kriete

    This is pretty fantastic! I love the concepts and hope you don’t mind me referencing you in a paper I’m writing about how Netflix should respond strategically to some upcoming trends, especially with second screen engagement.

    • http://twitter.com/jgrenier05 Joel Grenier

      Thanks Logan! More than happy for you to use as reference glad it’s being used as reference. Good luck on your paper!

  • Garen

    I’d just like to say that it’s cool you’re replying to the comments, even the unconstructive ones, with class. I wish more of the internet was like that .

    • http://twitter.com/jgrenier05 Joel Grenier

      Really appreciate that. We look at all comments as constructive. Everyone is entitled to their opinions and opinions and debates lead to innovation. Thanks Again!

  • http://www.facebook.com/david.christensen.10 David Christensen

    Please grey out shows already viewed and option to remove to a diffrent menu. PLEASE ALOW ME TO CHAIN UP TO 2 or 3 hours of shows at one time. 4 30 min shows or 2 1 hour show but having to que each one SUCKS! I am looking forward to what you produce.

    • http://twitter.com/jgrenier05 Joel Grenier

      Good call David, I know on some platforms they’ve given users to easily jump to the next episode very easily but they could expand that a little further for sure. Good Call!

  • David Calloway

    I never tried Netflix streaming, because unbelievably our old analog Sony is so good, we hate to part with it. We still get the stupid plastic discs. Your article is not encouraging me to switch.

    On the other hand, what about making movie-watching a group activity again? Although you can stream a film at any time, there must be at least a viewing room’s worth of people watching the same thing at the same time.

    Joel, a “Director’s cut” narrative would be a great accompaniment to your video sequences of the redesign. It could be the same basic content as the ext, with some personal insights and color sprinkled in. Even better would be a conversation between you, the designer, and the developer.

    Multiple audio tracks with each person’s perspective would be very enlightening for those of us in each specialty, as well as entertaining. Really, multiple audio tracks would cost very little and add negligible overhead, while greatly increasing the edutainment value.

    BTW, I tend to be a social movie watcher, commenting as it goes. My wife hates that, so I try to keep it to myself. Connecting online by text comments with fellow social movie watchers, while watching the movie, would be a lot of fun. I’ve heard that commenting and making noise during the movie, as Noah describes, is much more prevalent outside the US.