Dissecting an app: Uncovering structure and flow
Wireframing
For this exercise I took the app of one of the services that I like for its purpose of connecting strangers to travel from one point to another while sharing the cost of the trip, I’m talking about BlaBlaCar.
But this article rather than writing about this service is to undress their app to understand how their interaction design and user flow works in a specific task.
Describing the task
I chose to research the app from the passenger user, as this is the main flow of the app, and the one I have personally used, I searched for a driver to take me from Berlin to Hamburg.
Analysis
I then divided the task and was able to identify 6 sub-tasks in the process to achieve the goal.
Goal: Find a driver to take me from Berlin to Hamburg
1- From where —Shows me an Input box to write my location or where I want to start the trip from- then select options from the list.
2- To where — Input box to write my destination address- I have to select options from the list.
3- Search — After click on the search button another screen show the results of the drivers who make that route or come close to it, the price and the time. The first one to appear is the earliest departure.
4- Choose driver — when I choose an option another screen shows me the day and the detailed itinerary, with the exact location from where he departs and where he arrives.
5- Confirmation button — Shows information about the trip and whether the driver has a payment preference.
6- Booking button — Is the final step to reserve the seat.
After sketching and understanding the use of each element on the screen I started to work on the wireframe, simplifying the selected screens of the app.
What I learned
It was complicated not to get into the details and just stay in the structure, but at the end I managed to understand why this process is important to reach an accurate flow and interaction before moving on to the aesthetic part.
