HubSpot

Peru Consulting

A lead generation website for IT consultants, built in HubSpot.

What I Did

I audited the existing site using insights from Google Analytics and HotJar to improve lead generation. With this data, I created wireframes and page designs in Adobe XD, which guided the frontend development. I built a fully accessible frontend and crafted a flexible HubSpot backend with custom modules and templates for easy marketing use. From the receipt of the initial website design to the completion of the build, the entire process spanned just three weeks.

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
Keyboard accessible and fully ADA compliant, addressing gaps in the previous site.
Scored 90+ in performance/accessibility and 100 in best practices

Tech Stack

Languages:

HTML5
HuBL
CSS/SCSS
JavaScript (ES6)

DevTools:

GitHub
HubSpot CLI
Gulp

Libraries:

Bootstrap 5
GSAP
ScrollTrigger
Glide JS

Design Tools Used:

Adobe XD

Third Party Tools Used:

HotJar
Google Analytics
Google Search Console
Semrush

Front-End Development

Peru Consulting pages on desktop and mobile

Technologies & Practises Used

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

Let's Talk

GSAP Animations

Utilised GSAP and ScrollTrigger for smooth, on-page scroll animations, entirely in vanilla JavaScript.

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.

UX-Driven Blog Navigation

Enhanced WordPress blog browsing with a custom AJAX pagination system for improved user experience

Key Results

17%

100%

Back-End Development

Constructing a Robust and Agile Backend Framework

One of our foundational principles is to develop solutions that are self-sufficient post handover, minimising the need for ongoing developer maintenance or management. This resonated strongly with the client, leading to the creation of a highly flexible backend system.

I utilised HubSpot’s flexible columns to design drag-and-drop templates, facilitating ease of use. Each custom module was meticulously created, featuring neatly organised fields with tooltips, offering intuitive guidance to whoever manages the system.

Enquire Now