Wireframing The Netflix iOS App

Netflix is a streaming platform that offers to their members a wide variety of films, documentaries and TV shows. We can imagine that this platform must include a huge library and it must be optimally designed and organised so that any user can find what they want to see as quickly as possible. That is why I thought very interesting to do this task with Netflix.

Netflix also recommends to its users other suggestions based on the previously viewed documentaries / films / series, it makes them find all these films or series you’ve stopped watching previously faster and it informs to their viewers the new releases. And of course, all of this, working the user experience so meticulously that the user will never waste too much time in the process of choosing what they want to see (unless there’s a very undecided person!😜). Sounds like a fun challenge, right? Let’s see now what wireframes are.

Wireframing in UX, is design a service showing only the essential parts of this screen. It helps to increase user interactions and improves project communication in the design team.

Starting from this point, I’ve applied reverse engineering to develop the Netflix App wireframes for a particular task (User flow).

Users Flow

The user flow I’ve chosen focuses on the selection of an unknown film, based only on a genre using as a device, a mobile phone.

Situation: Our user feels nostalgic today and it would fancy to watch a classic film but doesn’t know which one. In order to achieve this, the steps that the user should follow are these:

1. Who’s watching: User selects its favorite profile.
2. Home: The user selects FILMS option on the top of the screen.
3. Films: The user arrives to the films section and it decides to filter all films by genre.
4. All genres: All genres are showed, our user picks classic films.
5. Genre selected: Our user is on classic films and it scrolls to see all the films categories (trending ones or popular on Netflix for example).
6. Film selected: The user selects one film and press WATCH (Play).
7. Film starts: As we’re using a mobile phone, after press WATCH, Netflix starts the film changing automatically the screen view from portrait to landscape to be able to watch the film better.

Lo-fi Wireframes

It’s useful to draw all the screeens we will need with those essential elements that the wireframes should represent:

Let’s see the screenshots that represent the user flow stablished and the representation of these actions in wireframes below them:

Netflix App’s screenshots & wireframes for an unknown selection film based on a genre.

Now I present the same wireframes seen above but with the user action points in order to get the user flow previously established:

Netflix App’s wireframes with interactions for an unknown selection film based on a genre.

User Interface Elements

Many of the user interface (UI) elements I’ve used to create the wireframes have been repeated throughout the screens, however, this is a list with the elements I’ve used:

Input Controls allow to the user to perform a variety of functions (e.g. check a box) or select items from a list dropdown. Elements used: lists, list boxes, buttons.

Navigational Components help to the user to move around the screen. Elements used: breadcrumb, slider, tags, icons.

Informational Components share information (e.g. help, suggestions) with the user. Elements used: icons, progress bar, notifications.

Containers hold related content together. Element used: accordion.

The Interactive Prototype

Now you can see the interactive prototype of these wireframes based on the user flow selected. Here you can try it!:

Click here to view the project `Wireframing Netflix iOS App`

Thanks for reading :)