Ironhack’s Prework: Vincent.P_Challenge 2
In this article, you will find my second pre-work challenge for UX/UI Iron Hack bootcamp.
This challenge is about user flow and wireframing.
Scope of the challenge — the leboncoin.fr app
A brief general scoping of Leboncoin
Leboncoin.fr is a website of classified ads. Owned by a Swedish company, it went online for the first time in 2006 and had an ever-growing success since then. In 2021, the site observed more than 20M visits a day and more than 1,5B€ of brut income.
Today, Leboncoin is the 4th most visited site in France, behind Google, Facebook and Youtube.
Why this user flow ?
I chose to analyze the user flow of a purchase on Leboncoin app, because it’s a flow I use often and I really appreciate how fluid and stimulating it is from my point of view. It is full of small invisible-yet-useful features.
Also, I noted a constant evolution of that flow. Many modifications were done when Leboncoin implemented a direct in-app payment feature to this flow. To me, it’s interesting to see how these modifications put the app in the classic e-business category although it comes naturally from a peer-to-peer background.
Analysis of the user flow
The flow in image
Screen-by-screen description
The purchase user flow of Leboncoin app totals 7 screens, from the search to the payment (I wouldn’t go until the confirmation, as I hadn’t anything to buy actually).
Screen 1 — Search
This screen is not only a simple text search. Beside an option to filter your search by category, it also allows you to bring back historic searches from your favorite searches or the last ones you typed in.
On this screen, we can find :
- A text input field,
- Buttons for every historic search proposed,
- A sub-menu for the category filter
Screen 2 — Automatic category suggestions
In this screen, is one of the smartest “invisible-yet-useful” features : the automatic category suggestion. As tons of ads can concern very different items for the same word, the app takes the user by the hand to be specific. This avoids inaccurate searches that could lead the user to think that what he searches isn’t proposed, or to feel discouraged by the amount of wrong results that would occur. Of course, the user is still free to skip the suggestions.
On this screen, we can find :
- The same text input field as previously mentioned,
- A tick box to search only in ads titles, which makes the search even more filtered,
- A button for every category suggestion.
Screen 3 — Search results
Back to basics in this screen : the main menu is visible again (couldn’t see behind the keyboard in the previous screens), which allows for basic navigation in the app. The search results are displayed with big pictures of the items available and useful information for each : price, condition, shipping option or location and publication date. More filtering options are also proposed at the top of the list.
One very useful feature is displayed (not invisible this time) : the ability to save the research — and put an alert on the next ads that would display in it in the future. This shows how good the app knows its users : lots of them look for something that is rare OR the best deal possible, which is what that feature is made for.
Another interesting feature : a small heart-shaped button on each item photo, allowing to keep the concerned item in the favorites. Very useful for shortlisting specific ads in a results screen that can be vastly scrolled.
On this screen, we can find :
- The text input field to adjust the search directly from the results,
- Location and other filters,
- A button for every search result, leading to the item page,
- A smallest button on every search result photo, allowing to keep the add in favorites,
- The button allowing to save the search in favorites,
- The app main navigation menu (5 icons).
Screen 4 — Item page
This screen is quite classic compared to any e-shop app. Item photos, description and info, sharing options and of course the magic highlighted purchase button.
Interesting to note : here, the main navigation menu icons have disappeared. Letting the more screen space possible for the item purchase action.
On this screen, we can find :
- Cross-shaped button to go back to the results,
- Sharing and favorite options buttons,
- 1 button on the photos to see it in fullscreen,
- An interactive map letting see where the item is located,
- Purchase and seller contact buttons.
Screen 5 — Shipping options
On this simple screen — which is actually an overlay -, we can find :
- One radio button for each shipping option,
- The validation button.
Screen 6 — Shipping address and first sum-up
This screen has 2 goals :
- Draw a first detail of the amount the user will have to pay, presenting by this mean the service fee that will be billed,
- Enter the user address for shipping, or the closest relay point to send the parcel to.
On this screen, we can find :
- A cross-shaped button to cancel the deal and go back to the previous step,
- A text-input field for the user’s address,
- Radio buttons to choose the relay point to send the parcel to,
- A highlighted button to validate and go to the next step.
Screen 7 — Payment
This screen offers what is now quite common for payment screens : total sum-up, payment options, credit card identification or modification and payment itself.
On this screen, we can find :
- One self-unfolding button for the total amounts,
- One button for the credit card choice and modification,
- Radio buttons for the credit payment options,
- One highlighted button for the payment confirmation.
Lo-fi sketch of the flow
The next step to reverse-engineer the purchase flow, is a lo-fi drawing of it.
Basic step-by-step path
In order to better understand the user path that leads him from searching to purchasing an item, I will summarize it step-by-step. For this exercise, I’ll take the most basic point of view, namely a “direct purchasing” action, without any verbal interaction with the seller.
- Step 1
The user types the name of his desired item in the search bar and hits the “Search” or “Return” button of the keyboard. - Step 2
The user selects an item in the list by tapping on it. - Step 3
The user looks at the item pictures and reads its info (price, description, shipping options, etc).
He goes back to the previous step if the item doesn’t match its expectations. If it does, he goes to the next step by hitting the “Buy” button. - Step 4
The user reads the different delivery prices. He changes the default delivery mode if needed. Then he hits the “Validate” button. - Step 5
The user reads the total sum. He changes the default delivery point if needed (for that, he can enter his address). Then he hits the “Pay” button. - Step 6
The user changes the default payment method if needed, which is to say: direct debit or credit. He can also setup another credit card. Then he hits the “Pay” button.
Task analysis
- Main task
The main task here is quite obvious : it’s the direct purchasing of an article on Leboncoin app. - Subtasks
To identify the subtasks, I used a mindmap — one of my favorite analysis techniques.
Wireframe and mid-fi prototype
From my analysis of the user flow, I could draw a mid-fi wireframe prototype of it.
Wireframe
