Wireframing: Challenge 2 — Prework Ironhack
Building a wireframe from Blinkist, the app that summarizes books and splits it in little blinks. If you are not familiar with the app, have a look here.
Blinkist allows you to read one “book” within 15–20 min, spliced into 8–10 “blinks” to remember it better and to know where you left off. In a nutshell, Blinkist creates key messages of a book that can be motivating theories or encouragements to be more self-reflected. Of course, the books (so-called “blinks”) are according to the preferences that you choose.
The Challenge:
The task is to create a wireframe version of the user flow of the chosen app based on screenshots or high-fidelity prototype screens of such an app using Sketch. Your final product should be a simple 5 to 7 screens’ interactive prototype built in Invision or Marvel.
Blinkist main user task flow
I choose to analyze the main user flow of the Blinkist app. You might be wondering what the “main” user task flow is. The answer is simple, ask yourself this question: “What does the user want to accomplish when using the app?“
The Users’ goal
Considering the user task flow of a free account, where only one blink per day is available. The users’ goal is to check the daily blink and if it is interesting to the user, he/she will read or listen to the summary of the book. The underlying need for this app is to learn new content/or even skill and to feel smarter and inspired.
After realizing the main user task goal, I knew what I had to dive into. Creating a simple black & white wireframe in Sketch and taking some symbols from Exercise 2: Practicing with Sketch, came in very handy. I only needed to adjust the color to grey.
After finalizing the wireframes in Sketch it was time to create a prototype with Invision. You can find an overview and a prototype video below.
Now I realize that I actually didn’t need to use so many icons. For example the share, the setting, the Aa, the bookmark and the circle menu button could have made redundant by a simple small box or circle. For this main purpose, it was not necessary to draw them so exact.
But wait, where is the magic in wireframing now?
The magic lays in simplicity and speed. It’s a fast creation of a possible workflow, without much content needed. The key here is to bring the main idea of the user flow across quickly.
My Learnings of this Challenge
The biggest learning was to see how wireframes are breaking down the user flow so simply. There is no font, color or information that can distract you from focussing on what is important at that time. And yes, you guessed correctly, it’s to design the easiest flow for the user with having the user goal in mind.
I enjoyed this challenge because of connecting the different art boards and creating a really cool prototype in the end. Although, what I found challenging was to keep the layers organized and tidy.
