fabernovel loader

May 17, 2017 | 7 min read

Design

Le Bon Coin App MakeOver

Claire Dufetrelle

Senior Product Manager


FABERNOVEL TECHNOLOGIES
too long; didn't read
  • For a redesign, define your goals when you start your redesign and come often back to these.
  • Simplify! please do not ask your users to do what you can do for them.
  • Information design is not optional: it is easier to find stuffs when organized properly.
  • Disposition of elements is significant.
Le Bon Coin, a well-known service, was a perfect candidate for an App MakeOver, we’ve redesigned it few months ago. But they just launched a graphically-redesigned iOS app. We want to compare our works: what would have we done if Le Bon Coin had asked us to redesign its app?

The goal of Applidium is to provide the best mobile experience, by perfect graphically-designed screens but also by a well-designed navigation and organization of information. These convictions drive the work we do for our clients, but we are also compulsive mobile apps users (I have 151 apps on my phone). And when an app disturbs us or challenges us, comes the envy to redesign it all over: we call it an App MakeOver.

Le Bon Coin, a well-known service, was a perfect candidate for an App MakeOver, we’ve redesigned it few months ago. But they just launched a graphically-redesigned iOS app. We want to compare our works: what would have we done if Le Bon Coin had asked us to redesign its app?

Who is Le Bon Coin?

First let’s look at Le Bon Coin’s identity and service. When you know that this classified ads site gathers more than 23 millions unique viewers per month, it is natural to call it a French tech success. Nevertheless Le Bon Coin comes from Sweden since it was adapted from Blocket.se in 2006. This site was adapted in many countries: each time built with a local team, to ensure local specificities are respected.

Le Bon Coin was also studied by some sociologists and historians who see in it the offspring of Middle Ages fair. Everyone can expose on its doorstep what they want to sell without intermediates. Le Bon Coin is kind of a recovered link which was broken by modern commerce.

Besides Le Bon Coin is famous for its graphism and its well-known light yellow background (originally chosen to avoid flicker on older screens). It is almost a commonly shared joke that Le Bon Coin is “ugly”, vintage but nice, just like your grandparents’ house. But Le Bon Coin got rid of this in february 2016: no more light yellow background, redesign of search filters but minor changes  in the iOS app but no real redesign of navigation. We had to do something.

App MakeOver goals

For us  the goals of this App MakeOver are to embody the local DNA and specificities of Le Bon Coin in their iOS app but also to satisfy their main business goals.

Let’s ask questions that matter: what is the main goal of Le Bon Coin? What is its business model? In fact Le Bon Coin generates revenues by providing options to put your classified ads forward. The site has value because it is large but it is also difficult to scroll all this stuff and find the perfect item. The value proposition of Le Bon Coin is mediation, the user has to be able to:

  1. find the perfect ad
  2. connect with the seller (sales are made outside of Le Bon Coin, peer-to-peer)

Then we decided to focus on simplicity of search and eased connection between buyer and seller.

Do you plan a redesign of your app? Try to define your goals

Navigation

First let’s analyse the iOS app before redesign. At launch the first screen we see is a map without any explanation and we are supposed to choose a region. Quite frustrating when you know your smartphone is also a GPS.

So we did choose our region, the menu showed up and we clicked on “Home” entry: we were redirected to this map where we were already before! It is actually a common mistake: a section’s name does not reflect its purpose. Users are forced to open all sections and explore; even worse they are forced to deal with your way of thinking but it should be the opposite.

So, let’s put ourselves in your user’s shoes. What does she want to do ? Buy stuff, sell stuff and manage her account: 3 main goals. An app hardly serves more than 3 main purposes. Think of it as your pitch it: after the third main goal, nobody’s listening anymore, your product should not become a Swiss Army Knife.

Menu before redesign, color rectangles are ours: green for sections related to Account, red for selling sections and blue for buying.

Let’s look at the menu, when authenticated and not-authenticated, with theses 3 purposes in mind:

  • it is difficult to give a title to the first section, and other sections are not consistent. Furthermore when user authenticates, the menu changed: her ads moved from a section to another.
  • to achieve one of the main goals, user will have to open the menu several times and switch between sections: her progression is more complicated and discontinuous.

