Parler de mon projet

Étude de cas

Le viager, estimé en 3 minutes grâce au simulateur

Pour Néo Viager, spécialiste de la vente en viager, nous avons refondu le site sur Webflow et repensé le simulateur, pour expliquer un produit et en permettre l’estimation en quelques minutes.

Parler de mon projet Voir les projets
Client
Néo Viager
Secteur
Immobilier, viager
Projet
Refonte de site et simulateur, 2026
Développement
Webflow
Page d’accueil du site Néo Viager sur un MacBook posé sur un buffet en bois, dans la lumière du soir.

Le contexte

Néo Viager accompagne les propriétaires qui vendent en viager et les investisseurs qui achètent. Le site devait rassurer, et donner une estimation avant le premier rendez-vous.

Notre rôle
  • Audit UX
  • Benchmark
  • Arborescence
  • Wireframes
  • Rédaction
  • Design d’interface
  • Simulateur
  • Développement Webflow
  • Formation
Outils
  • Figma
  • Webflow

Enjeux

Les enjeux, nos réponses

  1. L’enjeuUn produit que peu de gens comprennent, et que beaucoup redoutent.

    Notre réponseUne arborescence qui part des questions du visiteur, avec un guide du viager et une FAQ par public.

  2. L’enjeu2 publics aux intérêts opposés sur le même site, le vendeur et l’investisseur.

    Notre réponseUne entrée par public dès le menu, chacune avec ses pages, ses guides et ses appels à l’action.

  3. L’enjeuUn simulateur à plusieurs scénarios, du viager occupé à la nue-propriété.

    Notre réponseUn parcours en 3 étapes, qui affiche le résultat à l’écran et compare les solutions entre elles.

Ce que nous avons fait

01Stratégie et UX

Arborescence et wireframes

L’arborescence a été construite avec l’agence SEO de Néo Viager. Le menu sépare d’emblée ceux qui vendent et ceux qui investissent, puis chaque branche descend du général au précis, de la solution au guide, de la FAQ à l’estimation.

Les wireframes sont conçus pour le mobile d’abord. Le simulateur y devient un parcours en 3 étapes, et des blocs d’estimation se glissent dans les pages, là où la question du prix se pose.

Accueil88 pages

  1. Vendre en viager9

    • Viager occupé
    • Viager libre
    • Nue-propriété
    • Autres solutions
    • Campagne× 3
    • Témoignages
    • Questions

  2. Investir en viager8

    • Investir
    • Questions
    • Guide
    • Article× 5

  3. Nos services10

    • Après la vente
    • Agences
    • Ville× 2
    • Calculateurs
    • Simulateur
    • Calcul× 4

  4. Ressources52

    • Guide du viager
    • Article× 25
    • Blog
    • Article× 19
    • Auteur× 6

  5. Qui sommes-nous ?6

    • L’équipe
    • Partenaire× 4
    • Contact
  • Entrée du menu
  • Page
  • Gabarit, page template CMS
Le plan du site : une entrée pour vendre, une pour investir, les ressources à part, et le simulateur toujours à portée.
Fil de fer de la page d’accueil de Néo Viager : titres et textes en place, photos et logos remplacés par des blocs gris.
Le fil de fer de l’accueil : la structure, avant le design.

02Branding et direction artistique

Identité de marque

Le site part de la marque Néo Viager, un nom écrit en serif, d’un seul tenant, et une étoile à 4 branches posée au bout du mot. L’étoile revient partout, dans les boutons, les puces et les grands motifs du fond.

Le logo Néo Viager en contour, sur sa grille : la hauteur des minuscules, la ligne de base, et l’étoile posée au-dessus du r, à la hauteur des minuscules.

Le logo en contour et ses repères : la ligne de base, la hauteur des minuscules, et l’étoile qui s’y aligne.
Le logo sur les fonds de la marque.
L’étoile, seule, sur les fonds du site, pleine ou en contour, et le logo entier.
  • Indigo#100037Principale
  • Vert#47E6B1Action
  • Vert foncé#39B88E
  • Jaune#FFC107
  • Blanc#FFFFFF
  • Beige#F5F2EEFond
  • Beige foncé#DBD3C8
Les couleurs du site, relevées dans ses variables : l’indigo, deux verts, le jaune des avis et trois tons clairs.

03Design d’interface

Design et gabarits

La nouvelle charte de Néo Viager venait d’être validée, avec 2 couleurs franchement contrastées. La directrice artistique de la marque a conçu la page d’accueil, nous avons décliné le système sur tout le reste. Pages solutions, guides, articles, simulateurs, pages villes.

Les sections sont documentées dans Figma comme dans Webflow, pour que l’équipe monte une nouvelle page sans repartir d’une feuille blanche.

Titres

  • Gelica Medium

Vos projets prennent vie grâce au viager.

Textes

  • Figtree Regular
  • Figtree Medium
  • Figtree Bold

Néo Viager vous accompagne à chaque étape de votre projet.

Gelica pour les titres, Figtree pour le texte.

Typographie

Gelica et Figtree

Graisses

  • Gelica Medium500
  • Figtree Regular400
  • Figtree Medium500
  • Figtree Bold700

