Parler de mon projet

Étude de cas

Un simulateur en 2 étapes, et des gabarits pour publier en série

Pour Arrago, spécialiste du prêt viager hypothécaire, nous avons repensé le simulateur et structuré les gabarits visant à recueillir du nouveau contenu sur leur site Webflow.

Client
Arrago
Secteur
Prêt viager hypothécaire
Projet
Site vitrine, 2024
Développement
Webflow, par l’équipe d’Arrago
La page Simulation rapide du site Arrago sur un MacBook tenu sur les genoux, dans une lumière claire.

Le contexte

Arrago propose le Prêt 60, un prêt viager hypothécaire réservé aux propriétaires de plus de 60 ans. Son site devait mieux qualifier les demandes, et gagner du trafic grâce à son contenu.

Notre rôle
  • Audit UX et CRO
  • Wireframes
  • Design d’interface
  • Rédaction
  • Gabarits de pages
  • Passation aux développeurs
Outils
  • Figma
  • Webflow

Enjeux

Les enjeux, nos réponses

  1. L’enjeuUn simulateur de prêt à un seul niveau de qualification.

    Notre réponseUn parcours en 2 étapes, une première estimation en 3 champs, puis un dossier complet avec un conseiller.

  2. L’enjeuDes guides, des ressources et un blog encore à structurer.

    Notre réponseUn gabarit par type de page, pour produire du contenu en série.

  3. L’enjeuUn public de plus de 60 ans.

    Notre réponseUn design pensé d’abord pour l’ordinateur, et des textes clairs, rassurants, sans jargon.

Ce que nous avons fait

01Stratégie et UX

Audit et wireframing

Nous avons audité le parcours existant, avec une attention particulière à l’accessibilité. Le public d’Arrago a plus de 60 ans, et il prépare une décision qui engage sa maison. Ce lecteur-là prend son temps, sur un grand écran.

La structure est fixée en wireframes, avant le premier choix visuel. C’est à cette étape que le simulateur passe en 2 temps. Le premier est très court (un prénom, un e-mail, un téléphone) et donne une première estimation de faisabilité. Le second approfondit le dossier et mène à une réponse complète, avec un conseiller.

Accueil146 pages

  1. Le prêt3

    • Prêt viager hypothécaire
    • Nos solutions
    • Questions fréquentes
  2. Guides86

    • Guide× 86
  3. Simuler4

    • Simulateur
    • Simulation rapide
    • Comparateur
    • Rente viagère
  4. Arrago10

    • L’équipe
    • Notre mission
    • Presse
    • Témoignages
    • Témoignage× 3
    • Contact
  5. Blog39

    • Blog
    • Article× 35
    • Auteur× 3
  • Entrée du menu
  • Page
  • Gabarit, page template CMS
Le plan du site : le prêt, les guides, le simulateur, la marque et le blog, avec des gabarits pour tout ce qui se produit en série.
Fil de fer de la page Simulation rapide d’Arrago : titres, formulaire en deux temps et blocs, photos et logos remplacés par des blocs gris.
Le fil de fer de la simulation rapide : le formulaire en deux temps, avant le design.

02Branding et direction artistique

Identité de marque

Le site part de la marque Arrago, un A aux angles arrondis en 3 couleurs, bleu ciel, orange et bleu nuit, et un nom écrit en bleu nuit. Le bleu nuit porte les sections fortes, le bleu ciel et l’orange les appels. Chaque déclinaison a son fond.

Le logo Arrago en contour, sur sa grille : 3 cercles pour le sommet et les deux pieds du A, la hauteur des capitales et la ligne de base du nom.

Le logo en contour et ses repères : le sommet et les pieds du A sur 3 cercles, le nom calé sur la hauteur des capitales.
Le logo sur les fonds de la marque.
Le A, seul, sur les fonds du site, en couleurs, en aplat ou en contour, et le logo entier.
  • Bleu nuit#252F60Principale
  • Bleu nuit clair#5E6EBF
  • Bleu#3EB4E5
  • Bleu ciel#93E7FFBoutons
  • Lavande#D0D4EA
  • Bleu pâle#ECF7FCFond
  • Orange foncé#E79723
  • Orange#F9B450Appel
  • Orange clair#FDD499
  • Gris#5C6077
  • Blanc#FFFFFF
Les couleurs du site, relevées dans ses variables : les bleus, les oranges, le gris des textes.

03Design d’interface

Design et gabarits

Nous avons conçu des gabarits pour la page d’accueil, les guides, les ressources, les articles de blog et plusieurs pages types. Chacun a son en-tête, son sommaire, ses encadrés et ses tableaux comparatifs, prêts à recevoir un nouveau sujet.

L’équipe d’Arrago publie une page de plus sans toucher au design. C’est ce qui rend possible une production de contenu en série.

Titres

  • BR Candor Regular
  • BR Candor Medium
  • BR Candor Bold

Obtenez minimum 50 000 € grâce au Prêt60.

Textes

  • BR Candor Regular
  • BR Candor Medium
  • BR Candor Bold

Restez chez vous, sans mensualité à rembourser.

BR Candor, en titres et en texte courant.

