Étude de cas - FindLeads

Catégories :

• Design
• Development
• Performance
• Astro
• TailWind
• TypeScript

Introduction

FindLeads est une startup SaaS basée en Belgique qui a créé un outil de génération de leads pour les agences web. La société cherchait à réorganiser son site web pour mieux refléter l’identité de sa marque et améliorer l’expérience utilisateur. Montagne Noire Web Studio a été sélectionné pour entreprendre une refonte complète et un redéveloppement, transformant la page d’accueil de FindLeads pour qu’elle soit moderne, accessible et conviviale.

Défis

• Responsive: l’ancien site web n’était pas parfaitement adapté aux mobiles. Certaines sections présentaient des débordements (c’est-à-dire que le contenu dépassait de l’écran et n’était pas entièrement visible), ce qui rendait l’accès à l’information difficile pour les utilisateurs à partir de leur téléphone portable.
• Un nouveau design : avec une couleur primaire marron, un espacement incohérent et un logo, certes très mignon, mais qui ne reflétait pas vraiment le concept de l’outil, le design précédent pouvait être amélioré.
• Meilleurs scores Lighthouse : le site précédent était techniquement solide et bien conçu. Cependant, certains problèmes d’accessibilité et d’optimisation ont été découverts lors de notre audit initial.

Notre approche

Ce projet a été abordé d’une manière inhabituelle. D’un point de vue technique, à la demande du client, nous avons décidé de ne pas utiliser le CSS vanille, mais plutôt d’opter pour TailWind CSS, un framework CSS axé sur l’utilisation de classes utilitaires plutôt que sur les déclarations CSS, pour construire l’interface utilisateur. Cela nous a permis de donner au site web une « style SaaS » typique. Nous avons également utilisé TypeScript pour assurer la sécurité des types et améliorer l’expérience du développeur. Enfin, la fiche de spécifications du client nécessitait de l’interactivité et des animations, nous avons donc utilisé deux bibliothèques JS pour cela : Swiper and AOS.

À part ces deux contraintes techniques, le client nous a donné carte blanche pour laisser libre cours à notre créativité ! Nous avons donc mis en route notre framework de choix, Astro, étudié les styles de plusieurs concurrents, sélectionné de belles couleurs bien flashy et nous sommes lancés dans la conception de la nouvelle page d’accueil de FindLeads

Résultats

La refonte du site web de FindLeads offre désormais une expérience moderne et conviviale qui communique efficacement la valeur du produit. Voici les principaux résultats :

• Rafraîchissement de l’identité de marque : Nous avons remplacé le logo du chien de style bande dessinée par une icône de lunette de visée précise, créant ainsi une métaphore visuelle qui représente mieux la précision de l’outil dans la génération de prospects.
• Évolution de la palette de couleurs : Introduction d’une palette de couleurs dynamique avec des accents de vert fluo, mise en œuvre avec des options de mode sombre et clair pour améliorer l’attrait visuel et la préférence de l’utilisateur.
• Conception interactive : Ajout d’effets modérés d’animation lors du défilement (librairie AOS) afin de créer une expérience de navigation plus attrayante et dynamique sans toutefois submerger l’utilisateur.
• Mise en page réactive : Élimination complète des problèmes de débordement sur mobile en corrigeant les mises en page défectueuses, afin que le contenu s’affiche proprement sur tous les types d’appareils.
• Optimisation des performances : Obtention d’un score parfait de 100 dans toutes les catégories d’audit Lighthouse, en s’attaquant à la taille des ressources et aux temps de chargement, ainsi qu’aux problèmes d’accessibilité causés par des taux de contraste inférieurs aux normes.

La refonte du site web de FindLeads par Montagne Noire Web Studio illustre comment un bon design web moderne peut complètement transformer un site web.

En nous concentrant sur l’identité de la marque, l’expérience utilisateur et l’optimisation des performances, nous avons fourni une solution moderne et attrayante qui communique efficacement la valeur de l’outil de génération de leads de FindLeads pour les entrepreneurs modernes.