Innit Audio
A premium gaming audio software delivering revolutionary 3D soundscapes, enhancing immersion and realism across all headsets.
00 { Cover Image }
Challenge
Innit Audio needed to effectively market their revolutionary gaming audio software through targeted landing pages. The goal was to create multiple versions for A/B testing, along with custom landing pages for an influencer campaign. Each influencer's landing page required unique tracking to capture sign-ups and attribute conversions accurately. Innit also sought seamless integration with HubSpot for lead management, and they wanted to track conversions using Meta conversions API.
Solution
We developed four distinct landing pages using Framer for A/B testing. For the influencer campaign, we created custom landing pages that dynamically adjusted content based on UTM parameters, enabling precise tracking of sign-ups and influencer attribution. We integrated HubSpot for seamless data collection and utilized the Meta Conversion API to monitor clicks, conversions, and analytics. This approach allowed Innit to optimize their marketing strategies with detailed insights and improved performance tracking.
Overview
This project expanded Innit Audio's marketing capabilities by creating a suite of landing pages, including four versions for A/B testing and custom influencer pages. Each page was designed to optimize engagement and conversion tracking, leveraging advanced integration with HubSpot and analytics tools. The result was a more dynamic and data-driven approach to promoting Innit's revolutionary gaming audio software.
Research & Design
To maintain brand consistency, we conducted a detailed review of Innit Audio's main site, focusing on their established design language, graphics, and brand guidelines. The designs provided by Innit in Figma were analyzed and refined to ensure a smooth transition into Framer while staying true to the original aesthetic.
Design Vision & Requirements
The client aimed to create landing pages that mirrored the sleek, modern design of their main site. They emphasized the need for cohesive visuals, utilizing the same graphics and branding elements to ensure a unified look across all platforms.
Key Visual Elements
Using Framer, we implemented the refined designs with precision, integrating responsive layouts and custom code to maintain consistency. The landing pages featured seamless transitions and dynamic content adjustments, creating a visually cohesive and engaging user experience.
Typeface | PP Neue Montreal
PP Neue Montreal was chosen to maintain a clean, modern aesthetic that aligns with Innit Audio’s established visual identity. This typeface offers versatility and clarity, ensuring that content remains readable across all digital platforms while complementing the overall design language.
Development Process
Planning: We began by thoroughly reviewing the Figma designs provided by Innit Audio, ensuring a deep understanding of their brand guidelines and user flow. This step involved assessing the best ways to translate the design into Framer while maintaining visual consistency.
Building: Utilizing Framer, we transformed the designs into interactive landing pages. Custom code components were developed to handle UTM parameter-driven content changes, and we integrated HubSpot for seamless form submission tracking.
Testing: Rigorous usability testing was conducted to ensure the landing pages performed smoothly across all devices and accurately tracked user interactions.
Refinement: Based on testing feedback, we fine-tuned visual elements, interactions, and responsiveness, ensuring that each page met Innit Audio’s high standards for quality and user experience.
Framer Project Overview
Below are some screenshots from our Framer project, showcasing the pages, breakpoints, smart components, interactive elements, and code overrides we developed for this site.
Prototypes |
Visual Presentation
Below is a visual presentation, featuring images and videos that highlight the design, interactive elements, and overall functionality of Innit's website.
01 { Video }
02 { Image }
03 { Image }
04 { Image }
05 { Image }
06 { Video }
07 { Image }
08 { Image }
09 { Image }
10 { Image }
11 { Image }
12 { Image }
Final Solution
The Innit Audio landing pages showcase the brand's innovation, blending sleek design with advanced technology. The project leveraged Framer to create dynamic, personalized experiences with seamless UTM parameter integration and responsive design, all while maintaining the brand's aesthetic integrity.
Key Features
Personalized Content: UTM-driven content changes for precise influencer tracking.
Seamless Integration: HubSpot and Meta Conversion API for advanced analytics and lead management.
Responsive Design: Optimized for flawless performance across all devices.
Brand Consistency: Adhered to Innit’s brand guidelines to maintain visual and functional integrity.
Results & Impact
Since the launch, Innit Audio has seen a marked increase in user engagement and conversion rates. The A/B tested landing pages provided valuable insights, allowing for data-driven optimizations. The custom influencer pages successfully tracked and attributed sign-ups, contributing to the campaign’s success. Innit Audio praised the project’s execution, highlighting the enhanced user experience and the strategic advantage gained from the advanced analytics and tracking capabilities.
The Innit Audio project demonstrates how the combination of innovative design and advanced development can significantly enhance digital marketing efforts, driving both engagement and measurable results.
{ Other projects }
