Improving Blablacar’s search result page
As part of the recruitment process, I had the challenge to work on Blablacar’s Search result page both on a UX and a UI perspectives.
Here are my results.
The exercise was to improve the Search Results screen (mobile web, Android app or iOS), by exploring 2 directions:
- The 1st direction should challenge the existing interaction and information, while keeping the current visual style.
- The 2nd direction should take a different approach from a visual standpoint, while keeping all the interaction and information currently available.
I decided to work on the iOS app and in order to organize my work, I followed different steps :
- Do some research on Blablacar : the business, the context & the environment of the service
- Explore users’ needs using Twitter, Google Trends, App reviews and, of course, user interviews
- Analyse and sort results by emphasizing main problems users are facing when searching for a ride
- Improving the information and interactions
- Improving the visual design
Understanding business needs behind Blablacar
Before jumping into user interviews, I needed to do some research on what makes Blablacar unique and how the service is different from other means of transportation.
Understanding the product and its environment
In order to understand the business needs, I did a little exercise : the Warm Up. Created by UX Republic, this exercise helped me to put in perspective the unique value proposition of Blablacar and why people love to use it.
Through some research, I understood better what Blablacar is today :
For travelers between 18 and 35 who need to travel at low price with friendly people, Blablacar is a ridesharing service connecting drivers and passengers that is reliable and trustworthy. Unlike Voyages-Sncf, Captain train or other ridesharing services Blablacar has a strong community looking for experiences.
So what makes Blablacar really different ? Its community. People are not only seeing ridesharing as a means of transportation but as a real way to connect with people and share a unique experience from one place to another. Even Vice published an article about the joy of ridesharing with strangers !
Je pense avec compassion à ceux qui sont dans le train et se regardent en chien de faïence. Tout juste un petit sourire dans le wagon-bar. Car au-delà de son aspect économique — un trajet coûtant au minimum la moitié d’un billet de train acheté au dernier moment –, le covoiturage a vraiment inventé une forme nouvelle dans nos interactions.
Exploring users’ needs
Tweets and App Store reviews
While searching for participants to interview, I did some research on the iOS app’s page and on Twitter using the hashtags #blablacar and #recherche. And found some really interesting stuff :
After a quick search, I found some main problems people are facing with the service (desktop and mobile) :
- Filters are not understood and the way they are displayed cause some confusion
- Displaying full rides seem to bother a lot of people
- Some icons are not understood by users
- It is not possible to enter a precise time when searching for a ride or creating one
To find out more about these issues, I decided to do some interviews with people who used Blablacar’s service at least one time in their life.
Planning and conducting interviews
First, I wrote a guidelines document for the interviews. This document is split into 3 parts :
- a pre-test interview to explore the participant’s way of traveling and his experience with Blablacar
- a scenario with 3 tasks that the participant should do when testing the iOS app
- a post-test interview to review together the positive and negative points of this test
You can download this document here.
Then, I looked for participants who used Blablacar at least once in their life, between 18 and 35 y.o. and who like to go on weekends and vacation. I needed to interview at least 3 people to get significant results.
Below are the info on the 3 participants :
The interviews lasted between 10 and 20 minutes and took place where participants could meet : at work, after work or at home. I followed my guide and applied the 5 Why’s method, always asking more of what the participants told me to really understand them.
You can find the transcript of these interviews here.
To keep the user’s needs and motivations in mind, I built a user persona based on the first interview I conducted.
Based on the information collected, I analyzed which criteria are the most important when searching for a ride and listed the problems encountered by testers to define the most important ones.
Degree of importance
Based on the interviews, I listed the main criteria when choosing a ride with a driver :
Meeting point : this criteria was the major one for users, as they need to take this first information into account, knowing that they have to first travel to this meeting point.
Time of departure : because everyone has its own planning with different timings, the time of departure is the second main criteria.
Trust : for some people, trust is very important. Choosing a driver that has good reviews, a good grade and enough driving experience is crucial.
Comfort : paying attention to the type of car and the number of seats comes in 4th position as a choice criteria.
Friendliness : some payed really close attention to the age and the picture of the driver as it was essential to picture themselves having a nice ride with a good chat.
Price : this criteria has less importance because the users knew that if they chose to use Blablacar, the price would be less expensive than any other means of transportation. But between 18 and 23 euros, they didn’t really care.
I listed the problems that the participants had and created a table that lists the problems met by the 3 users.
A “x”” in the cell means that the problem has been encountered by the user.
The “%” represents the frequency of the problem among testers.
If we look at this table, we can see that 8 of these problems have been encountered by 50% of users of more : numbers 1, 2, 3, 7, 8, 9, 10 and 11.
Acknowledging this information, I sorted these 8 problems into 2 categories : the ones related to interaction and information and the more visual-related ones. This classification helped me know which specific problems I had to solve in this exercise.
Interaction and information
1- Can’t fill in the return date
2- Impossible to give a specific leaving time (18:30)
3- Impossible to filter meeting points
7- Full rides are seen as irrelevant
8- Impossible to look for earlier rides directly on the result page
9- The filter button is too small to be seen
10- Accidentally clicked on the “alert” icon
11- The time selector in the filters is hard to use
Improving interactions and information
Using my research, I started to sketch. First on paper, then on the Sketch app. By keeping the visual style of the current iOS app, I re-thinked the information and interactions that were a problem for the users I interviewed.
But first, I took some inspiration from existing apps and designers’ work published on Dribbble :
Search screen — Filling in information
I worked first on the Search screen where users have to put information on their departure and destination, as well as the date.
This screen has a direct impact on the Search result screen and my research shows that user want to put more information on the first screen to get more specific result on the second.
Below is the improved search screen I designed with explanations.
- Departure city : Users needed to find precise information on the meeting point with the driver and other passengers. Results always showed rides that were starting somewhere really far from their home or workplace. To get better results, city departure suggestions show the last cities entered and another step of the process helps define a km radius that filters places that are too far.
“Anthony 4,9 c’est cool ! Ah mais Issy-les-Moulineaux c’est mort.” — Jeremie
- Time of leaving : Users were frustrated that they had to use the filter screen after seeing the search result screen. I added the feature of filling in the time of leaving on this screen for more precise results.
- Return date : Users interviewed often go on weekends and vacations, meaning they always have a return date. I added this option for user willing to enter this information.
“J’ai pas du tout de visibilité sur mon retour, il faut d’abord que je choisisse un aller mais je veux être sûre de pouvoir rentrer quand je veux et à un prix raisonnable.” — Nathalie
- Number of spots : Using filters to give this information was a step users were not willing to take. Putting it on the search screen seemed less disturbing.
Search result screen
After filling all of these informations, the user gets to the search result screen. Having to use the filters button was an extra step users would have wanted to avoid.
“Le problème c’est que je suis tombée sur tous les trajets du 19 août alors que je cherchais une heure précise” — Nathalie
With the new search screen, the search result screen has more personalized information and the user can make a quicker decision without adding an extra filter step.
- Header : By putting the date and the number of spots in the header, the user can be reassured that he entered the right information. On the current version, this info was not seen by users.
- Filters : The Filter button needs to be visible. Now on a dedicated spot near the header, user can have access to this screen on the left.
- Kilometer radius : Rides are organized according to the distance the user is willing to travel from his position to the meeting point. If he chose 2km in the Kilometer radius screen, the first results will be the rides that are 2km away.
- Ride card : With a slight change in the ride card, the user can now see the approximate time when the ride will arrive at destination. This calculation is based on the departure time and the distance in kilometers and time. Users can therefore know their arrival time without having to calculate this themselves and maybe choose and earlier ride.
- Show earlier rides : A simple button below the header/filters/map allows user to show earlier rides that may interest him.
- Full rides : Rides that are full are now invisible. For many users, this feature creates disappointment and interfere with their choice. If some users want to see full rides, they can now activate this feature through the Filters screen.
“C’est pénible et déceptif de voir les offres en complet.” — Philippe
- Map : To add another possibility of viewing results, a map button leads the user to a specific screen. The rides are displayed on a map, showing the departure place of the user and rides around him. User can now see precisely from where the ride is leaving and therefore choosing only the ones that are close to him if he needs to.
- Onboarding : Some interaction elements are hard to understand for some users, like icons. To help the user understand the interface when he uses the app for the first time, a short onboarding shows him which actions he can do and teach him the meaning of icons (see the full onboarding in the prototype below).
You can test the full prototype right below.
Improving the visual style
How to improve the visual style by keeping the information and interaction ? From my research, there are 3 main problems with the current interface :
- The filter button is too small to be seen
- Users accidentally click on the “alert” icon when looking for the Filter screen
- The time selector in the filters is hard to use
To keep the same scope as the first challenge, I worked on 2 screens : the first search screen where user fills in information and the result screen.
To give the app a more colorful and dynamic visual style, I used one of the main colors of Blablacar (#0CABEC) for the header and some interface elements. This way, the search part is associated with this color and other interactions in the app could have different colors for the user to know where he is in the application.
The “From” and “To” icons, two circles that are respectively green and red, are used every time there is a notion of a journey from one place to another. I kept it in the first search screen where the users fills in the info on departure and destination and used it in the ride cards for some cohesion at every step of the process. I also used it for a small illustration on the first screen to add some fun in a blank space.
On the search result screen, I also worked on colors for the ride cards.
Price colors are understood by users so I kept them that way.
For departure times, I used the #0CABEC blue to put them in contrast with other information because this element is a major information users need to make their choice. To give the number of spots available in the car more visible, I added another one of Blablacar’s main colors : the #0086BE.
I used material design to keep the current visual design of the application while challenging it. By using cards and shadows, the user can understand better what can be tapped and what can’t.
For example, on the current app, when filling in the date of departure on the search screen, user may not understand where to tap, as there are no indication on which interaction is available. With material design, users have the feeling that he field can be clicked or tapped.
New visual style of the search result screen
On the search result screen, information and interactions have been kept the same but many things have been improved :
- Departure date : Now right under the “From → To” information, the departure date is more visible so that users can’t make a mistake and choose a ride for the wrong day.
- Kilometers and travel time : Currently, this information is so small that most user don’t even notice it. Yet, it is a key information to choose a ride by calculating the time of arrival at destination. Now in bold with a “Distance” text, it won’t be missed.
- Filters and Alerts : The 3 users I interviewed tapped on the Alert icon when they wanted to tap on the Filters one. This version puts them at the same level, with a bigger size and a white circle to avoid mistakes. The icons have been changed to fit user’s digital habits.
- Ride card : The information on every ride card is now split into 3 — the time, number of spots and price ; the meeting point and destination ; and the information on the driver and his preferences. This way, the user has a clearer view of the different information he has and can make a quicker decision. Icons have been kept the same because users learn them as soon as they click on a ride and read details.
- Full rides : Rides that are full are now slighlty smaller and darker to inform the user that he can’t book them.
What’s next ?
The timing’s now over and there is still an important part that I could have made with just one more day : user testing !
Thank you for reading this case and I hope my work will make you learn one thing or two and help me to meet you :)