Challenge 2: Wireframing Netflix
For the” Challenge 2” of the prework we have been asked to apply reverse engineer to an app that we like. That means that we must deconstruct it to a simpler wireframe. So, to fulfill this assignment, I have chosen the mobile app Netflix.
I have chosen Netflix because is one of the streaming platforms that I use the most. It offers a great variety of films, Tv shows, and documentaries and I like the user interface, although it has some bad user experience, like the annoying auto-play.
What is Wireframe?
“A website wireframe is a visual representation of an app or website. It looks like a skeleton made of wires of what the actual content will be. Wireframes are black & white layouts that outline the size and position of elements on a page. They’re the key tool of Interaction design, usually created after figuring out navigation. Wireframes are created with the purpose of designing at early stages, testing soon and not investing too many resources in iterations of the product that are not definite.”
USER FLOW
I’ve chosen the main user flow that everyone has to take to see an unknown tv show, using the mobile phone.
Situation:
Our user has arrived home from work and wants to start a new Tv Show, he doesn’t know which one, but, he does know that he wants a comedy. He is used to watching tv shows after work, it helps him relax and wind down from a very busy day. In order to achieve this, the user has to follow these steps:
1- Who’s watching: the user chooses his profile.
2- Home: The user is shifted to the home page. Then he selects the “Series TV” option in the menu bar, on the top of the screen
3- TvSeries: Now he is in the Tv show panel and he wants to filter them by genre, so he presses the dropdown menu “todos los géneros”.
4- Genre: He just wants to have a fun time so he chooses comedy.
5- TvSeries: Now, that only comedy is shown on the screen, the user selects one tv show.
6- Choose episode: After choosing one, he just needs to select one episode to start watching it.
7- Watch: After pressing the episode, Netflix starts the episode and changes automatically the screen view from portrait to landscape.
WIREFRAME
Now that we have seen a bit of the process, let’s see the screenshots together with the representation of this user flow using wireframes:
INTERACTIVE PROTOTIPE
In the next animation, you can see the user flow of this project.
If you want to play with the prototype, use the link below:
Thank you for your time, and feel free to leave a comment.
