.gif)
TimeOut x Pepsi integrate Webflow x Mapbox to take branded maps to a new level
TimeOut came to us for the third time with a challenge: build them another map, only bigger, smarter, and packed with features that turned hundreds of city spots into something people actually wanted to explore online. The catch? It had to be a custom Mapbox experience fully powered by Webflow CMS.
Services
Here’s what we delivered (and then some):
- Dynamic pins + popups pulling in content seamlessly.
- A branded animated loader (because waiting shouldn’t be boring).
- Smart filters + city zooms to make exploring effortless.
- Performance across every device - all under a tight deadline.
And just when we thought we had it all covered, the client dropped in a new request: category-based filters. Challenge accepted!
We started by designing the map experience itself—styling Mapbox, sketching pins, and planning how popups and filters would flow. From there, the dev team got to work layering in logic and CMS data. Our toolkit looked like this:
- Webflow CMS – for scalable, client-friendly content management.
- Mapbox – the geospatial backbone of the map.
- Finsweet CMS Load – the hero that let us go beyond 100 pins.
- Custom modular JavaScript – built in CodeSandbox and embedded in Webflow for maximum flexibility.
- Rive + SVGator – to give pins and loaders that animated, on-brand polish.
The creative direction took a bold cue from Pepsi’s electrifying color palette, giving the map a vibrant, high-energy look that matched the campaign. We balanced that with a dark mode UI and neon-like iconography—perfect for inspiring a fun night out. At the same time, the interface remained user-friendly and simple to navigate, so audiences could explore without friction.We worked in short, iterative sprints, sharing previews with the client at every stage so tweaks (like late-game filter requests) could be slotted in without derailing the build. The design and dev teams tag-teamed: one focused on visuals and interactions, the other on logic and performance. QA kept everything smooth across devices and breakpoints.
"This project showcased HLabs' ability to blend design precision with technical scalability.." - Sameer, Hlabs' Creative Technologist
The result? A fully functional, interactive map that made exploring hundreds of pins intuitive, fast, and on-brand—complete with category filters, city zooms, Pepsi-inspired styling, and engagement tracking via Google Tag Manager.But it was more than just a smooth launch:
- It cemented our role as a trusted partner (this was our third—actually, fourth—Mapbox x Webflow build with the client).
- It pushed us to stretch Webflow further than ever, using Finsweet and modular JavaScript to go beyond platform limits.
- It reminded us to design with flexibility baked in, so late-stage curveballs like filters can be handled without breaking the flow.
- It gave us a repeatable, future-proof framework to speed up future Mapbox builds for other clients.
In short: this project was HLabs in a nutshell. Precision design, Pepsi-charged creativity, technical problem-solving, and the ability to turn complex requests into clean, intuitive storytelling experiences. We don’t just plot points on a map—we create maps worth exploring.