Remember that your user often opens your app with a single idea in mind, one thing to do. So we have to ease this action. For a service app it is not a goal to increase session duration: if your app is very slow and impossible to use, session will be very long but you may have missed the goal. For Le Bon Coin we want the user to call the seller of an interesting product as soon as possible.

Our choice was then to swap the burger menu for a tab bar : 3 main purposes = 3 sections. Sections can always be seen and title is self-explaining. The former Burger menu was a list of titles which did not explain what was behind.

Each section has one goal and the right title to explain it.

Le Bon Coin made the same choice, but uses 4 sections. We choose not to do a separate “Favorites” section, nevertheless we agree on the new Tab bar navigation.

Does your app include a burger menu? imagine redesigning it with a tab bar

Where is my user?

Before and after redesign made by Le Bon Coin

Before and after its redesign, Le Bon Coin displays a map at launch, with no explanation at all. We choose a totally different perspective: display by default ads located nearby without asking!

Doing so most of the users who consult Le Bon Coin at home or at work will be satisfied. For the few of them who may open the app far from the place they want to buy stuff, they can change it in the search area. We did the idiot work for the user and we did it right most of the time.

Two steps to access ads

The most important section is for us “J’achète” (= Buying) since buying stuff is the #1 goal of a flea market; selling is the second one but sellers can find great things to buy also, that’s serendipity!

But it may not happen unless you see the object. So we chose to display big pictures and to do it as soon as the user opens the app, it is now the home screen.

Our proposition

In your app, do you see something you could do without asking your user? to simplify its experience

Details screen

Let’s take a look at the details screen and compare:

Details screen by Le Bon Coin
Our proposition for the details screen
  • more space for pictures: it is the product we want to buy, we want to see it. We have both made this choice
  • most pieces of information are self-explanatory. We replaced “Price: 250€” by “250€”, as clear as before, and we have saved some precious space
  • Both us and Le Bon Coin give more visibility to the contact button, but in our redesign we keep the choice of contact mode in a second time to simplify interface
  • we give more space to the description text. The user can take a look at the picture, a look at the description and then contact vendor
  • Le Bon Coin lets users modify or delete ads. A great choice if you are the author of the ad, quite confusing otherwise. We chose to leave this feature in the “Account” section
  • we kept the Tab bar here to ease navigation. Le Bon Coin replaces it by an action bar (the blue one). It looks like a tab bar but has nothing to do with navigation

Side note: you may have noticed that we abandoned the blue to give more space to orange which is more easily associated withLe Bon Coin, and then we simplified the screens to lead to more sober and lisible interfaces.

Search

Last let’s take a look at Search.

3 steps: enter a word , see ads nearby, click on filter to access advanced search

 

Our proposition: a search with main criteria

Once again our goal here was to simplify. We focused on key parameters: place, category and price. We added the price to search when Le Bon Coin places it in the ads list where you can filter results by price. But when you plan a purchase the budget you dedicate to it is key.

Le Bon Coin has chosen to move the feature of saving your search in a dedicated “Favorite” section. in our proposition it has been moved in the navigation bar because it is quite secondary compared to “validate” which is though highlighted. The way elements are placed is significant of their importance and frequency of use.

You will have to enter your search twice if you want to save it.

Do you see in your app some examples of elements that take too much place regarding their importance, or the opposite?

Conclusion

This redesign has to be continued to be complete but that’s all for us! Some key points to remember:

  • define your goals when you start your redesign and come often back to these. We chose to highlight “Contact” feature and it drove our redesign of detail screen.
  • simplify! please do not ask your users to do what you can do for them. We chose to propose ads nearby without asking and this is the right choice most of time.
  • information design is not optional: it is easier to find stuffs when organized properly. Our Tab bar displays all available sections with clear titles for what is behind.
  • disposition of elements is significant. In our details screen, the star icon to make an object favorite is in the nav bar: easy to see, easy to access.

Let’s continue this discussion or talk about the redesign of your own app !

contact us!
logo business unit

FABERNOVEL TECHNOLOGIES

150 talents to face technological challenges of digital transformation

next read