Interactive model that illustrates the planning, activation, and management workflow used in digital marketing campaigns
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.
An initial prototype of the workflow model was created in Keynote to create a template and organize stages and inputs across a campaign.
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 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.