I applied for a job at Blablacar,

and failed it but re-designed it.

note : This is not a hate article, It was a pleasant experience. This is just about designing and optimizing the user experience. If you are looking for any information about Blablacar hiring process, let me tell you : You are at the wrong place.


Back to story

I know what you are currently thinking : Why did I apply for a job, if I am currently working on Pancake? Here is the fact : Pancake does not generate much money and I need to eat. So I tweeted :

And I got a reply from Etienne about Blablacar’s opportunities. The Ux Design er — Monetize offer retained my attention. Beyond being able to work with engineers, product managers and data scientists in a mini-startup within Blablacar, I could directly contribute to designing intuitive and elegant UX solutions, creating new interface (web-mobile) from wireframe to final design, improving, preparing and performing usability tests. I know : Great opportunity! So I applied and around 10pm at the same day, Rémi invited me to go through the Blablacar hiring process.

The first step was a design exercise. I had to redesign the public profile screen of Blablacar mobile app. I had to work on 2 different directions :

  1. The first direction was that i should keep the current visual style and integrate new information that could be relevant on this screen (like the languages spoken by the user, for example).
  2. The second direction was that i should explore a different visual style, while keeping the informations currently available on the screen.

I had to send it over the next 5 days. After reading the email and before going to sleep. I took a quick look at the app on Google image, screenshot available on iTunes and Google play.

Design exercise

3rd February : 8am — Having read the mail and having a look on what they are currently working on before going to sleep was good because I woke up with ideas in my mind. Unfortunately my phone crashed some time ago and I couldn’t get access to the mobile app by myself. So I had to ask friend to take screenshots and send them to me. What a quaint anecdote!

So the only resources I had on my provision were my friend’s screenshots and the mobile website. And as you can see below, the problem is that the website shows a version that isn’t in use yet. Quite confusing.

Tips : It would be better to join to the exercise a downloadable zip-file with the appropriate resources. Screenshot of the application’s latest version, or even sketch-file. (cc Rémi and all the Blablacar human resources team).

Left to right : Current version ( redraw from friend’s screenshot), Screenshot displayed on Google play, Screenshot displayed on Website

After spending a few minutes to correctly redraw the current version from screenshots. I started the first exercise : Integrate new information. I understood the purpose of the exercise was made to check if I am able to follow an already existing charter and work with it. Spoken language is a good idea. It should be already implemented because I believe it could affect in a good way the trips selections.

When I took a look on the application in its entirety. There was much more text than visual objects. So I opted to make badges instead of just add :

“Spoken languages : Français, English”

I made two icons based on the current visual style and integrated them. Some other relevant information would be nice to integrate too like : Booked trips, Conveyances. And during that exercise I felt that some existing information will be much more interesting to watch if it was visually oriented instead of just being a text. But it wasn’t part of the exercise.

Spoken languages badges

3rd February : 10am — After a little break, It was time to move on to the second exercise “explore a different visual style, while keeping the information currently available on the screen”. Before adding any design the first step is to analyze and recognize good and bad aspects of the current version. This helps to define the direction of redesign.

Analysis

What I have seen so far, is that the current version is based on text. There are at least four ways to have a certificated profile, people can see the last connexion, when the user signs up, Profile responsive rate and what I believe it to be, previous published trips. This part itself presents 80% of the information displayed on the profile. There are also different profile levels (Ambassador, Expert, Confirmed, Regular, etc.). And to be honest the time of visiting a profile is a bit boring. The only reason to browse a profile is to see if the person is certified or not, and see how much friends on Facebook the person has. The profile appears empty with all its big spaces between different information. I’m not saying these information are useless, but in my opinion there is a better way to make them elegant and good looking.

I believe pictures, images, icons, draws are more relevant than texts. And when your application is available in severals countries like Blablacar is. It’s important to work with as little text as possible. It will help to avoid troubles in terms of translations or design breaks.

Road signs. Photo by Ksenia Kudelkina

The Direction

My challenge is to make the public profile more playable, consistent, fluent. Working with as little text as possible to make it clear. Meaning that it would be easy to push it to different countries. The main points that I must follow.

  • It have to be a fun to browse user profile. Visiting a profile should not only be made to see if the person is certified or not but to see what kind of traveler she or he is, where this person planned to go.
  • Turn carpooling and travel to a championship with different levels. Make the world a giant treasure map where user will be able to unlock badges. I am convinced it could be an additional value to the experience proposed by BlaBlaCar.
  • Make passive monetization through profile. I believe that displaying booked trips on a public profile would generate the users’ desire and encourage them to book it too, to use Blablacar.

