Blablacar in a wireframe

Blablacar is one of the most successful apps of the last years! It is very known for its easy use, good design and, mostly, its utility.

As part of IronHack challenge, I decided to wireframe one of the main flows, reserving a spot in a trip. I decided to do this flow for two reasons:

1. We all do this task when logging into the app, so we are familiar with it and know how it works.
2. You can choose or skip many steps and options, so it is an excellent example to do a complete wireframe and identify the flow.

The only issue I found is to limit the screens to 7 due to many options in the process. I had to delete the passenger choosing option and restrict the screens to 8 (even though a few of them are almost identical).

This is how the app looks in its complete flow:

Blablacar screenshot. Sara Pérez Rodríguez, 2021.

Through these screens, the users can achieve their goal: reserve a spot. To achieve it, these are the main tasks to be performed:

1. Introduce your origin and destination by searching in the app.
2. Choose the time and date you prefer to travel.
3. Choose from the list of available trips
4. Check the details
5. Reserve

Seeing how the app works, this is the wireframe screen by screen:

i

Screen 1: Introduce your origin and destination by searching in the app. When the user clicks in "from" or "to", it will get to screen 2.

Screen 2: Choose origin and destination from the app's database or suggestions based on your recent trips. After choosing the origin, you will be back on screen 1 and repeat the same steps for a destination or vice versa.

Wireframe of screens 3 and 4. Done with Figma by Sara Pérez Rodríguez, 2021.

Screen 3: after choosing the origin and destination, the user can either click the search button or select the date and time.

Screen 4: Select the date or close the calendar.

Wireframe of screens 5 and 6. Done with Figma by Sara Pérez Rodríguez, 2021.

Screen 5: Choose the time or go back.

Screen 6: Select the trip between all the suggestions or go back.

Wireframe of screens 7 and 8. Done with Figma by Sara Pérez Rodríguez, 2021.

Screen 7: review all the details of your trip and, if needed, go back to edit them.

Screen 8: see the price, final view of the trip and reserve.

In the following image, it is possible to see the complete flow of all the tasks.

Blablacar flow. Design in Figma. Sara Pérez Rodríguez, 2021.

With Figma there is also the possibility to reproduce it, so we can interact with the wireframe and see the different results.

Blablacar prototype done with Figma. Sara Pérez Rodríguez, 2021.

If it is not possible to interact with it, please click here.

After all, the wireframe of this process didn't require a lot of UI elements. The main elements are buttons, arrows and boxes. Playing with them, I could get the complete wireframe, with no need to download many images from other sources. This fact is good because everyone can wireframe with low sources and achieve a good result.