Le Figaro
Résilier.
Refonte complète de Resilier.com — repenser un service d’assistance à la résiliation de bout en bout, du catalogue de lettres aux outils de calcul, avec un design system Atomic Design déclinable sur trois breakpoints.
« Résilier un contrat est un droit. Le rendre simple, accessible et déculpabilisant était le seul objectif qui comptait. »
Resilier.com accompagnait des millions de consommateurs dans leurs démarches de résiliation — box internet, forfait mobile, assurance, abonnement, location, énergie. Mais le site avait vieilli : l’architecture était dense, l’expérience mobile était une adaptation du desktop, et le design system n’existait pas en tant que tel — juste un empilement historique de composants.
Mon approche s’est structurée autour d’un principe fondateur : la résiliation est souvent un moment de friction et d’anxiété pour l’utilisateur. L’interface devait réduire cette anxiété — par la clarté, la prédictibilité, et la sécurité du parcours.
La refonte a couvert l’ensemble du site : homepage, catalogue de lettres, pages de services par opérateur, guides et dossiers, outils de calcul des frais de résiliation, FAQ, pages de résultats, compte utilisateur. Le tout structuré dans un design system Atomic Design complet, déclinable sur 3 breakpoints desktop et mobile.
Trois points de friction
identifiés.
Resilier.com couvrait des dizaines de catégories de contrats, des centaines de marques, des milliers de pages. Le risque était de créer un site exhaustif mais illisible. L’enjeu était de trouver une architecture d’information capable d’absorber cette diversité sans noyer l’utilisateur dans son moment de recherche.
Le site était à la fois un générateur de lettres (outil fonctionnel), un media d’information (guides, FAQ, actualités) et un service expert (accompagnement personnalisé). Ces trois logiques coexistaient sans articulation claire. La refonte devait les réconcilier dans un parcours cohérent.
La refonte devait être livrée en Atomic Design — Atoms, Molecules, Organisms — avec des tokens de couleur, des règles typographiques documentées, et des composants déclinables sur 3 breakpoints (1920, 1440, 1024 desktop + mobile). Un système à construire from scratch pendant la refonte elle-même.
Une démarche
en 4 temps.
Audit ergonomique de l’existant (desktop et mobile), analyse des données comportementales (entonnoirs de conversion, taux d’abandon sur les parcours de génération de lettre), entretiens avec des utilisateurs en démarche de résiliation. Identification des parcours prioritaires et des moments d’anxiété dans le processus.
Redéfinition de l’architecture d’information, définition de la taxonomie des catégories et marques, construction des tokens (couleurs, typographie, espacement, border radius), établissement des règles Atomic Design. Construction itérative du design system en parallèle de la conception des écrans.
Conception de l’ensemble des templates : homepage, catalogue de lettres (par catégorie et par marque), pages de services, guides, dossiers, outils de calcul Loi Chatel, FAQ, pages de résultats, compte utilisateur, page 404, page auteur. Maquettes haute fidélité sur 3 breakpoints desktop + mobile.
Tests utilisateurs sur les parcours critiques (génération de lettre, calcul de frais de résiliation, recherche par marque), mesure des taux de conversion, itérations ciblées. Déploiement progressif sur 12+ mois, par lots de templates plutôt qu’en basculement unique.
Un service refondu,
un système pour durer.
La refonte de Resilier.com a permis au groupe Le Figaro de moderniser l’un de ses services grand public les plus fréquentés, avec une expérience utilisateur refondée de bout en bout — de la homepage aux outils de calcul — et un design system Atomic Design livré comme socle pour les évolutions futures.
Au-delà des chiffres, la refonte a transformé la nature du service : de site d’information sur la résiliation à véritable compagnon de démarche — qui rassure, guide et outille l’utilisateur jusqu’à la lettre envoyée.
Ce que ce projet
a confirmé.
Sur un site de cette complexité — des dizaines de catégories, des centaines de marques, des milliers de pages — l’architecture d’information est le design. Les décisions de taxonomie et de navigation ont plus d’impact sur l’expérience que les choix visuels.
Définir un design system Atomic en silo, puis le livrer au développement, produit des composants non implémentables. La co-construction itérative — désigner un atome, le faire implémenter, ajuster, passer à la molecule — a été la clé d’un système réellement utilisé en production.
Un utilisateur qui résilie un contrat est souvent dans un moment de tension — il a l’impression d’affronter un système conçu pour le retenir. L’interface devait inverser ce ressenti : rendre visible la simplicité là où l’on attend de la complexité. C’est un travail de wording, de hiérarchie et de progression.
Sur Resilier.com, un basculement brutal aurait mis en danger le référencement et les performances d’un site qui générait des millions de visites organiques. Le déploiement itératif était la seule option responsable — et il a permis de mesurer l’impact de chaque évolution en conditions réelles.