Design Challenge: Redesign Netflix Mobile App

Overview

For my redesign case study, I chose the Netflix mobile application because I want to tackle redesigning a popular application using the design principles I have learned within the past month. This is not meant to criticize the app’s design or functionalities — I am merely a fan of the app who wants to improve my own experience when using the app.

Disclaimer: This is a personal side project and I am not professionally affiliated with Netflix.

Limitation

I understand that the Netflix iOS app provides different content and different layout for different regions. I will be focusing on the Canadian Netflix app because it is the only app I can get my hand on at the moment.

Netflix Design Goals

Netflix’s goal with its mobile application is to allow users with a different medium to access their content and watch TV anywhere and everywhere. Users use the app to watch and discover TV shows and movies of different genres and from different countries. It strives to be the leader in the Internet TV space and its design goal is to provide accessible TV to watch and discover.

Design Critiques

These are some of the problems I notice within the app at the first glance:

Much of the criticisms on this app are on the layout and structure of the app. All of the app’s navigation are hidden in the hamburger menu which lowers discoverability and understandability. Further features that are worth exploring are the ability to sort, the ability to view all of the series within a list in a grid format, and adding a list to my favourites. Further criticism includes whether users know what to expect when clicking back vs. close (Netflix show both when one opens up a series they searched for).

User Interview

I decided to interview 5 Canadian users on how they use the app. The following are the questions I came up with. I tried to keep these questions open-ended and avoided presenting them with answering options in order to understand a user’s journey in using Netflix’s app.

  1. What is your favourite feature of the Netflix app (i.e., My List, Downloads, Recommendations)?
  2. In what kind of occasion would you use the Netflix mobile app?
  3. How easy is it to follow a show you like on Netflix?
  4. Do you use the Netflix’s My List feature?
  5. Do you use the Genres navigation in the Netflix app? If you do, what do you use it for? If you don’t, why not?

Overall, the responses have been consistent. The summary of these responses are:

  • Majority of the users use the app to watch shows when they are outside or when they have no access to a TV/computer.
  • Users’ favourite feature of the Netflix app are the offline download and the recommendations based on shows they have watched, rated, or added to their list.
  • When asked whether it is easy to follow a show on Netflix, users explain that it is extremely easy because they can continue watching or get notified with new releases from the main page.
  • Users don’t often navigate from the main page of the app because they rarely know what they are searching for specifically when they go on Netflix — discovery of new shows tend to be from the front page based on recommendations and recently added episodes/shows.
  • Majority of the users do not know that the My List feature in Netflix exists, or what it does. Despite this, users have no trouble following series they like because they utilize the Recently Watched feature to keep track of the last few series they have been watching.

User Persona

I combined the users I interviewed and created a user persona to go along with it:

User Flow

1) Listing of all navigations/categories 2) App’s site map taking into consideration multiple user flow

I laid out general user flow based on the users interview and the current Netflix app based on the User Persona and User Research, while keeping in mind the goal of the app is to provide accessible TV to watch and discover. This means that the user should be able to access whatever they need immediately and efficiently.

Sketches and Mockups

Rough initial sketches of the app
Mockups version 1 of the Netflix redesign screens with initial wireframes
Mockups version 2 of the Netflix redesign screens with added pictures and relevant text copy
Mockups version 3 of the Netflix redesign screens with empty states, relevant pictures, and reduce colour palette

Final Design + Prototype Walkthrough

Prototype of the Final Redesigned App

Navigation

The original Netflix design organized all the navigation links within the hamburger button. This had the benefit of opening up the screen inventory since all links are within the hamburger navigation, but it also cluttered the screen when the navigation is opened.

In order to declutter the links, I organized them into 5 categories: Home, Browse, My Collection, Notifications, and Settings. Originally, I wanted to leave Notifications at the top along with Switching Account button, but A/B testing found that users were more inclined to look at the top right for the Search button rather than the bottom — possibly due to past experience using the original Netflix app.

Obvious always wins. I wanted to move away from the hamburger menu because I believed this was partly the cause of users’ low interaction away from the main page. Each category of links were moved to the bottom tab bar, and additional links within the category were presented as segmented navigation at the top.

