UX/UI Challenge 2 : Wireframing

A tale of analysis and prototype.

Reverse Engineer

BlaBlacar is a simple but really powerful app. More relevant than ever now as ecology became the major concern for future generation, the pandemic disturbed the aspiration for the company to make the world carpool together.

I love this app and i think developpers made a really good job at keeping things simple. I will try to reverse engineer the process of finding a ride and book a trip.

Despite app language in English and settings in English, app still shows in French. Désolé :)

No distraction and straight to the essential, the app is almost a wireframe on its own, but this means we have to really strip down to only what we need.

The path :

1. Input date, start and end of your trip.
2. A list of choices, based on price, and approximate indications how far from walk are the start/end point are from you.
3. Recap of selection + possibility to contact driver because you may have some questions/requests about anything.
4. This screens is the last before your trip will be book, and show you the cost.
5. How you will pay.

Wireframe

In a few screens you need to give the users as much information as possible and if not, the possibility to get them.

• Only 4 input field in the first screen, then it’s only clicking, scrolling and selecting.
• Second screen let’s you navigate through the results of search.
• Third screen is showing you a more detailled view of the trip.
• Payment.

Prototype

With the help of Ironhack Wireframe Kit, i tried to recreate the interface.

Wireframe on Figma

As simple as it seems, to choose a carpool ride is really difficult and requiers a lot of information. You might want to look at : Date, location, price, duration, detour, passenger(s), reputation driver, car, affinities (Music, animals, smokers…).

The app prioritise those information as you first select the time and location, and then you will be able to choose from more detailed criteria of your choices.
The app have an in-built messaging in case you might have questions about anything for the driver.

Wrap-up

BlaBlaCar is a really simple app and shows that you can do a lot with a few screen. You also learn that information needs to be given at the right moment throughout the process as you can overload the user with too much on the screen.