Content Automation Engine

Service based platform that creates pixel-perfect, multi-versioned, online and mobile ad campaigns instantly.

Project Overview

Craft is a production agency with a network of their own client material across digital, social, TVC, print and more. This globally connected creative production business tasked us with developing their internal content automation engine. The platform provides templated content production supporting client initiatives at scale.

GOALS

  • Deliver end-to-end platform that automates production and language variations for campaigns.

  • Provide templated content production to support client initiatives at scale.

  • Enable local markets to change images & text within assets quickly and easily through centralized production.

  • Offer white-labeling capabilities to invite client’s into their own branded experience.

CLIENT 
Craft Worldwide (McCann Worldgroup)

ROLE 
Digital Designer (UX research, Interaction design, Visual design, Creative direction, Client presentations)

TOOLS 
Adobe XD, Zeplin

TEAM 
Project Manager, Junior Designer, BE Developers, FE Developers

AGENCY 
Genome Digital

The Approach

Site maps

A site map was created for each of the 5 user roles based on their respective permission levels:

  • Internal Super Admin

  • Internal Admin

  • Internal Standard User

  • Client Standard User

  • Client Standard Approver

The “internal” role is for the Craft users/employees. The “client” role is for Craft clients with a limited white-labeled view.

“Standard User” journey

Asset Journey

To further understand how the creative content is managed by the platform, we mapped its journey. The asset journey defined each touch point to the user roles and integration with external DAMs.

Asset journey

Wireframes

I created wireframes with representative buttons, tables and inputs to ensure all views are accounted for and functionality is considered. We conducted review sessions with the Craft team to address questions and receive approval to move into design.

UI kit

For complex sites involve particular input fields and tables, we consult our front-end developers on our UI strategy. We agree on a UI kit that best fits the product and if there is leverage for customization.

Semantic UI was selected for this project and we determined component usage and called out any custom components needed to support the functionality of the product. Each project should have creative consideration and sometimes sticking too close to a UI kit can deter those explorations.

Product features

WORKSPACES

For secure access to the platform, we integrated with the company’s internal system, Microsoft Azure. This ensures all employees can use the same login credentials across internal systems.

Once welcomed in, the user can choose which studio workspace to enter. These studios are designed to match the Craft internal organization structure. A studio can have multiple clients, acting as agencies, with the options to white-label the client instances which are exclusive to those invited.

CLIENT DASHBOARD

The dashboard is the main screen for users to see priority tasks and ways to take action. That could be completing a campaign, reviewing previews of creative assets, and downloading reports to see team data.

A new campaign is always created with a “Master” file. This is the file the Craft team starts every Campaign with and contains creative to be run throughout the Campaign. Iterations are derived from it. Our platform deciphers what is a field vs. image, and pulls those controls into the UI to be managed directly inside the CAE.

PROJECT VARIANTS & AUTOMATION

Our team built the technology to decipher an uploaded creative file and identify editable fields and media, elevating those into our product UI for the user to generate variants.

EDITING CONTENT

I had to consider the best layout for hundreds of variants to be displayed within the viewport and the ideal user experience to navigate through each field when editing content. We created two views to handle horizontal and vertical orientation of creative so the editor can see the changes live within their design.

ASSET LIBRARY

We designed access to the Craft asset library or the client’s integrated digital asset management system. If the media is not yet in the library, we also provided an upload feature. Legal usage rights were very important for our client so with each asset, the proper metadata can be collected and follow the asset to launch.

REVIEW LINKS FOR EXTERNAL PARTNERS

Generate web-based links that can be shared externally containing variants in their current rendered state for review and approval. Platform users can manage these links by:

  • Sorting a variant preview by thumbnail or list view

  • Filter by variant file size

  • Sort by height or width

  • Zoom in/out to see greater detail

  • Compare all variants together to identify discrepancies for approval

  • Set expiration dates on review links so they cannot be accessed once the project is completed

The designs for this screen is fully responsive as quick approvals on changes may be necessary away from a desktop.

REPORTING

We consulted with the Craft client to determine what reporting was necessary for their business. The CAE is equipped with multi-leveled reporting to see overview data or granular data for each project. View reports across a Studio, Client, Campaign or Project.

  • Export as CSV or PDF.

  • Filter report data by month and year.

CLIENT BRANDED INSTANCE

Clients that sign into the platform can be greeted by a custom branded instance. This can be helpful for client specific users that have limited access for approvals. We provided the settings that allow for customization of the header logo, footer logo and loading icon.

Phase 2: Theming these instances was discussed and pinned for a second phase.

Custom loading icon

We created a custom loading animation after realizing the platform will have many pause points throughout the user journey. A generic loading icon would have sufficed, but we saw a quick and easy value add by designing one using the client’s logo. We lessen user frustration when calling backed connections and promote brand awareness.

Email

BRANDED TEMPLATES

The platform sends out two emails, one for external preview links and another for support tickets. We designed these templates to follow the base Craft style guide defined by our design exploration and provide a structure for any future email communications needed.

Next Project

Next Project →