STORY

Netflix continues to evolve and expand its library of streaming movies and TV shows. Providing viewers on-demand convenience across platforms is both a huge advantage and challenge to manage from a UX and UI perspective.

This design sprint project focuses on the front-end content navigation with Netflix's mobile app to identify key pain points and explore solutions for optimizing the user flow.

 

OVERVIEW

Role: UX and UI Designer

Tools: Pen and Paper, Sketch, Illustrator, Photoshop, Keynote

Scope: 5-day Design Sprint

Deliverable: research, user testing, user flow ideation, wireframe designs, animated prototype


NETFLIX APP Pain Points

  • Navigating expansive grids of content 
  • Back and forth user flow between browsing and accessing product detail 
  • Long scroll paths problematic for users to process and retain information 
 

REDESIGN Goals

  • Reduce navigation distance to content
  • Simplify user flow through product library
  • Streamline app information architecture
  • Explore interactive design improvements

NAVIGATING THE MASSIVE GRID

Having instant access to thousands of movies and TV shows on mobile devices is awesome. As this dynamic media library expands, people need improved pathways to navigate through massive volumes of content. User testing observed people swiping rows and rows of poster views into a blur, overlooking volumes of content in between.  


NETFLIX MOBILE APP

USER OBSERVATIONS

  • "It looks nice but its just too much to absorb."
  • "After swiping 2 or 3 times, I just start speeding through without really seeing what's there. I just want to find out where it ends!"
  • Users reported fatigue of tapping in and out of poster views just to find out ratings and detail.
  • People forgetting content location while scrolling long rows. Resulted in back and forth searching. 

CURRENT USER FLOW

  1. Homepage 
  2. Browse Spotlight Content and Category Lists
  3. User presented with 18 rows of media categories, each containing up to 75 individual programs
  4. User selects content views one at a time
  5. Program detail shown. User selects episode to play or taps back out to main page
  6. Continue to browse through content

ANIMATED PROTOTYPE KEYNOTE


WIREFRAME & INTERACTION DEVELOPMENT


'REEL' USER FLOW

  1. Category page displays program detail.
  2. Browse content Reel within category.
  3. Browse categories with horizontal swipe.
  4. Make selection: Play, Add to My List, Browse Episodes.

SOLUTIONS

  • Larger content scale reduces page density and aides viewer usability.
  • Reel scroll reduces navigation path 50%.
  • Pages focus on one category at a time. 
  • Top image auto-displays program detail and viewing options.
 

 

Browse category 'Reel'

 

Browse category libraries

 

Select program content


'FILM STRIP' USER FLOW

  1. Browse category 'Film Strip' page.  
  2. Tag shows to build temporary Short List of programing selections.
  3. Tap short list icon to bring up Short List page view. Vertical scroll browsing. 
  4. Select and Play content.

SOLUTIONS

  • Each Film Strip lane holds maximum of 36 programs for a total of 76. Reduces existing navigation distance by 50%.
  • Pages focus on one category at a time. 
  • Temporary Short List offers users a way to mark multiple shows as they browse.
 

 

Browse category content

 

Tag shows while browsing

 

View short list of programs

 

Select and view content


CONCEPT TESTING AND USER FEEDBACK

'Reel' Navigation

 

  • Favorable response to navigation structure through content and category libraries
  • Users able to quickly learn format of Vertical scrolling for browsing individual videos and Horizontal scrolling between categories
  • Users preferred larger poster views and content detail automatically shown on lead images.
  • Next steps to explore how format would scale from mobile to TV platform.

'Film Strip' Navigation

 

  • Users found building temporary 'Short List' while browsing to be a useful tool.
  • Upper and lower rows of video content originally designed to move together in parallel. Users felt it difficult to follow both rows simultaneously. Adjusted interaction design so rows move independently.  

IDEATION - USER FLOW AND INTERACTION DESIGN

Studied current user flow and explored alternative solutions for simplifying user path through content library and concepts for revised page layout and interaction design.

Current User Flow

Redesigned User Flow