Ironhack Prework, Challenge 2: Wireframing
For the second challenge of our prework, we were asked to ‘reverse engineer’ one popular app Interaction Design and User Flow.
My task is to create a wireframe version of the user flow of the chosen app based on screenshots or high-fidelity prototype screens, and the layout of the screens should be the same as the one implemented in the original. I will be simplifying the design to its bare wireframe state, placing boxes and placeholders when needed to represent different UI elements.
What is a wireframe, though?
“A wireframe is a skeletal mockup of an app or website, typically used for designing the barebones structure of the user interface, content, and functionality. Instead of visual elements such as colours and typography, wireframes are usually monochromatic, with a focus on usability.”
The reason wireframes should be done in black and white and with minimal details is to avoid distractions from the goal, which is to create a simple representation of the flow.
The app that I chose to work on is Netflix: not only am I a big fan of the service provided by the app, but I also admire the great design work behind it.
What makes this product so effective is the simplicity of its interactions: they are so intuitive that even those who are not fond of technology can easily use it.
The inspiration for this choice came from personal experience: even though my parents are still struggling with phones and computers on a daily basis, when they tried Netflix for the first time everything just felt natural and straightforward to them, it only took them a few minutes to get acquainted with the interface and start interacting with it.
The user flow
First things first, let’s set a task for this user flow: the one that I referred to is the same that my parents performed during their first experience, which is “Watch a thriller TV Show on Netflix”.
This flow starts from the very launch of the app and consists of 7 steps:
- Enter your email/phone number and password and click on “Sign in”;
- Click on a profile;
- Go to “TV Shows” on the upper left portion of the screen;
- Open the “All Genres” dropdown menu;
- Select the genre of your choice from the list — in this case, thriller;
- Choose a TV Show from the featured categories;
- Click on the play button or select an episode.
Now you’re ready to watch! Here’s the wireframe that I made using Sketch and Lucidchart:
You can also play with the interactive prototype that I made with Marvel here:
What I’ve learned:
In the making of this project, I learnt that each and every app or website that we commonly use needs a solid structure in order to be effective: focusing on usability rather than the look and feel in the early stages of production will guarantee a higher chance of leading the users to a “happy path” while completing a task using the service.
Also, wireframes help designers understand what needs to be there and what doesn’t, avoiding superfluous features that might prove useless and overwhelming to users, thus worsening their interactions within the interface.
Thank you for your time, and feel free to leave a comment with your thoughts!
Feedback is highly appreciated! 😃