The top section has two sticky navigations: Switching Accounts and Search. I made sure that the user is able to click anywhere on the picture or on the text to switch their account — something that was confusing from the original design.

Home Page

The home page of the app needs to have enough information to allow users to fulfill their goal to quickly watch the shows/movies they want to watch, but still allow users to browse and discover series if they want to. Netflix did this well by showing users new releases and recommending them to new shows/movies based on what they watched. However, the homepage shows many different shows/movies with the same visual hierarchy regardless whether they are ‘Trending Now’ or ‘Because you watched Black Mirror,’ for example.

Same visual hierarchy for different types of shows/movies collections

To combat this, I redesigned the homepage to have a different visual hierarchy. There is now a bigger emphasis on the ‘Trending Now’ section that allows users to quickly discover new shows to watch. The ‘Continue Watching’ section is now above the fold because it is important section for users to browse and quickly continue watching from where they left off. The ‘New Releases’ section is shown after to further allow users to discover new shows/movies. Other sections are shown underneath like the original design.

View All

There is an option to ‘View All’ the shows/movies within a collection. Users are able to sort the results when they are on the ‘View All’ page, that contains a grid of all the series/movies within the collection.

Browse Page

The Browse page lists all the show categories/genres through the navigation at the top with segmented control. Users are able to swipe through, or click and pick to navigate to each category. This has the benefit of providing high discoverability and quick access to the categories.

Browsing page and View All

My Collection Page

This page contains ‘My Downloads’ and ‘My List’ sections. My user research showed that the Downloads feature is one of the most popular features of the Netflix app, so it deserves to be the first page to be viewed when navigating to My Collection.

I wanted to increase the discoverability on ‘My List’ section because user research showed low popularity on this feature, which I believe was due to low discoverability because the section was only shown at the bottom of the main page. However, ‘My List’ is an important section because it allows Netflix to curate fitting recommendations and notifications. Hence, I placed ‘My List’ beside ‘My Downloads’ to ride the popularity with the latter section.

Settings

This page shows all the links at the bottom of the original app’s menu. For each link I placed an external link icon to indicate to users that clicking on each link would lead them to open a their web browser.

Show’s Info Page

I made sure to include the show’s cover in the info page so users can map the cover with the info when they browse. Cast members’ names and the creator’s name are click affordable because there are pictures attached to the cast members and the creator’s name is a made into a button.

Further Improvements

Search UX

Netflix’s search is great; but there is potential for it to be better.

Firstly, the search bar contains no placeholder other than the word “Search,’ which leaves users much to be desired in term of knowing what to search. Rather than just ‘Search,’ the Search bar should contain placeholders such as ‘Search for Movies, TV Shows, People…’ to guide users onto what they can expect as results for their search.

Secondly, Netflix should utilize the blank initial Search page to provide Trending or Latest searches — which would enhance the user’s searching experience to be quicker and more efficient than relying purely on their memory.

Account Settings

Currently, Netflix’s account settings need to be accessed and changed on their website. This should be accessible within the app so the user flow is not interrupted within the app.

Indicators with Symbols

The redesign had back buttons and right arrow to showcase going back one page and view all of a collection respectively. However, to enhance user’s discoverability with using the app, it may be better to indicate where the back buttons and right arrows would lead to.

What I learned

This was my first redesign challenge, and also my first written case study. Some of the things I learned from this design challenge are:

  1. Sketch all of my ideas out. My first idea might be good, but I will never know if it is the best until I consider all of my ideas.
  2. I don’t have to marry to one idea throughout the whole process. I was constantly iterating throughout the process — during my sketching phase, my mockups phase, and during the prototyping phase. I was iterating on each screen with elements that I added, deleted, and combined. Sometimes, it was easier to sketch out new ideas even though I was mocking up something else.
  3. Make sure to have a set branding guidelines beforehand. Creating the hi-fidelity mockups were a lot easier when the branding guidelines have been established beforehand.

Thanks for reading! I hope you enjoyed this article. I am an aspiring designer who is currently a student at University of Waterloo studying Computer Engineering. Let me know what you think about the article! :)

Show your support

Clapping shows how much you appreciated Anna Do’s story.