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
Animations powered by GSAP, ScrollTrigger and Rellax JS
Lottie animations used to enhance engagement
What we did
Upon receiving design prototypes from the client in Figma, we conducted a collaborative session to gain deeper insights into their internal website management procedures. Armed with this understanding, we crafted a dynamic backend interface featuring drag-and-drop functionality and customizable modules, empowering them to effortlessly construct pages post handover of the website.
In addition, we meticulously developed the frontend of the website, integrating captivating on-scroll animations, including parallax effects known to enhance user engagement significantly. This implementation was pivotal, aligning with the website’s primary objective of boosting conversion rates.
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, ScrollTrigger & Rellax JS used for on page scroll and parallax animations
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
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, we capitalized on HubSpot’s flexible column design to develop drag-and-drop templates, significantly streamlining the process. Each custom module was meticulously crafted with neatly organized fields and tooltips, providing intuitive guidance to website managers.
We 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.