Identity

3rd February : 11am — After estimating the direction and some sketches, I started to redesign it. I liked the way Blablacar decided to move forward with the full weight profile picture. It’s offering many possibilities. But instead of having the picture and below profile informations on a white background, I opted for something simpler.

Left to right : Blablacar version displayed on the website, redesigned version

Just a full weight profile picture covered by a mid-black gradient. The gradient i used will help to avoid the picture colours making contradiction with profile information To make sure the gradient was correctly setup, I tested it with different images.

Test with different type of profiles pictures

Reputation

On the current version, stars are schematizing the profile reputation. In my opinion they are a way too close to the notation that we can find on Yelp and other notations applications. I wanted profile reputation based on emotions felt by the folks who had trips experiences with the person. These good and bad feelings, some stronger than others. I believe that creating a scale of feelings would be more relevant that just stars. Visitor would be able to access to the users opinions made by pushing the icons.

Redesign in context

Biography and Badges

I kept the mini-biography as it is on the current version. I have not made any change except that switch to the font used on the redesign version.

The massif change I did, is these badges. Badges are something I like working with. Firstly, because they are equal to icons, images draws by the usage of them. It will help to avoid having too much text to read. Secondly, they are understandable to everyone. My thought is the following : Instead of just having badges generated during the profile creation (Spoken languages, Smoker or not, listening music, etc.. ). The platform would have badges that users could unlock depending on their travels, destinations, using duration, miles traveled. And finally badges could be used to categorise trips, to know if the driver : allows pets or not, allows people to eat in the car or not, smoke or not, etc.

I am convinced, This would turn Blablacar into a playable platform. There is some more data to explore here. Left to right, Badges I have made so far : Ambassador, Good driver, Social person, Music lover, French speaker, English speaker, Drove through “Golden Gate Bridge”, Small backpack, Never got lost, Stop for coffee time, Drove 10 000km, Pets allowed, Allowing to smoke, No allowing to smoke, Visited Berlin, Visited Paris, Suitcase allowed, Drove by night. Having more time, I would find a way to turn these badges into buttons. And allow user to interact with them to get the exact meaning of all of them.

Badges made for the Blablacar redesign.

Booked trips

Beyond a passive monetization. I believe that showing on the public profile the booked trips could seduce other users. More or less modelled on the airlines’ website which often make marketing operations for last-minutes trips. Influenced by boarding-pass design, I wanted to make a small version of those, which will work as trips preview and display the most important information.

Boarding pass made for the Blablacar redesign

Visitors will be able to sweep through the boarding pass if the users already booked severals trips. I found it interesting to give the possibility to save the boarding pass. Something that people can feel unsure about and want to wait a couple days before booking it. Beyond, It was supposed to be a way to find them faster. It will give the possibility to Blablacar application to send notification like “Lille → Versailles is missing one person, are you still interested to go there?”. the option to book the trip instantly is something I thought about too. Obviously user will be able to expand boarding pass to get full information.

Expanded Boarding-pass made for the Blablacar redesign

Conveyances

I wanted to improve the conveyances part. On the current version this part is just some text : Car model, colours, and of course some stars to schematize the comfort. I do not think creating a complete card of conveyances would be a good idea. But we are redesigning a carpooling platform and I am convinced users would appreciate at least a car picture instead of just its name. Most of people do not have car image in mind when they hear or read a car name. I add also some stats about the car like : How many seats are available and the car’s comfort. Even if I am still wondering if using steering wheel to express the comfort is a good idea.

Conveyances cards made for the Blablacar redesign

Believe it or not, it’s a human

And finally the verified part. I understood it’s really important part on Blablacar point of view. It’s 80% of the visible content on the current version of the application. I believe there is a simple way to redesign this part and make it more elegant and less bigger. I liked ‘published’ stats, I made it more relevant too. I think it would be nice to see previous trips the user made or participated.

Left to right : Blablacar current version, redesigned version

The Result

Full public profile redesigned

That’s it! Hopefully you liked to read this article and the redesign proposal as well as this extend beyond just the aesthetics. Do not hesitate to tweet me if you have any design questions, if you liked it or if you are looking for a Ui/Ux Designer, because I am still looking for to join a great team.

Again as I stay on the note at the article beginning : There is no hate around. I wish to actually thanks Rémi who gave me his attention. I am glad that my profile retained Blablacar attention, even if at the end it didn’t match with what there are are currently looking for. Wish you to find the one.

Rudy with love ❤