Challenge 2: Wireframing Netflix Desktop
Netflix?
Netflix is a streaming platform that provides media-services such as tv shows, movies, documentaries and reality tv; its library offers over 10, 000 titles that include both commercial and Netflix Original content. This year they became the largest entertainment/media company.
For this challenge I decided to work with the Netflix desktop version, the process required to search and chose a movie has always seemed really easy and intuitive, the fact that the can achieve an interface that is friendly with all types of users sets a high bar for the rest of the digital products.
The UI elements I could identify navigating through the app were:
- search bars
- progress bars
- functionality and user preference icons (such as volume, subtitles, full screen mode, help, close window, etc.)
- rating icons (thumbs up and thumbs down)
- play button
- more info button
- links/buttons at the top menu (their main function is providing a first filter during the user’s search, they separate the Netflix library into tv shows, movies, recently added, and the user’s personal list)
- tooltips to clarify the user what some of the icons stand for
For this task, I focused on the process of selecting a title and playing it.
To explain it quite simply, the flow is the following:
Home page > Select user > Search title > Selected title info and playing options > Play
Lo-fi flow, explained.
As soon as Netflix is opened in the browser, the first screen that appears allows the user to select their personal profile/account in which they will be using the application.
Once the user selects their profile, they are redirected to their own specific home page; in here, they can find a top menu that allows them to filter and browse the platform content with a search bar along with their profile options and settings.
Beneath the top menu, the home page displays the recently watched content and a list of options suggested based on the user’s preferences.
To search for a specific title, the user must locate the search bar at the top menu of the home page and type the title or some key words, the application will display all the content that include said key words.
When the user selects one of the options, a floating window will pop up containing the selected title, rating, a brief sinopsis and a play button.
Once the user selects a title and hits the play button, they are redirected to the reproduction screen.
This page has some features that only become visible when the user moves the pointer on the screen, some of this elements are: return arrow, a progress bar, subtitles, help and full-screen mode icons, play/pause, forward and rewind, and a volume adjuster.
Mid-fi
To conclude:
I understand that the whole point of this excercise, either on its lo-fi or hi-fi version, is to explain and test a flow.
As simple as wireframing appeared, it turned out to be a bit difficult for me. What I struggled with the most was deciding which elements were actually key for the flow.
I didn’t really know if describing the name or use of a button was something that should be specified in my mock up; or for example, at the top menu on the home page there are some filter options (tv shows, movies, etc.) that pretty much function just the same as a button but they don’t really have the looks of them. It wasn’t clear to me if I had to show them as buttons, headers or links.
At the end of the day, I think it’s a really good way to focus on the logical part of the flow and test it out easily and rapidly.