Structure meets simplicity
A.B.E. Mauritius is a trusted name in waterproofing and construction products, supplying both professionals and large-scale projects across the island. But their previous digital presence didn’t reflect that authority. The objective was clear: build a site that made it easy to explore their catalogue, download technical documentation, and establish a strong local footprint for the brand online.
The project was brought in by HeadQu4rters and executed through Fourlines Design Studio. Xavier handled the initial design, and I led the development, with additional input on UX structure where it mattered most.
Products that flex, content that connects
From the beginning, this wasn’t just a brochure site. It had to be a practical tool, for site engineers, architects, and procurement officers who needed to find the right solution fast.
The main focus was building a structured product catalogue. I developed everything using JetEngine and JetFilters, paired with Elementor Pro to handle the layout flexibility. Each product was housed in a Custom Post Type, with detailed fields for specs, use cases, and categories. I also built in filtering by product category, application type, and more, making it simple for visitors to navigate directly to what they need.
Downloads that scale with ease
One of the most important sections was the Download Centre. A.B.E. needed a space where technical and safety sheets could be uploaded, updated, and linked directly to the relevant product, without duplicating effort.
I built a dynamic download system that allows the client to upload a PDF once, assign it to a product, and have it automatically show up both in the central Downloads section and on the relevant product page. This setup made it far easier for A.B.E. to keep their documentation up to date, and ensured that users always had access to the most recent files.
Interactive learning via 3D house
One standout feature is the interactive “How-To” page, which uses a 3D model of a house with clickable hotpoints. Each hotpoint reveals which A.B.E. product is best suited for that part of the structure, whether it’s a rooftop, a foundation, or an exterior wall. Visitors can then click directly through to the product or download its technical sheet.
This feature isn’t just eye-catching, it bridges the gap between use-case and product discovery in a way that’s both intuitive and informative.
Designed for both sides of the screen
From the admin side, everything was built for ease of use. JetEngine’s backend interface allowed the A.B.E. team to manage products and documents without needing technical knowledge. On the frontend, the filters, layout, and document links delivered a clean and fast experience for users.
And because the site needed to support B2B audiences, load times, mobile responsiveness, and UX clarity were non-negotiable. Everything was optimised to perform reliably under real-world use cases.
Client feedback
The response from A.B.E. was extremely positive. They appreciated how easy the system was to manage internally and how much simpler it became for their users and partners to find the right products and documentation. The website became a functional hub, not just a digital business card.
It also validated how technical content doesn’t have to feel overwhelming when it’s structured right. With the right logic, the right tools, and just enough design finesse, you can make a complex product line feel effortless to explore.
For me, this project wasn’t about flashy animations or trendy layouts. It was about utility, trust, and precision, and I’m proud of what we built.