Ironhack UX/UI Challenge 2: Wireframing

3 min readJan 7, 2022

Hello there! I’m back again with another challenge 😌. This one was more time consuming and laborious compared to the previous one, but very educational and captivating at the same time. The goal was to create a wireframe version of an app of my choice based on screenshots and recreate a user flow / interaction on it.

I chose an app that I use almost daily and it is without a doubt the one that I love the most in the apps world, named (drums please):

Founded in 1997 by Reed Hastings and Marc Randolph, Netflix is a global provider of streaming movies and television series based in Los Gatos, California, and currently has more than 220 million subscribers worldwide. How impressive is that!?

I could spend a lot of time talking about this amazing company, but let’s cut to the chase, shall we?

So, here are the screenshots I took from the app:

And here are the Lo-Fi Wireframes of it:

FYI: I decided to make several interactive paths instead of one so that we could get the best out of the 5 screens.

⚡️ Wireframe / Screen 1

In this screen we can find the list of users. Let’s click on one of them. It will take us to screen 2.

⚡️ Wireframe / Screen 2

Once we arrive on this screen, they presented several proposals, depending on the user’s tastes, what’s new, viewed recently, etc.

On this screen, we can choose different paths:

PATH 1 - On the top of the screen, in the upper right corner below the battery icon, we have an icon with the user’s image. Once we click on it, it´ll take us to screen 5 (which is basically the user’s functions menu or the possibility to switch to another account).
PATH 2 - By pressing the “categories” button, it will take us to screen 4 where’s a list of several TV shows and movie’s categories presented on netflix.
PATH 3 - In this interaction, when we press the “information” button, it will take us to screen 3. Here we can the see the TV show’s trailer, info and episodes.