Wireframing for the “Blablacar” application

Ironhack challenge #2: Wireframing

https://blog.blablacar.fr/newsroom

What is Wireframing

Wireframing is a way to design a website service at the structural level. A wireframe is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added.

Wireframing is an essential in UI Design and that is why we have been challenged to work on one of the current applications to understand the flow. So I choose one of the most popular carpooling applications “Blablacar”. (Source 1)

About Blablacar

Blablacar is the world’s leading long-distance carpooling platform. The platform allows customers to save money on long-distance travel by sharing costs with one or more other users. The platform’s community functionality makes the process of car travel a safer and more social experience, meaning drivers do not have to make long journeys alone.

I personally used this application as a passenger to travel from Paris to Amsterdam and as a drive to travel from Paris to Switzerland.

User Flow

A user flow is a series of steps a user takes to achieve a meaningful goal.

Now imagine Mr. X wants to go to Dijon from Paris during holidays. So he decided to choose this application to share a ride with people who also wants to travel there on the same date. So here I’m going to work on the user flow of searching for a ride in Blablacar.

Step 1. Open Blablacar application

Step 2. Select search icon

Step 3. Enter departure and destination city

Step 4. Select date of your departure

Step 5. Select time of your departure

Step 6. Enter Number of passenger

Step 7. All available ride list will appear

UI Elements

UI elements refer to all graphical user interface pieces that construct an application. As a user interface (UI) designer, you’ll use UI elements to create a visual language and ensure consistency across your product — making it user-friendly and easy to navigate without too much thought on the user’s part.

User interface elements usually fall into one of the following four categories:

1. Input Controls
2. Navigation Components
3. Informational Components
4. Containers

So, Buttons, text fields, date and time picker, search field, map, icons and wizards are my main elements in this flow.

Lo-fi (low-fidelity) design

Chart of user flow

Prototype

Main page

User click on ride search icon

Select exact location

Select departure date

Select departure time

Mention number of passengers

List of available rides will appear

Conclusion

Wireframing is not time consuming unless you do not have any idea related to the flow you are working on. I enjoyed a lot doing art with pen and pencil and that is what interested me in this challenge. I also enjoyed wireframing with the tool named Figma, which is very easy and user friendly.