Challenge

Vision Gazon, a premium lawn care business, approached BrandVM, one of Canada's most well-known web design and branding agencies, to help automate their customer quoting process. Instead of relying on manual quotes, they wanted an easy-to-use web application that would allow their customers to draw out the exact area of their lawn on a map and get an instant, accurate quote. The challenge was to implement this feature on their website using precise area calculations, address validation for customers within Quebec, and integrate their CRM (Go High Level) to capture leads from potential customers who didn’t complete their purchase.

We collaborated closely with BrandVM to turn their custom Figma designs into a functioning, scalable web application. The project involved building an intuitive, map-based quoting system while handling complex back-end integrations and ensuring smooth customer data flow between the app and Vision Gazon’s CRM.

Solution

To meet Vision Gazon’s needs, Bloorsoft developed a custom solution focused on user experience and automation.

Mapbox.js for Area Calculation:The core functionality of the application was allowing users to calculate the area of their lawn by drawing polygons on an interactive map. We integrated Mapbox.js to handle the mapping functionality and built a custom feature that let users easily draw, edit, and calculate areas directly on the map. Users could try this out for free on the website, providing them with a highly engaging and intuitive quoting tool. The real-time feedback from the map allowed users to instantly see their quoted price as they mapped out their property.

Google Maps API for Address Validation:To ensure Vision Gazon was only quoting customers within their service area in Quebec, we integrated the Google Maps API for address validation. Users could search their address, and we built a verification layer to ensure only customers within Quebec could proceed with the quoting process. This ensured that Vision Gazon’s service team only received leads from eligible customers.

Fully Custom UI:BrandVM provided a custom UI design in Figma, which we brought to life using React and Tailwind CSS. The design focused on simplicity and user-friendliness, ensuring the entire quoting process was seamless. Our use of React ensured the app was highly responsive and interactive, while Tailwind CSS allowed us to rapidly implement the designs with clean, maintainable code.

Go High Level API Integration for Lead Capture:In addition to the quoting system, Vision Gazon wanted to capture leads for customers who didn’t complete their purchase. We integrated with Go High Level, a CRM platform that would track customer interactions. This part of the integration was particularly complex due to the OAuth 2.0 authorization system Go High Level used, which required tokens to be refreshed daily.

To handle this, we set up a batch job on the server to consistently refresh the OAuth tokens. This ensured the connection to the CRM remained active and that customer data (such as partially completed quotes) was sent to Go High Level in real-time, allowing Vision Gazon to follow up with potential customers and increase conversion rates. The automated process captured customer data without any manual intervention, enhancing their marketing and customer retention efforts.

Custom Backend Infrastructure:We built the back-end using Node.js and Express, hosting the UI on Netlify and the back-end server on Fly.io. This architecture provided a scalable, efficient solution that allowed for smooth performance, even as traffic increased. The back-end was designed to securely handle customer data and API interactions, ensuring reliability and security across the board.

Results

The automated quoting system we built for Vision Gazon transformed their quoting process, providing both customers and the business with significant benefits.

Instant Quotes for Customers: The new system allowed customers to get accurate quotes in real-time by drawing polygons on the map, providing a level of convenience that drastically improved the user experience. Customers were able to visualize their service area and immediately see pricing, which led to more engagement with the website.

Lead Capture and Improved Conversions: By integrating Go High Level and setting up the OAuth token refresh system, Vision Gazon was able to capture leads from customers who didn’t complete the quoting process. This allowed them to follow up with potential customers and significantly improved conversion rates.

Optimized for Quebec Customers: With the Google Maps API integration, Vision Gazon’s quoting system only processed addresses within their service area, ensuring that leads were relevant and actionable.

Collaborative Success: Our close collaboration with BrandVM resulted in a product that not only looked stunning but also worked flawlessly. BrandVM’s design expertise combined with our technical implementation created a seamless solution that enhanced Vision Gazon’s ability to provide premium lawn care services.

Why Choose Bloorsoft?

The Vision Gazon project showcases Bloorsoft’s ability to handle complex integrations, build interactive features, and create smooth, user-friendly web applications. By combining advanced technologies like Mapbox.js, Google Maps API, and OAuth 2.0, we built a system that automated tedious processes while delivering a superior user experience.

Startups and businesses looking to build interactive web apps or automate key processes can trust Bloorsoft to deliver. We don’t just focus on technical execution; we focus on solutions that drive business results. From lead capture to customer retention, our custom-built systems empower businesses to operate more efficiently and scale effectively.

With our expertise in complex integrations and user-centered design, Bloorsoft is the ideal partner for businesses ready to transform their digital presence.

‍