leboncoin • App redesign
00 • OVERVIEW
This project’s goal was to redesign a few screens of a well-known native mobile app.
I chose to redesign leboncoin’s app, because I’m a regular user. I felt like their current app wasn’t really visually optimized, and didn’t match with their latest visual identity renewal, dating back to 2019.
Scope & Constraints
The timeline for this project was (only) 3 days — let’s even say 3 afternoons, since the mornings at Ironhack are dedicated to lessons and labs — and it was also the first solo project.
There was no need to conduct any user research, first because of the short timeline, second because the main goal here was to improve our visual and user interface (UI) skills, and not to focus on user experience (UX).
01 • RESEARCH & ANALYSIS
➔ Replica & brand analysis
The first step was to replicate 3 screens that we could choose among the app, to get a sense of what we’ll have to deal with and see if there were any major concerns to address.
I chose the Homepage, the Profile page and the Product page because they seemed to me to be the most interesting ; there was room for change, improvement and creativity.
Homepage, My Account & Product page from leboncoin’s current app
Thanks to the “cloning” task, I was able to determine that leboncoin uses only one font. Moreover, a very basic one, but in a variety of sizes and different weights. I also noticed that the majority of their containers’ corners were very slightly rounded, sometimes even with square corners and that there was no real consistency between all the interface elements.
Then, I made a quick research on leboncoin current brand and visual identity to know more and discovered they renewed it in 2019; I was surprised by the fact that their app didn’t quite match with it. Indeed, leboncoin’s app design is very “black & white” and do not highlight neither the colors choices that were made, nor the roundness and the curves, supposed to bring more personnality to the brand.
Source : http://4uatre.fr/leboncoin
➔ Heuristic evaluation
The following step was to perform a heuristic review of the selected screens. The main challenge that arose here was consistency & standards (especially in the letter spacing, in the thickness of the icons, on the aligment between icons and texts,…) and minimalistic design (there is a looot of information so the scroll can be never ending).
➔ Competitor’s analysis
Finally, I conducted a visual competitors analysis, in which I examined the design of similar apps such as Vinted, and Seloger.
This helped me to measure how these brands applied their visual identity, how they used colors, and what kind of user interfaces they were using for their native mobile apps. It gave me food for thought and inspiration on some aspects for the redesign of leboncoin.
The real challenge I faced with leboncoin’s app was to keep a clean layout, to gain readibility, to fit better with the visual identity of the brand by bringing more roundness and curves while staying as realistic as possible.
02 • IDEATION
Moodboard
I designed a moodboard based on the attributes I thought best suited leboncoin : proximity, easy, friendly, as well as peer-to-peer and second-hand.
Regarding the colors, I didn’t want to change the iconic colors to stay as realistic as possible, so I chose to keep the “leboncoin’s orange” as a primary color, and to use the blue from their 2019 new brand identity as a secondary color for a better balance. Also, I used lighter shades to soften backgrounds or forms. In terms of neutrals, I created leboncoin’s orange derivatives for the black, greys and white.
For the font, I chose Manrope for the titles, and Oxygen for the body, because these two fonts are clear, legible and slightly round.
For the iconography, I chose to change the current icons to rounder ones, and to color them to give more visual consistency and readibility to the app.
Last but not least, inspired by the perfect sunset picture I put in my moodboard (who doesn’t like sunsets after all ?), I decided to create a gradient from orange to blue in order to highlight the “add a small ad” functionality of the app, on the nav bar.
Style Guide
03 • PROTOTYPING
After deciding on colors and fonts, I brainstormed on the possible layout changes.
According to me, it was no use to make any major changes to the layouts of the existing pages I chose to redesign, because it was already quite clear, and also because the content didn’t have to be modified.
However, I wanted to give more relief and modernity to the final result. That’s why I wanted the corners of images, forms, buttons to be rounder than on the current version.
Below you’ll find a short video to show you my interactive prototype ⬇️
My redesigned screens for leboncoin
Outcomes & lessons
It was the first project we had to do on our own, and I was completely free to use my creativity and to decide on which elements to focus on. Also, it allowed me to take some time to learn some new Figma tips & tricks that I didn’t know, and to train with the software. It also made me realize the amount of things that we can do with it, and I really look forward to being able to spend more time on improving my UI skills.
This project was also the first opportunity for me to confront my work to “Design Critique”, which allows critical thinking from peers and I really enjoyed doing it. According to me, this is the best way to improve your work and to share ideas, all with a view of positivity, understanding the others’ point of view, examining the reasons behind different statements — in short, this exercise allowed me to take a step back and gave me food for thought on how to improve my design.