Wireframing Netflix app
Ironhack Prework — Challenge 2
Our second Ironhack’s UX/UI Design bootcamp PREWORK Challenge was to ‘reverse engineer’ a popular app’s Interaction Design and User Flow. I chose Netflix. Why? I will explain shortly. So, let’s begin. [See my previous prework exercise here.]
As I’m sure most of you know, Netflix is one of the world’s leading entertainment services with 214 million paid memberships in over 190 countries. The streaming platform allows its users to watch TV series, documentaries and feature films across a wide variety of genres and languages. Members can watch as much as they want, anytime, anywhere, and on any internet-connected screen. They can also create multiple profiles, so that each family member can have its own, including kids. This is super important because we all have different needs and tastes. Profiles for kids can be set with age-restricted content, so that they will only watch what’s appropriate for them. It’s really a great service with many customization options, and of course, my whole family loves it! Although all these things are so amazing, that’s still not the reason why I chose Netflix for this challenge :-) So, why did I choose it ? Well, not only it is aesthetically beautiful, its UX/UI design is so paramount, I cannot even imagine a better one! I mean, how do you make something better that’s already so good. And so I thought, it’s a good place to start learning design, et voila! :-)
The idea of this challenge was to create a wireframe version of the User Flow based on high-fidelity prototype screens of the app [max 7 screens], and then build it in Figma. The user flow I have decided to use was the process of discovering what new movies are coming out soon. This flow includes checking out trailers and additional movie details, and if it looks interesting, setting up reminders (sent by email), as well as sharing them with friends.
First, here are the high-fidelity screens that I’m going to ‘reverse engineer’.
Then, I’ve created low-fidelity sketches with user flow based on these screens.
Then, I’ve recreated these sketches in Figma.
And finally, a Figma interactive prototype.
I loved this exercise! The process of ‘reverse engineering’ allowed me to focus on the little but important things that I haven’t noticed before. This was very insightful and it gave me a feeling of what the original designers might have been going through.
Although, wireframing is about simplification, there was nothing simple about it. Deciding, which visual elements are important and should be kept, and which are not, was the real challenge.
