Migration du site de Finary dans Webflow

Finary est une start-up française de suivi du patrimoine. 9 mois seulement après son Seed (février 2022), Finary poursuit sa dynamique et boucle une levée de 8 millions d’euros. Découvrez pourquoi ils ont fait appel à Gemeos.
Illustration croce
Image du projet
Sommaire
Realisations
Intégration Webflow
outils utilises
Guillements illustration

"Gemeos et notamment Sandro travaillent sur l’intégration Webflow dans le cadre de la refonte de notre site web. Le but principal de ce changement : redonner la main pour la création de landing pages à l’équipe Growth, faciliter l’intégration en mettant en place une logique de composants basée sur notre design system, et enfin, travailler les enjeux webperf et SEO. Je recommande fortement Sandro notamment pour sa disponibilité, sa réactivité, sa pédagogie et enfin sa compréhension de nos enjeux business."

Florian CORTEEL
SEO Manager @Finary

Contexte

Finary ont donc décidé de faire appel à l'agence Webflow Gemeos pour migrer leur site sur Webflow pour plusieurs raisons :

  1. Gagner en agilité.
    L'équipe market/growth est maintenant autonome et peut effectuer des changements en toute autonomie.
  2. Améliorer leurs performances.
    Toutes les pages étaient implémentées en dure, non optimisé et très rigide.
  3. Libérer de la bande passante pour l'équipe Produit/Tech.
    Finis les allers/retours entre les équipes, création de ticket, QA... L'équipe Tech/Product peut maintenant se focaliser sur le produit
  4. Transformer leur identité visuelle.
    Permet de la rendre plus cohérente avec leur position de leader.
  5. Adapter le site à leur discours commercial et à leur vision
  6. Migrer tous leurs contenus éditoriaux dans un seul outil (Webflow)

Problématique

  1. Des gros enjeux SEO (architecture CMS complexe)
  2. Un niveau d'intégration complexe
  3. Multilingue
  4. Logique de composants (créer des composants facilement réutilisables par les équipes en interne)

Découpage du projet

1. Mise en place d'un style guide

La 1ère chose que nous avons réalisé est la mise en place un style guide dans Webflow. Permettant de garantir la cohérence et la stabilité du site de Finary, il reprend l’ensemble de directives visuelles et fonctionnelles afin d’établir un standard pour les éléments du site, tels que les couleurs, les typographies, les boutons, les formulaires, les icônes, etc.

Il permet également une collaboration efficace entre les membres de leur équipe, et d’assurer une cohérence dans tous ses éléments.

Style guide Finary - Webflow
Style guide Finary - Webflow
Style guide Finary - Webflow

2. Implémentation du site

2.1 Migration des pages statiques

Deadline fixée, deadline respectée. Le site a été publié à la date souhaitée en respectant évidemment les bonnes pratiques SEO et avec une attention particulière au responsive.

Nous avons commencé par développé les pages statiques du site de Finary

  • Homepage
  • Investir en crypto
    • Plateforme
    • Acheter et vendre
    • Frais
    • Revenus passifs en crypto
    • Plans d'investissements
    • Prix des cryptos
  • Solutions
    • Finary Plus
    • Finary Pro
  • Fonctionnalités
    • Budget

L'objectif étant de rapidement pouvoir migrer la vitrine du site et redonner la main à l'équipe Market/Growth pour qu'ils gagnent en agilité

2.2 Migration des contenus éditoriaux

Une fois la migration de la vitrine terminée, nous nous sommes attaqués au gros projet de refonte de leurs contenus éditoriaux :

  • Blog
  • Actualités produit
  • Changelog
  • Glossaire
  • Vidéos

Autant de contenus que de plateformes différentes...

L'objectif bien sûr étant de centraliser tout ça, de bénéficier des avantages de Webflow pour proposer une architecture 100% optimisée pour les moteurs de recherche, avec un design sur-mesure pour offrir une expérience aux petits oignons.

Opérant sur un marché très concurrentiel (la finance), nous ne pouvions pas nous contenter d'une architecture CMS classique avec peu de profondeur de page.

Afin de renforcer les cocons sémantiques autour des mots-clés business les plus pertinents et concurrentiels, nous avons construit une architecture CMS adaptée (cf : screen).

Octopus Maillage Edito

Mais également...

  • Une attention du détail particulière sur mobile pour avoir une expérience de lecture aux petits oignons
  • Des éléments HTML personnalisés pour dynamiser les articles (bannière CTA, tableau, Callout...)
  • Toutes les bonnes pratiques SXO (Sommaire, barre de progression, partage social, et bien d'autres...)

Et j'en passe...

Voici un rendu vidéo (mais le meilleur moyen de voir la qualité de l'intégration est de vous rendre directement sur le blog de FInary)

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

+50 sites webflow réalisés

Découvrez nos autres réalisations

Tous nos sites sont designés et developpés avec
Coeur rouge
Stickers projet
Image du projetIllustration hover
Découvrir
Image du projetIllustration hover
Découvrir
Image du projetIllustration hover
Découvrir
Image du projetIllustration hover
Découvrir
Voir toutes nos réalisations !
Illustration
Découvrir le site web
Nous utilisons les meilleurs outils

développés avec les meilleurs outils et les meilleures pratiques

Gemeos ne vous propose pas simplement un site web, mais une expertise sur les meilleurs outils pour vous garantir un retour sur investissement optimal. 

Figma

Pour le design de votre site web

Webflow

Pour l’intégration de votre site web

Client-first

Pour organiser vos projets

Wized

Pour ajouter des fonctionnalité à vos projets

Make

Pour l’automatisation de vos flux de travail