HubSpot

Reachdesk

A lead generation website, built in HubSpot.

What I Did

After receiving Figma design prototypes from the client, I led a collaborative session to better understand their internal website management workflows. With this insight, I developed a dynamic backend interface that included drag-and-drop functionality and customisable modules, enabling the client to easily build pages after the website handover. On the frontend, I integrated engaging on-scroll animations and parallax effects, carefully chosen to elevate user interaction. This design decision played a key role in driving conversions, aligning perfectly with the website’s primary goal.

Overview

General:

Built, tested, and deployed in 3 weeks
Optimised for all screen sizes

Backend:

Flexible, drag-and-drop backend
Code-free backend and site management

Optimisation & Accessibility:

WebP imagery optimised for performance
Compliant with Google and ADA accessibility standards

Notable Results:

Boosted traffic and leads through organic optimisation
Scored 90+ in performance/accessibility and 100 in best practices
Created custom marketing templates, boosting conversion and email open rates.
Drag-and-drop flexibility enabled for non-technical users

Tech Stack

Languages:

HTML5
HuBL
CSS/SCSS
jQuery

DevTools:

GitHub
HubSpot CLI
Gulp

Libraries:

GSAP
Bootstrap 5
Rellax JS
Waypoints JS
Isotope JS
Lottie JS

Design Tools Used:

Adobe XD
Lottie Animations

Third Party Tools Used:

HotJar
Google Analytics
Google Search Console
Semrush

Client Feedback

"Having just finished a project and launched a new website where Amit was the lead developer, I'm incredibly impressed with his capabilities and friendly personality. Not only did he develop our new website to a level exceeding expectations, but the way he managed his own team, communicated with us as a client, and being an all-round great guy to work with - it made the entire experience an absolute pleasure."

Front-End Development

Technologies & Practises Used

Tools and methods employed to drive performance, scalability, and efficiency.

Let's Talk

Performanced Based Animations

Enhanced the on-page user experience by incorporating lightweight, performance-driven animations with libraries like GSAP and Rellax JS.

Scalable & Maintainable

The codebase follows a modular design, with SCSS and JS integrated into blocks, ensuring easy maintenance and seamless scalability.

Modern Development

The site was developed locally using HubSpot CLI, enabling efficient testing and streamlined deployment.

Mobile-First Design

Bootstrap 5 was used as the responsive framework, ensuring a mobile-first design for seamless user experiences across devices.

Streamlined Development

Leveraged HubSpot Macros to boost development efficiency and reduce manual coding efforts.

Optimised Performance

Applied lazy loading to images, reducing homepage file size to just 3MB for faster load times.

Enhanced Reusability

Applied BEM markup to ensure effortless reusability and consistency across the site.

Key Results

13%

24%

Constructing a Robust and Agile Backend Framework

Given Reachdesk’s business focus, it was crucial to ensure that the backend system was user-friendly, enabling the creation of new pages and posts using predefined templates.

To achieve this, I capitalised on HubSpot’s flexible column design to develop drag-and-drop templates, significantly streamlining the process. Each custom module was created with neatly organised fields and tooltips, providing intuitive guidance to website managers.

I developed over 40 custom modules, each serving a unique purpose. Templates for each page in the architecture were meticulously created to expedite the page setup process. These templates allowed for easy editing at the page level, including adding, reordering, or removing modules, thanks to the flexibility of HubSpot’s columns.

Enquire Now