Product Enhancements

The Modular Ad Unit is a highly customized sponsored content widget that is ad served across the Federated Media network. The product is built with a Javascript and HTML/CSS front-end and integrated with the client’s existing Rails back-end ad server.

View more Product Enhancements

The Problem

Federated Media wanted to create a highly-customizable ad unit that would appear native on 400+ different websites and respond effortlessly across desktop and mobile devices. Previous ads on their platform were either very static or used Flash, both of which they wanted to improve.

Our Solution

fmmau-desktop
Native ads inherit a site’s style

 

Our design solution was to create a modular product that would allow our client to customize each unit to a sponsor’s unique needs. We built modules for Google Maps, Youtube video player, the proprietary Federated Media video player, Instagram slideshow, a Twitter module, and sponsored blog posts. These modules are clickable in the right rail on a desktop, and tap and swipe optimized in-line for touch devices.

The Process

fmmau-mobile
Mobile touch/swipe sensitivity

Despite being a product enhancement, Federated Media gave us the opportunity to wipe the slate clean with how advertisements are displayed on the web and, in many ways, we built this ad unit from scratch.

We took a product-centric approach, thinking of the ad unit as an experience that would be complementary to the content it’s supporting. With that in mind, our goal was to give brands the flexibility to use only the modules they needed, while making a clean and strong visual connection between the host site and the sponsor.

Discovery – Exploring scalable and adaptable technologies was a big part of this project. We looked at many of the 400+ site where the ad would be featured, and worked to find visual similarities that we could focus the experience around. Additionally, we kept a clear focus on being able to build functionality that could inherit the styles of the site the ad was embedded on, while still being ad-served.

Definition – This project required us to balance carefully between making a great user experience and solve the sponsor’s business challenge. Alongside the client, we decided to build modules to best compliment their advertisers, who are primarily in the retail, automotive, and entertainment industries.

Development – We began by creating a responsive ad unit that inherits the styles of the parent document from within an iframe, which simulates a native interaction in tune with the rest of a website. From there, we created modules that would be added, removed, and customized to advertisers, and which provide full control over catering content toward a specific audience.

Deployment – While the project was still fundamentally a product enhancement, we were tasked with learning the current platform structure and integrating the ad unit into the product suite. We worked closely with Federated Media’s engineering team to fully integrate the native ad unit into their current media management platform and analytics tracking.