Introduction
AllGearDigital is a media network renowned for reaching outdoor adventure enthusiasts through its top publications, including GearJunkie, The Inertia, PackHacker, and Bikerumour. When AllGearDigital wanted to showcase a special campaign for the KEEN brand, they needed a more dynamic way to build a custom microsite—one that would break free from the limitations of their current platform. That’s where MN Studio came in, proposing Webflow as a solution to deliver the flexibility and interactive capabilities the project required.
In this case study, you’ll see how we combined creative storytelling with custom development to build an engaging microsite for KEEN, hosted on GearJunkie. We’ll explore why transitioning to Webflow unlocked new possibilities for AllGearDigital, who subsequently tapped MN Studio’s expertise as both a Webflow Developer and Webflow Website Developer to bring their ideas to life.
You can view the final microsite here on GearJunkie.com.
The Challenge
Moving Away From a Restrictive Platform
Before reaching out to MN Studio, AllGearDigital had been using an incumbent microsite creation tool that imposed strict limitations. They needed to publish visually rich, content-heavy campaigns for advertisers, but found the old setup too rigid. Adding custom animations, embedding interactive elements, or even tweaking layouts became complicated and time-consuming.
With KEEN’s newest line of hiking footwear on the horizon, AllGearDigital wanted to create an immersive experience. The concept involved highlighting 10 destinations across North America, each with unique weekend itineraries. Their existing platform, however, wasn’t up to the task, especially for building animated maps or layering complex content. They also needed a system that integrated easily with their marketing stack and could be hosted or exported without jumping through hoops.
Why Webflow Was the Right Choice
MN Studio introduced Webflow as an alternative that would grant AllGearDigital the creative freedom they needed. Webflow’s no-code/low-code nature allows for both design flexibility and robust custom development through HTML, CSS, and JavaScript. Key benefits included:
- Design Freedom: Layouts can be fully customized, without being locked into templates.
- Custom Code Integration: Advanced features—like animations, interactive maps, and data visualizations—can be integrated via code embeds.
- Export & Hosting Options: Users can host microsites on Webflow or export the code to merge with their existing infrastructure.
Having experienced the frustration of a constrained tool, the AllGearDigital team was enthusiastic about a platform that accommodated small-scale projects, large-scale interactive campaigns, and everything in between.
Project Approach
Collaboration with Hybrid Studio
From the outset, there was a strong vision for this microsite, thanks to design input from Hybrid Studio. The plan centered on an interactive map that would present 10 noteworthy destinations in North America. Each destination had its own detailed weekend itinerary, showcasing videos, articles, and images related to local activities—all themed around using KEEN’s hiking footwear.
Once the design framework was laid out, MN Studio stepped in as the Webflow Developer to handle complex development tasks. The project demanded more than standard Webflow features, especially for the dynamic map functionality. Our role was to integrate the design with custom code, ensuring each interactive element delivered a smooth, exciting user journey.
Using Mapbox, GSAP, and JS for Interactive Elements
The core of the site was an interactive map built with Mapbox. We started with a broad view of North America that displayed 10 custom markers—each representing one of the featured weekend itineraries. Visitors could click on any marker to zoom in and reveal the specific waypoints of that location. Depending on the destination, there could be five to ten stops, each with unique content.
Key Technologies Used
- Mapbox: Provided an embeddable base map and customizable markers.
- GSAP (GreenSock Animation Platform): Powered smooth transitions and animated elements, adding a lively, attention-grabbing flair.
- JavaScript: Allowed us to tie the interactive events together, controlling how and when content appeared or disappeared.
This combination made it possible to orchestrate map views, pop-ups, and content reveals exactly as Hybrid Studio’s design team envisioned. The result was an engaging experience that effectively guided users through each destination’s highlights.
Building the KEEN-Branded Experience
Integrating Product Highlights
KEEN’s premium hiking footwear was featured prominently, but in a context that offered real value to readers. Instead of a straightforward product page, the microsite showcased footwear in action—on real trails, in different climates, and during various weekend getaways. We created a product carousel highlighting KEEN’s different models, mapping them to trip activities like day hikes, river walks, or casual city explorations.
We used Webflow’s CMS capabilities and custom code embeds to maintain a consistent theme while also ensuring ease of updates. This means that as new shoe models or marketing assets become available, it’s relatively simple to switch out images or text without overhauling the entire site.
Telling a Story
The site wasn’t just about data points or product images. Each itinerary featured a narrative, complete with local secrets and fun facts, giving viewers a sense of personal connection. We integrated videos of hikers using KEEN gear in scenic spots, sprinkled in short articles about must-see places, and used high-quality images to bring each location to life. By weaving in brand highlights naturally, visitors felt less like they were being “sold to” and more like they were planning their next adventure.
Interactive Map in Detail
Custom Animations and Seamless Navigation
When the user first arrives, the site loads to a full map of North America, inviting exploration. Each of the 10 location markers animates into place with a slight bounce or fade-in effect, encouraging clicks. Once a user selects a destination, the map gracefully zooms in, offering a closer look at the local region. Additional markers then appear to represent each point of interest in the itinerary—restaurants, hiking trails, panoramic overlooks, etc.
Content panels slide in from the side or top, thanks to GSAP-driven animations. This approach keeps the focus on exploration, letting users uncover the story at their own pace. Hover effects and clickable icons create interactivity that feels more like an immersive app than a typical webpage.
Responsive for Mobile, Tablet, and Desktop
Given that outdoor enthusiasts often browse trip ideas on the go, we wanted to ensure the microsite functioned just as smoothly on mobile. The map, interactive elements, and content sections are all optimized for various screen sizes. Whether a user is on a smartphone, tablet, or large monitor, the interactive features remain consistent, with minimal layout shifts.
A Smooth, User-Friendly Experience
We knew a high bounce rate could spoil the impact of all these efforts. To keep visitors engaged, the microsite loaded quickly, employed intuitive navigation cues, and guided users organically to KEEN’s product highlights. Having a dynamic map was an immediate draw—people wanted to see how their local region was featured, or compare different itineraries. This curiosity loop, combined with aesthetically pleasing visuals, encouraged deeper interaction.
Results and Impact
Successful Migration from a Legacy Platform
One of the biggest wins for AllGearDigital was their seamless migration away from the previous platform (Ceros). With the Webflow-powered microsite delivered by MN Studio, they could see firsthand how much more was possible in terms of creativity and functionality. The smooth animations, cohesive branding, and ease of updates convinced them that Webflow was a viable long-term solution for their network of outdoor-focused publications.
Positive Reception from KEEN, GearJunkie, and Users
The campaign launched right before the critical Thanksgiving and Black Friday season. Both KEEN and GearJunkie praised the microsite’s fast turnaround, budget-friendly approach, and polished final look. User engagement metrics—such as time on page and click-through rates—showed that visitors were indeed exploring the various itineraries and product details at length.
Setting the Standard for Future Microsites
Encouraged by these results, AllGearDigital decided to produce additional microsites with Webflow and MN Studio. They also began to migrate their own marketing landing pages, further integrating Webflow into their broader digital strategy. For a media company that spans multiple publications, this shift represented a significant step forward, demonstrating confidence in Webflow as a platform capable of scaling up for varied campaign needs.
Why Partner with MN Studio for Your Webflow Projects
MN Studio brings a unique combination of creative insight and technical prowess. We work closely with clients to understand their vision, then use the right mix of design, development, and storytelling to build digital experiences that resonate. As both a Webflow Developer and a full-service creative team, here’s how we can help:
- Custom Webflow Development
- Explore our Webflow Development Services to see how we leverage the platform’s robust features.
- We integrate custom code seamlessly to create interactive, dynamic elements beyond out-of-the-box capabilities.
- Brand-Centric Storytelling
- We understand that every campaign must align with brand objectives. By blending editorial content with engaging visuals, we turn visitors into brand advocates.
- Scalable Solutions
- Our sites are built to grow with you. As your brand, audience, or product range expands, we make it easy to update content, add new pages, or pivot the entire site structure.
- Clear Communication
- From discovery to launch, we keep lines of communication open. Check out more about how we collaborate with clients on complex projects.
- Ongoing Support
- We don’t disappear after launching your site. We’re ready to help with post-launch tweaks, optimizations, and future expansions.
Conclusion
AllGearDigital’s transformation shows that switching to Webflow can revolutionize how businesses tackle complex microsite needs, especially when custom animations, interactive maps, and media-rich storytelling are priorities. Working with MN Studio provided AllGearDigital the tools to break free from a restrictive platform, deliver an engaging KEEN campaign, and confidently plan more interactive projects in the future.
The final microsite, now live on GearJunkie, stands as a testament to how thoughtful design and expert development can blend to create an immersive user experience. Beyond the novelty, it’s backed by solid results—improved engagement, brand satisfaction, and a streamlined workflow for AllGearDigital.
If you’re looking for a Webflow Website Developer or considering how Webflow might serve your business, we’d love to help. Get in touch with MN Studio to start exploring your next digital storytelling project. Let’s make your brand’s vision a reality—together.