How to redesign complex functionality in 3 months
From Louis Massuel (Product Designer @leboncoin)
1. leboncoin, a challenger in the holiday sector
On leboncoin you can buy a car, a house, clothes .. with more than 29 million unique views per month (1) the site is a reference for e-commerce in France.
You can also look for a vacation property. However, French people are less accustomed to using this service on the site. leboncoin is therefore a challenger in a market where Booking and Airbnb are the key players. Nevertheless, the site still ranks in the top 10 of holiday players in France (2).
The holiday market is promising, and leboncoin therefore came up with a growth strategy. A dedicated team was created to respond to the specific aspects of the holiday industry.
2. The problem with holiday leboncoin
There are many listings on leboncoin, holidaymakers appreciate having a choice. Fees on leboncoin are also significantly lower than those of competitors. The service is free for owners and the fees paid by travellers are two to three times lower than the competition. Those are some of the positives.
In more detail, here is a comparison made by 60 Millions de Consommateurs (leading French consumer research company):
A high volume of listings, but few transactions
Historically, you can call the seller to make a direct payment on leboncoin. When it comes to holiday rentals, travellers therefore mostly come to an arrangement with the hosts directly, paying by cheque or by bank transfer. It is a classic, reassuring operation for our hosts but can be somewhat frustrating for travellers (fraud, lack of responsiveness, disparate cancellation terms…).
In contrast, Airbnb and Abritel are dedicated holiday rental sites. They only offer online bookings and payments. This type of operation affords a certain degree of uniformity and more security for travellers. Travellers see this as a real benefit and therefore prefer this type of approach.
Online bookings and payment are also available on leboncoin. Our task is therefore to encourage historical users to switch to this new way of operating. To do this, we measure the ratio between requests sent by travellers and those accepted by hosts. This is the acceptance rate, our main KPi. Ultimately, the more our users engage in this process, the closer we get to the market standards.
At present, the volume of requests is satisfactory. On the other hand, the number of applications accepted is still too low. The priority is therefore to tackle the host journey with the following issue in mind:
How to get hosts to accept online reservations
Some of our hosts are in favour of taking online bookings. But the quantitative returns indicate a functionality shortfall compared to other actors. This is only part of the story. At the same time, more than 10% of our hosts say they receive pre-paid booking requests with the wrong price, or for unavailable dates. The fact that they do not update their calendar correctly means they receive booking requests that are not acceptable, which explains the poor acceptance rates.
The calendar therefore seems to be an issue, which begs the question:
How can we ensure that hosts update availability and prices on their calendar?
The calendar is not being used sufficiently
The calendar was put in place at the beginning of the project in 2018. It allows owners of a property for rent on leboncoin to update their prices and availability. It is divided into three zones, a reminder of the listing, the calendar and the settings on the right-hand side.
There is therefore a lot of information in the foreground. The graphical aspect is a little dated too.
To meet our business requirements and those of the hosts, a couple of hypotheses were put forward:
If we add features, users will use the calendar.
If we redesign the interface, users will use the calendar
Adding features to a page that does not work well is a significant risk. We therefore decided, along with my Product Owner (PO), to conduct user tests to help us in our decision making. The project was therefore run in discovery mode over a quarter.
3. Redesigning a key feature of the journey
A project in discovery mode for a quarter
The subjects we handle as product /UX-Ui designers at leboncoin are divided into two categories, those in “discovery” mode and those in “run” mode. Projects in discovery mode are those with a higher risk assessment. Hypotheses therefore need to be explored or verified. Run mode projects are less risky, smaller scale and ultimately feed directly into the developers’ roadmap.
My PO and I therefore defined the scope (business need, user benefits, unknowns…) then we retro-planned it over several weeks. Our intention was to involve the developers and designers, then perform user tests.
As we can see below, there were several versions of the Ui, critical designs and user tests over the course of a number of weeks.
Why make several versions of the calendar? Why use a pivot? We will attempt to answer these questions in the rest of the article.
A. Creation of the first version of the calendar
The first hypothesis consisted of adding functionality to improve the usage ratio.
So we tried to add the top features to the current calendar. We made the decision to display the price parameters only when a date is clicked on. This has the advantage of “freeing up” space to the right of the calendar to add other features.
We also felt it was important to add tips to help users to get to grips with the tool. This is one of the Jakob Nielsen’s 10 principles (help and documentation). Hence the addition of feedback on the performance of the listing and an action button.
Following these early versions, several critical designs were made by the designers and developers. There was mixed feedback. The navigation seemed complicated, the main action was unclear, there were features on the top level when they would only be used once, flexibility for the future was unsure…
B. Pivot and changes to the calendar design
Pivots take time… we didn’t plan for this… we’ll need to rethink everything. But change is sometimes necessary to get out of a dead end.
We were far from convinced by our first two versions, in terms of information architecture. Too many features were displayed at the top level. So, we weren’t too keen to test these mock-ups with our users.
How did we do the pivot?
Rethinking the main screen is a good idea, but the flow would be even better
The data on our calendar showed us that 50% of views come from the flow when the listing is posted. As posting is a one-off action, we deduced that few users modify their calendar.
At the same time, we noticed that the listing post flows on our competitors’ sites are very different to ours. They involve more steps and therefore include many features.
We therefore tried moving the functionality we wanted to put on the calendar into the listing submission flow. Some features are used once so it made sense not to have them displayed continuously on the interface. The new design involved 20 (twenty) stages instead of 13 (thirteen). To compare:
Listing Submission Flow (in 2021)
● Listing Submission: 13 Steps
● Calendar (top level functionality): Modification of a price and availability, calendar import
New listing post flow (to be tested with our users)
● Listing submission: 20 steps (12 original steps + 8 new pages with one function/feature per page)
● Calendar (top level functionality): Modification to price and availability, access to advanced settings
● Calendar (second level functionality): 8 features including calendar import, potential arrival date, preparation time or minimum number of nights, …
The main advantage of making this change is the place given to the main action (JTBD), i.e. updating the price and availability. The calendar only highlights this one feature. If users need to modify advanced settings they have that possibly, but access is hidden.
The second advantage is to highlight some minor or advanced features, by including them in a funnel with several stages. The user is focused and takes time to understand and use the features.
We started user testing (desktop and mobile) on this version. All user tests were done remotely. During the user tests we were able to involve my PO, developers in the feature team, and other designers.
Positive user test results
The results were pretty positive. 100% of our users are prepared to accept the longer journey. They find the added features relevant, and we have a declarative usage ratio of nearly one in two. The ratio is almost four times higher than the version of the calendar that was in production in 2021. This will need to be checked when we put the screens into production, but it is a good sign.
The calendar itself is considered simple to understand thanks to the colour codes and the legend being displayed at all times. Selecting dates and the concept of booking by the night are however still complicated to use. We will have to continue to iterate on that post-user testing.
C. Latest calendar corrections
Thanks to the user tests we noticed inconsistencies on the calendar. Some colours are considered too dull, some statuses (dates in the past, blocked dates) are not included…
We corrected these points with the leboncoin Ui teams. We created the latest version of the calendar (V4).
4. Performance monitoring
The majority of screens in production are tracked (by accepting cookies 😊🍪). This allowed us to measure whether the new calendar was more efficient.
The key statistic we looked at is the calendar’s activation rate, just after the listing is published online. The activation rate represents the transformation into an active customer when they first carry out an action.
This rate improved by 10 points with the new design. This is an encouraging result, as we have many novice and/or reluctant users. They are therefore discovering the calendar, and using it better.
+ 10 activation rate points with the new calendar design
One of the positive impacts of improved calendar update is a higher acceptance ratio of booking requests. If the owners receive requests for reservations on the right dates and at the right price, they will be more likely to accept.
The acceptance ratio has increased continuously since the calendar was updated. The calendar redesign is therefore definitely contributing to the growth of our main KPi.
5. Some lessons learned from this redesign process
Redesigning this feature kept us busy for a large part of the year, between its design and its development.
Several lessons have come out of this type of project:
- The importance of retro-planning: For a complex project it seems a precise schedule is a must. This is particularly useful for attempting to align expectations with the PO, providing visibility for fellow designers or managing the workload over time. My PO and I set up a macro schedule (tasks) then a micro schedule (weeks) for the project. Every week we had a progress meeting to take stock and adjust our retro-planning.
- Test a mobile version that is different to the computer: Mobile browsing is becoming more and more popular in 2022. Designs are therefore increasingly “mobile first”. However, a qualitative study revealed that our users’ behaviour is different ‘on the go’. We did absence tests on some features (e.g. price) and this did not present a problem. However, this would need to be confirmed in the long term by more qualitative studies and usage data.
- Pay particular attention to template integration: This project is cross-platform (Web, WebMobile, Android, iOS) so we created a lot of templates. Developer progress on the project differed from week to week, so we recorded all questions and feedback in a document. This was useful because it meant we could ensure consistency when a developer for another platform had a similar question. The journeys are therefore very similar in production :)
- Not getting hung up on your ideas is part of the process: Last but not least, a project like this is a team effort. 😄 We had expert feedback, customer feedback, developer feedback… that changed the project quite a bit (e.g. the pivot, the technical constraints). And this is normal on a project of this size. 😊 So you need to adapt and not stay hung up on your ideas. 💡
I hope you will find what I’ve shared helpful. 🙏🏻
By all means, leave us a comment if you have any questions.
If you found this article interesting, others are on the way, so click on the alert bell (Growing the design team, changing the UI tool …)! 😄
See you again soon! 😎
