Ironhack’s Prework: Jac Fielding_Challenge 2

Jac Fielding
Bootcamp
Published in
3 min readMay 4, 2022

I will be using the car sharing app Blablacar for my first wireframing exercise, the idea is to get to grips with wireframing by ‘reverse engineering’ an existing app.

Blablacar is a carpooling application that connects drivers and passengers to make more economical and cost effective journeys.

I chose to work with this application because I think it tackles a problem and simplifies it very well, resulting in a simple ‘easy to use’ design. The layout is pleasing to the eye without being distracting.

The user flow I will work on will be a passenger looking for a potential journey. I’ve chosen this flow because this is how I’ve used the app in the past.

The UI elements used in this flow are:

  • Buttons
  • Text input fields
  • Date and time pickers
  • Search fields
  • Icons
  • Cards
  • Headers
  • Images

Below you’ll find my wireframe version of the user flow above. I was trying to keep it as simple as possible to communicate the necessary information, but I think some of my choices when it comes to the shades of grey and icons I used here can be improved.

Task analysis

In this flow I’ve chosen to work with the objective is to find a driver that will take the user from one place to another at a set time. To accomplish this the user will need to;

  1. To enter location A and location B of the journey.
  2. Enter a date of when they’d like to travel.
  3. Select which driver, time and place would suit them best.
  4. Check details.
  5. Reserve journey.

I think Blablacar provides a great user flow for this objective, it’s easy and intuitive.

Although I personally would like the option to not specify my journey, as I think it would be nice to browse all journeys that people have posted, this would help people save money on less popular routes and at the same time it would be good for people to explore new places.

I have enjoyed this process and while building the wireframes it taught me not to over complicate this part of the design process. In my first attempts I added way too much detail, which distracted from the ideas I needed to communicate.

You can find my wireframe and prototype in figma, https://www.figma.com/file/ynjJz6AmsfPDEgxzgbJ1bL/Jac-Fielding-Challenge-2%3A-Wireframing?node-id=0%3A1

Thanks!

--

--