UX/UI Design Case Study: Retraite.com’s revamp, a financial investment comparator 🔍
The last 2 years with Covid-19, lead French people to worry more about financial safety. Between March and June of 2021, French households have saved 75 billion euros !
It is in this context that I had the opportunity to work for Ludovic, owner of the website www.retraite.com, an online comparator for financial investments about retirement, such as life insurances, PER (Plan Epargne Retraite)…
His goal is to — thanks to a quick form — provide financial solutions to users in search of building additional income for when they retire.
So, let me show you how and what I did for Ludovic 👇
Retraite.com, your retirement companion 🤝
Retraite.com is an online comparator and thorough guide about retirement. It provides many guides and articles about retirement, the best solutions, each solution detailed, fees, simulators and many more.
Thanks to a quick form asking you information such as your income, when did you start working, your taxes (…), the comparator can provide you, precise data about:
- your retirement age;
- the amount of your pension;
- the best financial solutions you can subscribe to, to build additional income for your retirement.
Because that’s the deal: when you retire, you lose up to 60% on average of your income compared to when you work. Half of French working people consider that their pension will not suffice, when only 23% consider that it will.
And the problem on top of that is that:
- only 12% of retiring people have a supplementary pension;
- and when people do subscribe, it is “too late”: they already are close to retirement (50–59 yo).
Also, 48% acknowledge having “no idea of the amount of savings needed” to build up sufficient additional income for retirement.
Sources : Mensuel du Cercle de L’Épargne — Juillet 2020 // Étude AMF France : Epargne retraite : une préoccupation pour 71 % des Français — Janvier 2020
In the end, people are facing retirement with stress and uncertainty. That’s why retraite.com exists :
- to give you tools to be better prepared;
- to compare and find the best solutions to start saving money;
- to help you save money “sooner”;
- to help you determine how much you have to save to get a comfortable pension.
But, why am I here ? 😅
Retraite.com is a good website in terms of information provided and tools. But, as many websites built in the early 2010s, it lacks UX Design. The experience is quite rudimentary and the flow is long and confusing. Also, the amount of information is huge and sometimes you can get lost.
Before the revamp, the comparator was built in several steps: one step for one information asked on the form, and the results were also shown in 2 steps: one for the retirement age and pension amount, another with the solutions provided.
Unfortunately, Ludovic was losing 30% of users between the 1st result and the table of financial solutions to compare. People were not seeing the solutions !
My analysis of the comparator 🧐
The 1st “obvious” solution in mind was to merge the 2 steps and give the user the 1st results AND the solutions provided on one page. But before jumping into a solution, let’s first analyze the comparator.
Here are the 1st things that we can notice about the comparator that are wrong:
- In the form, some elements could be easily fixed like for examples : buttons should be disabled if the person hasn’t filled in the form to get next;
- The tooltips are missing;
- Your eyes wander on the page, especially when you scroll to see all the elements;
- There are too many colors and icons used on the page: there is no clear information that stands out
- The hierarchy is not well implemented amongst the CTAs: all the buttons have the same UI, even if they don’t have the same priority;
- The podium of solutions is not clear: why is the 1st solution, not the one that gets you more savings?;
- …
As you can see, it was not that easy to “just” merge the 2 steps and something I haven’t told you yet but you can see on the screen is that Ludovic proposes to compare up to 7 different financial investments! So it is a huge table with 7 products displayed and for each product, 3 partners are selected to be compared.
Fiouuu, do you see where I’m getting?
The whole process and page had to be reimagined, to provide the right amount of information AND help people compare the solutions.
To be more precise about the changes, as you get to understand now, my work was more complex than just merging two steps and applying a layer of a more modern UI. My revamp consisted in multiple actions :
My constraints:
- separate online and network insurers
- add special offers on the financial products
- add reassurance throughout the flow
Revamp of retraite.com’s comparator 🥳
- User Flow
As I started my revamp, I first wanted to rethink the form flow and the number of steps to fill in to get the results. As I told you, the previous form had one question per screen (except for the personal information), so a total of 9 steps (+ 2 results pages).
Even though this method is usually good to speed up the filling of the form, I wanted here to try (because at the end, everything will be monitored to see whether it works better or not), to gather similar data asked, to shorten the form, and merge the results into one page.
Here is the new User flow I created:
From this new flow, I started wireframing the screens in Mid-Fidelity.
2. Mid-Fidelity Wireframes
In total I created 24 screens:
- A “landing page” that can be duplicated if necessary with the colors of a partner associated (Capital, Challenges, France 2…);
- 4 steps (empty, filled and with errors);
- Different pop-ups that open in overlay;
- A loading screen;
- A confirmation screen (stating that an email was sent to you to get your results);
- The result page and the pop-ups associated.
In mobile, I also created other ways to present some information and functionalities:
- the simulator opens in an overlay from the bottom to top
- some information are folded in accordions for example
- …
I presented the different wireframes to the client and he almost had no modifications to ask for. He had a great mindset in this project since his goal was to implement fast in order to test and make adjustments if necessary!
That’s how I quickly got to the next phase: the UI Design of this project.
Conception and High-Fidelity Wireframes 🎨
As you saw in the screens of the previous website, there were too many colors used on the website, with no hierarchy. That’s the first point I wanted to correct with this revamp: define a real color scheme for the website and the hierarchy of each color and how to use them:
- I used the current colors of the website but corrected them in terms of contrast and developed a color palette from that;
- I created the accents, primary, neutral and functionals colors for the website;
Here is the Style guide I created from the following brands attributes:
Confiance (trust) | Santé (health) | Sérénité (serenity) | Finances (finances)
I also completely reimagined the most important element of the website: the tables. It’s something that can be very tedious to read, especially when you present 7 solutions with 3 partners each time!
That’s why I decided to present each solution offered as a whole and not just a line in a table.
Here you can see a video with all the user flow 📼
Responsive design 🤘
Of course, the website was created mobile first:
To conclude
Feel free to comments my work (with a message) below?
I am very pleased with the result and the good mindset and relationship I had with the client.
This new version allowed the client to retain its users on the results page with 22% of rebound rate (versus 30% before)! 🚀
I’m very happy to continue working with this client in the future! So stay tuned to see what’s coming next 😀
