.gif)
Welcome to Mr. Black
With just 4 weeks to deliver, The Espresso Martini Festival, sponsored by Mr. Black Coffee Liqueur, tasked HLabs with an ambitious challenge: to create a fully interactive, branded content page that highlighted over 100 locations across the US where festival-goers could sample espresso martinis. The clients wanted a 3D animated map that would not only be aesthetically pleasing but also functional and dynamic.
Services
Illustration
Web Design
Webflow Build
Mapbox
HLabs thrives on complex challenges, and this project was no exception. Our multidisciplinary team brought together the perfect balance of design, UX, strategy, and Webflow development to bring the interactive map to life.
By integrating Mapbox GL JS with Webflow, we created a sleek, fast-loading 3D map capable of handling custom data at scale. The map’s powerful rendering capabilities allowed us to add over 100 precise locations, each marked with engaging interaction points, all while keeping the performance top-notch.
Collaboration was the cornerstone of this project. Weekly calls with Time Out, shared Google Docs, and live prototyping allowed for quick decision-making and adaptability. When we encountered a limitation with Webflow’s code base, we quickly pivoted by optimising the map’s pins to ensure smooth performance.
To streamline the process further, a shared Google matrix was used to batch-upload location data, keeping everything efficient and error-free.
“This project allowed us to develop a more thorough process for seamlessly integrating Mapbox into a design piece to ensure a more efficient workflow.” — Lara, HLabs’ Senior Designer
In just four weeks, HLabs delivered a 100-pin interactive 3D map that exceeded expectations. The result? The first interactive map for Time Out, which not only enhanced audience engagement but also opened doors for larger business opportunities, including a significant social activation for Coca-Cola. The integration of Webflow and Mapbox also had an unexpected upside — it improved SEO, drawing attention from other publishers and designers, and paved the way for future branded content products.
This project exemplifies HLabs’ strengths in blending creativity with cutting-edge tech, problem-solving with agility, and collaborating across teams to deliver high-quality, impactful solutions. With this success under our belt, we’ve set the standard for interactive mapping experiences, and we’re excited to continue pushing the boundaries of what’s possible.