Échelle

  • Vos projets prennent vie grâce au viagerH1 / 48 px / Gelica
  • Découvrez toutes nos solutions viagèresH2 / 40 px / Gelica
  • Premier rendez-vous avec un expertH3 / 20 px / Figtree Bold
  • Néo Viager vous accompagne à chaque étape de votre projet personnalisé, avec expertise et bienveillance.Corps / 16 px / Regular
  • Indigo#100037Textes, sections sombres
  • Vert#47E6B1Boutons, puces
  • Vert foncé#39B88EVariante du vert
  • Beige#F5F2EEFond des pages
  • Beige foncé#DBD3C8Fonds alternés, filets
  • Jaune#FFC107Étoiles des avis

Boutons

Estimer mon viagerEstimer mon projetPrendre contact
01 87 66 86 70

Surtitres et questions

SolutionsRetours clientsRessources
  1. Comment faire pour vendre son bien en viager ?
  2. Peut-on vendre en viager partout en France ?
  3. Comment est déterminé le prix de vente en viager ?
Le design system du site : typographie, échelle, couleurs, boutons et composants.

04Design d’interface

Rédaction

Titres, sous-titres, appels à l’action, micro-textes. Nous avons écrit les textes qui font agir sur les pages clés, avec une règle, dire ce que le visiteur obtient. « Estimer mon viager » plutôt qu’un vague « En savoir plus », et la promesse tenue juste derrière, 3 minutes, un chiffre.

Les contenus longs (guides, blog) sont restés entre les mains de Néo Viager et de son agence SEO.

Premier écran de l’accueil Néo Viager : titre, 2 boutons et 2 photos en cartes inclinées, puis les logos des partenaires.
L’accueil, premier écran.
Section des solutions de l’accueil : viager occupé, nue-propriété et viager libre, en cartes sur fond indigo.
Les solutions viagères, en cartes.
Section des témoignages de l’accueil : avis notés 5 étoiles, chacun avec la photo de l’expert qui a accompagné le client.
Questions fréquentes de l’accueil, avec un cadre indigo « Vous avez toujours des questions ? », puis 3 cartes d’appel.
Les témoignages, puis les questions.
Page Qui sommes-nous du site Néo Viager sur un iMac posé sur un bureau en bois clair, devant un mur rosé.
La page Qui sommes-nous, sur un iMac.
Page Viager occupé : 4 avantages en cartes indigo, puis l’accompagnement en 3 étapes.
Page Investir en viager : pourquoi investir avec Néo Viager, avec un graphique de projection.
Vendre et investir : 2 pages, une même construction.
Section « Qui est Néo viager ? » de l’accueil : texte de présentation, photo des fondateurs, avis Google et chiffres.
Qui est Néo Viager : l’histoire, l’équipe et la preuve.

05Design d’interface

Version mobile

Chaque page a sa version mobile. Les cartes s’empilent, les boutons passent en pleine largeur et le menu se range derrière un bouton vert, toujours à portée du pouce.

3 iPhone 17 de face sur le beige de Néo Viager : l’accueil, le simulateur et la page Investir en viager.
L’accueil, le simulateur et la page Investir, sur mobile.
Page Viager occupé de Néo Viager sur un iPhone posé contre un mur crépi, à côté d’un vase, dans la lumière du soir.
Page Qui sommes-nous de Néo Viager sur un iPhone tenu à 2 mains.
La page Viager occupé contre un mur, la page Qui sommes-nous en main.
2 iPhone sur le beige de Néo Viager : l’accueil et la page Témoignages.
L’accueil et les témoignages, sur le beige du site.

06Développement Webflow

Développement Webflow

Le site est développé dans Webflow par Le Studio. Guide du viager, guide de l’investisseur, blog, simulateurs, pages partenaires et pages villes reposent sur des gabarits CMS.

Avant la mise en ligne, le site est passé par un audit technique complet (liens, balises, textes provisoires), corrigé point par point avec l’agence SEO. Il est en ligne depuis mars 2026, et l’équipe a été formée en vidéo.

Page du guide du viager : le hero, puis les articles rangés par thèmes.
Gabarit des articles du guide : un article sur le viager occupé, avec son sommaire.
Le guide du viager, puis le gabarit de ses articles.
Page Viager occupé du site Néo Viager.
Page Nue-propriété du site Néo Viager.
Page Viager libre du site Néo Viager.
Viager occupé, nue-propriété, viager libre : 3 solutions, une même construction.
Page Blog du site Néo Viager : le hero, puis la grille des articles et leurs filtres.
Le blog : chaque article sur le même gabarit.
Section « Découvrez notre équipe » de la page Qui sommes-nous.
Page locale de Néo Viager pour Paris.
Page Gestion viagère du site Néo Viager.
Page Témoignages du site Néo Viager.
Section « Pourquoi choisir Néo Viager ? » de la page Qui sommes-nous.
Page Investir en viager du site Néo Viager.

Résultats

Quelques mois plus tard, le client est revenu

3 minutes
pour obtenir une estimation en ligne.
4
opérations simulées, du viager occupé au prêt viager hypothécaire.
10 000
visites par mois, des guides aux simulateurs.

Le site est en ligne depuis mars 2026. 4 mois plus tard, Néo Viager nous a confié la suite, un audit des pages qui amènent des demandes et un programme de tests A/B. Un client qui revient, c’est le meilleur indicateur que nous ayons.

Nos autres projets

Nos expertises : stratégie, UX, CRO, branding, UI, développement web, SEO.