Typographie

BR Candor

Graisses

  • Regular400
  • Medium500
  • Bold700

Échelle

  • Obtenez minimum 50 000 € grâce au Prêt60H1 / 48 px / Bold
  • Le Prêt Viager Hypothécaire, une solution sûre et facileH2 / 42 px / Bold
  • Zéro mensualitéH3 / 28 px / Bold
  • Arrago accompagne les seniors propriétaires à libérer la valeur de leur logement pour financer leurs envies.Corps / 16 px / Regular
  • Bleu nuit#252F60Textes, sections sombres
  • Bleu ciel#93E7FFBoutons, fonds clairs
  • Bleu#3EB4E5Accents, pictogrammes
  • Orange#F9B450Boutons d’appel
  • Bleu pâle#ECF7FCFonds alternés
  • Gris#5C6077Textes secondaires

Boutons

Je demande ma simulationSimuler mon prêtÊtre rappelé

Étiquettes et questions

GratuitSans engagement5 minutes
  1. Puis-je choisir moi-même le montant du prêt ?
  2. Vais-je payer des intérêts sur mon prêt ?
  3. Combien de temps prend l’ensemble des démarches ?
Le design system du site : typographie, échelle, couleurs, boutons et composants.

04Design d’interface

Rédaction

Les textes sont écrits pour un public senior. Des phrases courtes, un vocabulaire de tous les jours, et chaque terme technique expliqué la première fois qu’il apparaît (« prêt viager hypothécaire » n’est une évidence pour personne). Le ton rassure sans infantiliser.

Premier écran de la simulation rapide : la promesse de 50 000 € minimum à gauche, le formulaire de simulation à droite, sur fond bleu nuit.
La simulation rapide : la promesse et le formulaire, dès le premier écran.
Page Comparateur du site Arrago sur un écran posé dans une étagère en métal, sur fond sombre.
Le comparateur : le prêt viager hypothécaire face aux autres solutions.
Section « Comment obtenir un prêt viager hypothécaire ? » de l’accueil, sur fond bleu ciel, puis un exemple chiffré.
Section « Le Prêt Viager Hypothécaire, une solution sûre et facile » : 4 avantages en cartes.
Comment obtenir le prêt, et ses 4 avantages.
Section des avis de l’accueil : « Déjà +500 clients convaincus », 4 témoignages avec photo, sur fond bleu nuit.
Les avis clients, avec un visage pour chacun.
Tableau « Le PVH vs les autres solutions de financement » de la simulation rapide.
Le prêt viager hypothécaire face au viager et à la nue-propriété, en tableau.
Questions fréquentes de l’accueil, puis le pied de page.
Page Prêt viager hypothécaire : le titre, le sommaire et le début du guide.
Les questions fréquentes, et un guide avec son sommaire.

05Design d’interface

Version mobile

Le design a été pensé d’abord pour l’ordinateur, à rebours de l’habitude qui veut que l’on commence par le mobile. La version mobile reprend la même structure, et le simulateur y garde ses 2 temps.

3 iPhone 17 sur le bleu pâle d’Arrago : la simulation rapide, les témoignages et la mission.
La simulation rapide, les témoignages et la mission, sur mobile.
Page L’équipe du site Arrago sur un iPhone tenu à deux mains.
La page L’équipe, en main.

06Développement Webflow

Développement web

Arrago avait sa propre équipe pour le développement. Les maquettes Figma ont donc été livrées avec une passation complète, composants et comportements sur mobile compris, pour qu’elle monte le site dans Webflow sans dépendre de nous.

Guides, ressources, articles de blog. La stratégie de contenu a été mise en place avec l’équipe d’Arrago, sur les gabarits que nous avons conçus. C’est elle qui porte le trafic du site, mois après mois.

Guide « Comment emprunter après 75 ans » du site Arrago.
Guide « Donation après 70 ans » du site Arrago.
Guide « Hypothéquer sa maison » du site Arrago.
Emprunter après 75 ans, donation après 70 ans, hypothéquer sa maison. 3 guides, un seul gabarit.
Page Blog du site Arrago : les filtres, puis la grille des articles.
Gabarit des articles : « Acheter un bateau à la retraite », avec son auteur et son sommaire.
Le blog, puis le gabarit de ses articles.
Page L’équipe du site Arrago.
Page Comparateur du site Arrago.
Page Questions fréquentes du site Arrago.
Page Témoignages du site Arrago.
Page Notre mission du site Arrago.
Page Blog du site Arrago.

Résultats

Un site que l’équipe fait grandir

146
pages publiées par l’équipe, sur les gabarits du studio.
50 000
visites par mois, guides et simulateur compris.

Le simulateur en 2 étapes qualifie les demandes. Les gabarits permettent à l’équipe d’Arrago de publier guides, ressources et articles sans toucher au design.

Ce qu’en dit le client

« Un spécialiste qui prend le temps d’écouter et comprendre les demandes de sa clientèle, ce qui est plutôt rare aujourd’hui. »

Teddy HerbautCMO, Arrago

Chaque étape de ce projet correspond à une expertise du studio.

Voir les expertises

Nos autres projets

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