Case Study - FindLeads

Categories:

Design
Development
Performance
Astro
TailWind
TypeScript

Introduction

FindLeads is a Belgium-based SaaS startup that created a lead generation tool for web agencies. The company was looking to revamp its website to better reflect its brand identity and improve user experience. Montagne Noire Web Studio was selected to undertake a full redesign and redevelopment, transforming FindLeads’ homepage to be modern, accessible, and user-friendly.

Challenges

Responsiveness: the old website was not perfectly mobile-friendly. Some sections were experiencing overflow (i.e. the content was “sticking out” of the screen and not entirely visible) making it difficult for users to access information from their mobile phone.
A fresh design: using a brown primary color, inconsistent spacing and a logo, albeit very cute, but that didn’t really reflect the concept of the tool, the previous design had room for improvement.
Improved metrics: the previous site was technically sound and well-conceived. There were, however, some accessibility and optimization issues uncovered during our initial audit.

Our Approach

This project was approached in an unusual way. On the technical side of things, at the client’s request, we decided not to use vanilla CSS, but rather go with TailWind CSS, a utility-first CSS framework, to build the UI. This allowed us to give the website a typical “SaaS feel”. We also used TypeScript to ensure type safety and improve the developer experience. Finally, the client’s specs sheet required interactivity and animations, so we used two JS library for those: Swiper and AOS.

Apart from these two technical constraints, the client gave us carte blanche : free rein to our creativity! So we fired up our framework of choice, Astro, studied the styles of several competitors, selected some nice flashy colours and set about designing FindLeads’ new homepage.

Showcasing the new carousel feature

Highlight: Carousel Feature

Need

FindLeads needed a better way to showcase the key features and value propositionof their lead generation tool. The previous website made it hard for potential customers to understand how the product works and what problems it solves.

Static images and text blocks did not capture the full range of the SaaS platform’s features, which led to lower user engagement and missed conversion opportunities.

Solution

We added an auto-playing carousel using Swiper.js, designed to highlight three secondary features of the FindLeads platform. The carousel moves through different bits of UI, showing users the benefits of the tool and its philosophy.

By linking visual transitions with feature descriptions, the carousel gives users a quick overview of FindLeads’ capabilities. This approach helps visitors understand the product faster and increases the chance of converting website visitors into potential customers.

Results

The redesigned FindLeads website now provides a modern, user-friendly experience that effectively communicates the product’s value. Here are the key outcomes:

Brand Identity Refresh: We replaced the cartoon-style dog logo with a precise rifle scope sight icon, creating a visual metaphor that better represents the tool’s precision in lead generation.
Color Scheme Evolution: Introduced a dynamic color palette with neon green accents, implemented with both dark and light mode options to improve visual appeal and user preference.
Interactive Design: Added moderate Animate on Scroll (AOS) effects to create a more engaging and dynamic browsing experience without overwhelming the user.
Responsive Layout: Completely eliminated previous mobile overflow issues by fixing faulty layouts, ensuring content displays cleanly across all device types.
Performance Optimization: Achieved perfect 100 scores across all Lighthouse audit categories, addressing asset sizes and load times, as well as accessibility issues caused by sub-standard contrast ratios.

Lightmode with lime green accents

Before our redesign: uninviting pricing section

Before

After our redesign: elegant, modern design for the pricing section

After

Reimagining the Pricing Section

The original pricing section lacked visual appeal and consistency. Oversized, unresponsive layouts and inconsistent design made it difficult for potential customers to quickly understand FindLeads’ pricing tiers and value proposition.

We approached the redesign with a focus on whitespace use, color, user experience and visual hierarchy. By implementing strategic design changes, we created a more condensed and intuitive pricing presentation, where all the information is readily available in one desktop viewport size.

Design Transformations:

Resized layout: reduced unnecessary white space within the pricing cards, improving readability and visual comfort
Alignment Precision: Corrected card layout and price toggle alignment for a more symmetrical and organized appearance
Visual Depth: Replaced flat colors with subtle gradients on backgrounds and call-to-action buttons, adding sophistication to the design

The FindLeads website redesign by Montagne Noire Web Studio showcases how good, modern web design can completely transform a website. By focusing on brand identity, user experience, and performance optimization, we delivered a modern, engaging solution that effectively communicates the value of FindLeads’ lead generation tool for modern entrepreneurs.

Introduction

Challenges

Our Approach

Results

LET’S MOVE MOUNTAINS TOGETHER.