Mode Media was a company that served banner ads and specialty interactive ads on a network of lifestyle bloggers, with an app that allowed users to collect articles into editorial stories. The stories could be sponsored by advertisers, and those branded stories would be distributed over the blogger network for brand awareness.
There are two types of Mode Story Distribution Units; one that is used to distribute a Mode Branded Story on creator’s sites, and one is used to embed any story, on any website, by a Mode.com user.
For a Mode Branded Story, a brand collaborates with Mode to sponsor an editorial story on Mode.com, which includes a package of ads and the Distribution Unit. The story and ads live on Mode.com, and they are placed on Mode’s creators’ websites via the Distribution Unit. For the Embed Unit, anyone can embed a story, Branded or not, from Mode.com simply by clicking the "embed" button and pasting it on a website.
The goal of both units was to look like the "full story" that the user could consume on the creator's site without needing to visit Mode.com. The challenge was fitting all the elements of the story in a small space below an article, especially in the case of the Branded Stories, which needed to include the ads from the package.
The purpose of this video ad product was to serve preroll ads (short branded videos that play before an editorial video) in three placements on the creators’ sites, including mobile sites. The most important goal was to grab the user's attention with interesting and high quality editorial video content, and thus create a desire to complete the preroll ad. Each placement had the same goals, but different challenges, which were solved in different visual ways.
For playing videos and prerolls, Mode previously used many different custom players, default browser players and used others such as YouTube players across all products. We wanted to build our own player for ad serving, performance and tracking reasons, and also to create a sleek, consistent and trustworthy branding. The player is used in ads, units that users embed on their site, Mode.com responsive website and app, in stories such as this.