Company

Mediabrands is a a group of media agencies, including UM, Initiative, Reprise and others, that focus on the planning, strategy, and execution of digital marketing campaigns.

Project

Mediabrands provides a range of services across its various agencies for running digital campaigns of various types and each of its agencies has a specific focus at different stages in a campaign's lifecycle. These stages range from planning, to strategy design, to building and launching the campaign, to drawing optimization insights.

The Digital Campaign Workflow is an interactive visual model that illustrates the full workflow across different stages. Users can select specific groups to show or hide, as well as use a navigation menu to shift between different stages of a campaign. In doing so, they're able to evaluate their own responsibilities at different stages, understand what others are responsible for, and ultimately gain a deeper understanding of all moving parts in a digital campaign.

Tools

• Keynote

  An initial prototype of the workflow model was created in Keynote to create a template and organize stages and inputs across a campaign.

• Adobe Illustrator

  Once the initial prototype was approved by key stakeholders, each stage in the campaign lifecycle was designed on a separate artboard within Adobe Illustrator. Layers and shapes were named strategically in order to export artboards as SVG files with appropriate id and class names.

• Bulma

  Bulma is a CSS Flexbox-based framework for designing websites, apps, user interfaces and more. It was used to create the general layout for the interactive model as well as the navigation features.

• Greensock

  Greensock is a JavaScript library for designing responsive animations in websites and apps. It was used to program the interactivity for navigating between different stages in the model.