Lumi Global
At a glance
Fully flexible backend setup with drag-and-drop modules
Optimized for all devices: mobile, tablets, desktops, and extra-large screens
No coding knowledge needed for effortless backend and site management
Site imagery optimized using Google-recommended WebP format for enhanced web performance
Customized on-page interactions tailored to amplify the website's goal of boosting lead generation
Animations powered by GSAP and ScrollTrigger
Fully compliant with both Google and ADA (Americans with Disabilities Act) accessibility standards
What we did
We conducted a collaborative audit of the existing site, leveraging insights from Google Analytics and HotJar to analyze visitor behavior. Our aim was to gain a deeper understanding of how to enhance the website’s core objective: improving lead generation.
Armed with this knowledge, data-driven wireframes and page designs using Adobe XD were created. These designs laid the foundation for our frontend development efforts.
We meticulously constructed the frontend of the website, prioritizing full compliance with accessibility standards. Simultaneously, we engineered a highly adaptable backend system within HubSpot. This involved the implementation of custom modules and flexible templates, tailored to ensure user-friendliness for marketers.
From the receipt of the initial website design to the completion of the build, the entire process spanned just three weeks.
Front end development
Technologies and practises used
Site developed locally using HubSpot CLI
Bootstrap 5 served as the responsive framework
Enhanced HubSpot's native blog browsing with a custom AJAX pagination system for improved user experience
Enhanced development efficiency achieved by leveraging HubSpot Macros
GSAP and ScrollTrigger used for on page scroll animations (100% vanilla JavaScript implementation)
Implemented lazy loading for images to optimize performance, resulting in a homepage file size of only 4.4MB
Isotope.js leveraged for dynamic on-page filtering, empowering visitors to easily locate consultants by name
Codebase employs modular design with SCSS and JS integrated into blocks for streamlined site maintenance and scalability
Implemented BEM markup to effortlessly achieve reusability and scalability
Backend development
Constructing a robust and agile backend framework
One of our foundational principles is to develop solutions that are self-sufficient post handover, minimizing the need for ongoing developer maintenance or management. This resonated strongly with the client, leading to the creation of a highly flexible backend system.
We utilized HubSpot’s flexible columns to design drag-and-drop templates, facilitating ease of use. Each custom module was meticulously crafted, featuring neatly organized fields with tooltips, offering intuitive guidance to whoever manages the system.