Ad Format Matrix

Description

The Ad Format Matrix served as a supplemental training tool and reference guide for sales and account managers.

Goals

Create a tool to would allow users unfamiliar with Tremor Video’s ad format offerings to quickly and easily find the appropriate ad format based on a set of required features.

Interface should allow users to select legacy format/feature names they were familiar with at the acquired company, and be shown the corresponding tremor video ad format. Interface should (also) allow users to select Tremor Video ad formats directly and be shown which legacy formats/features they include.

Provide additional information, links, and specifications for each Tremor Video ad format in a detailed (lightbox) view.

Include a working interactive ad in the detailed (lightbox) view, allowing users to see the ad format in action.

Challenges

Organizing and standardizing information provided for the detailed view, so that the layout and UI could be consistent across all featured ad formats.

Creating a UI that served to ‘translate’ in two directions: selecting a legacy format/feature and being shown the appropriate Tremor Video ad format, but also selecting a Tremor Video ad format and being shown the appropriate legacy format/features.

Time frame. This project had a very quick turnaround time, approximately two weeks from start to finish, which includes everything from design mockups, revisions, organization of content and development.

Resolutions

Detailed view information was broken down into subsections of predefined content types, which were loaded via JSON and built at page load using JavaScript.

Menu UI was designed for dual purpose 'translation' in such a way that Tremor Video ad formats would be displayed as the result of clicking an item on the menu at the left; while hovering over a Tremor Video ad format would highlight the name of the legacy format/feature it encompassed on the left.

Working directly with project stakeholders, and designers, we were able to refine page content in a way that allowed for a sleeker UI and a more efficient development process, allowing us to meet the deadline.

Tech

HTML
CSS
JavaScript
Node
Bootstrap
Greensock