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.
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
01
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.
02
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.
03
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
01Audit et wireframing
02Identité de marque
03Design et gabarits
04Rédaction
05Version mobile
06Développement web
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
Le prêt3
Prêt viager hypothécaire
Nos solutions
Questions fréquentes
Guides86
Guide× 86
Simuler4
Simulateur
Simulation rapide
Comparateur
Rente viagère
Arrago10
L’équipe
Notre mission
Presse
Témoignages
Témoignage× 3
Contact
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.
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.
symboleArrago
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.
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
Puis-je choisir moi-même le montant du prêt ?
Vais-je payer des intérêts sur mon prêt ?
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.
La simulation rapide : la promesse et le formulaire, dès le premier écran.
Le comparateur : le prêt viager hypothécaire face aux autres solutions.
Comment obtenir le prêt, et ses 4 avantages.
Les avis clients, avec un visage pour chacun.
Le prêt viager hypothécaire face au viager et à la nue-propriété, en tableau.
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.
La simulation rapide, les témoignages et la mission, sur mobile.
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.
Emprunter après 75 ans, donation après 70 ans, hypothéquer sa maison. 3 guides, un seul gabarit.
Le blog, puis le gabarit de ses articles.
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.
Nos expertises : stratégie, UX, CRO, branding, UI, développement web, SEO.
StratégieUXCROBrandingUIDéveloppement webSEO
StratégieUXCROBrandingUIDéveloppement webSEO
Cookies
Avec votre accord, nous utilisons des cookies de mesure d’audience pour comprendre comment le site est consulté et l’améliorer. Refuser n’empêche pas la navigation. En savoir plus