Gmail user flow: how I reverse-engineered.
Challenge 2 — practice doing a user flow. What I learned?
The importance of task analysis. I share here my process.
CHALLENGE WAS
Better understand Interaction design and User flow.
How? By choosing an app to work with, picking out a flow to analyze and drawing the user flow in lo-fi. After that was describe the task analysis and did a some wireframes screens on Figma. In this plataforme it is possible do a prototype too, you know? You will find more the below
A. why Gmail app
Besides I used so much, has some features who don’t are used by people who i know close — i thought intersting and decided investigate. The main purpose of the application is to read, send and access old emails, but the experience can be different for each type of user. Gmail is simple, clear, pleasant and modern and minimalist. The flow is very well done because the focus is the contents, and the commercial proposals are very well thought out: the others aplications correlated (like a google calendar) complete the experience very well. If you are a simple user or if you are a company. In this app, I’ve chosen a path of send a new email and schedule for another day.This describe the power of tecnology: improve the quality of life.
B. the UI elements I saw in this app and used
- Icons
- Input fields
- Images
- Menu bars
- Modal window
- Titles and texts
- Primary and secondary buttons
C. basic task analysis
The task to analyze is: “write a new email and choose the date for schedule shipping another day”. Here are the subtasks to achieve this goal:
- From “Home”, click on the “PLUS” icon, located at the bottom and right of the page;
- From “Write”, on the same line as the word but in the right corner, choose and click on the three dots vertical (located at between a clips and triangule).
- See in the list the category « Schedule shipping » and click on it, to see all options has to offer on.
- From “Schedule shipping” choose the button « Choose a date » and go to the page where it is possible choose news options.
- Cancel! Arrive a new email and you need answer before send that this what you do now.
MY LO-FI WIREFRAMES
THE PROTOTYPE
Click HERE for enjoy!
About the importance of the task analysis: the precision it provides.
Written the task analysis before drawing the wireframes decreased the chance of error — such as forgetting an important interactive screen for the user to do the task.
What would i do differently
Would follow to the original application’s user flow and not only the screenshots. Why? Because they aren’t interactive, and it is necessary going back to it often. Working from memory is not a good ideia.
What I found challenging
As a beginner, it can be good to take some time to discover your wireframing kit, and learn the names of the UI elements. The vague idea of the names of the different UI elements can take you many importante hours! Of course is a fundamental knowledge, but I didn’t know them well enough to be able to use a wireframing kit quickly and fully. Another challenging was the layers.
BE a methodical person because it is very easy to get lost in the thousands of layers that will appear until the end of the project! In my case, haven’t done it since the beginning was very profitable because I now know how to use layers much more easily and I was able to internalize how they work.
One way is to think of the screen in small modules together. I decided to think about the modules: ‘top’ (icons from the mobile phone like hour, battery), ‘body/ background’ (text and icons from principle body) and ‘down’ (another icons from the mobile). The body was further subdivided into other modules, so that the parts were independent. It made me better understand how layers work and how important it is to create hierarchy for determine who is in the front, back e etc.
WHAT I LIKED ABOUT THIS EXERCISE
Repetition is a very effective learning method: the fact that there are five screens makes it possible to practice more than if there was only one. I already used the concept of layers in Photoshop for example, but only now I was able to better understand how to use this to my advantage.
And to finish on a personal note, I found this exercise amusing because the process of simplify elements with black and white elements reminded me (from afar and akward) of the work of dissecting flowers, as when I was a scientist, to really understand their structures.
