Wireframing & prototyping with Figma…Netflix app !

Currently being an Ironhack student working on my prework, I had to pick an app that I weekly use & love. The goal is to create (paper) wireframes and prototype the workflow, using the “Reverse Engineering” method.

The Netflix app is that smooth and easy to use that I never thought about how I could analyze its workflow. Because I never really used the “search” feature, I decided to focus on this part.

Here are the screens that I picked :

Screenshots of the screens I have to wireframe

• The homepage : I have a Netflix account so I arrive directly on the feed with the recommendations according what I already watched / rated
• The product page : in this case, the product refers to movies or series you want to watch. Here I clicked on “24”.
• “Coming soon” : Accessible from the navbar at the bottom, this is the place where you can find all the next released (dates, informations)
• Search feature : If you know what you are looking for, this is the place to be ! Tapping in the search bar area makes pop the keyboard where you can directly type the name of the product. Really quick and convenient !

📒 Well, I think we are all set. Time to check the papers Lo-Fi wireframes ! ✏️

What’s the next step (improving my sketching skills aside) ? Figma..of course !

Netflix’s wireframes

What I have learnt from this challenge ?

It was the first time I was using Figma. Since I am kind of a newbie in this wireframing / prototyping world, I would lie by saying it has been easy and quick to make.

• I am still confused about the level of details I have to put in my wireframes. Indeed, should I write the the name of the title or just “title” ? Should I use pre built icons or should I just write “icon of xxx” ? I got thousands of other questions while designing them.
• The first screen is the most time consuming one. It has been interesting to reuse the components already made such as the nav bar, icons, keyboards, inputs, arrows and buttons.
• Using pre existing from external libraries was also a huuuge gain of time. Thanks to Ironhack for providing it !
• Being able to build wireframes and to prototype within the same software has been a really great experience. I am looking forward to use it again and again.

Personal goal : at the end of the Ironhack’s bootcamp, I really want to come back on this post and have a “yikes” face looking at what I built today. Let’s start this amazing journey 💪🏻