Composer is the name of a very capable web-based Ad Builder web application that was inherited to AdColony through an external acquisition. The tool was feature rich and had a lot of potential, but was also generating a lot of frustration amongst the Creative Team due to the tool's complexity and lack of usability features familiar in traditional Creative tools, which resulted in the learning experience being both extremely challenging as well as unreliable
Screen captures of the intial user interface of Composer.
The Product Design team was brought in to overhaul the Composer UI to improve usability and to incorporate familiar design patterns and features that Creatives were more familiar with in order to boost onboarding and productivity. If the tool could be successfully adopted by the Creative Team, the result would be more scale in Ad Unit production without the need to scale engineering resources.
We had a separate Engineering team dedicated to Ad Unit production that had been outputting custom Ad Units for high paying clients since the inception of our services. The objective was to progressively move these engineers towards supporting the development of Composer features rather than spending their time on creating custom one-off Ad Units.
Third-Party Tool Margin
The Creative Team had previvously been relying on a third-party Ad Unit, Celtra, tool that was satisfactory, but resulted in a fraction of our ad sales to be paid out in exchange for its use. The objective would be to diminish usage and dependency on Celtra while simultaneously increasing production through Composer in order to lower marginal costs.
It was important to interview the users from the Creative team who were using the tool the most and pushing the tool as far as possible. The Product Design team conducted several interviews with members of the Creative team to observe their dominant use cases and pain points.
It was clear that there were a few distinct user groups that could make use of Composer in different ways to suit their individual needs.
We relied heavily on power users on the Creative Team who were using Composer the most often and were pushing the bounds of what the tool was capable of. Thankfully, these users were more than happy to meet with us on a regular basis to expose their pain points. We ran several user interviews documenting their use cases, recording their projects, and validating our designs to make sure we were moving in the right direction.
Through these interviews we were able to identify opportunities where workflow optimization could drastically improve the fidelity of the creation process. We partnered with Creatives to observe their most intricate Ad Units, and documented step-by-step their process to achieve the desired outcome. We used these Use Cases/User Stories to guide our design process.
We also created a dedicated Slack channel for the Creative Team to post usability issues and design feature requests. The Product Design team assisted Product in documenting bugs and minor (non-blocker, but frustrating) bugs, and helping prioritize a few fixes with each Composer sprint/release.
In order to reduce confusion and learning curve, we needed to create an interface based on familiar design patterns from common design tools used by the team. The intent was to design the interface to feel like an extension of tools the team were already using in their daily production stack such as Adobe After Effects and Adobe Photoshop, and similar tools used to build mobile standard web ads such as Celtra and Google AdBuilder. We also took cues from leading design tools such as Sketch, Framer, Invision, Webflow, and even Keynote.
Given that Composer was already developed and functional, we had to retroactively take audit the all objects across the tool, and account for how each would be eventually refined as part of the redesign.
A cohesive design system is crucial to any user centric product, as it promotes consistency, speeds up development, and provides user familiarity. From the user interviews and market research conducted, we constructed a design system based on the following core principles.
As a design tool, the primary focus is the canvas where assets are positioned and scaled as planned for the Ad Unit. Our objective was to create a compact, high-density set of components that could stack neatly within fixed-width sidebars aligned against the available browser window, allowing the canvas to occupy as much space as possible, while ensuring as many UI controls were visible within the available browser window.
To achieve a consistent layout rhythm, a 9-column grid was created, which offered enough granularity and flexibility for sizing and positioning the various UI components within the sidebars, which housed the majority of UI. The sidebar and layout grid were non-responsive in order to allow the canvas area to occupy as much of the available browser window space as possible.
We created a custom icon set that was clear, minimal, and consistent. Icons were converted into an icon font using IcoMoon in order to maximize ease of implementation on behalf of developers.
All 50+ UI components, including all relevant states, were detailed within a single page and hosted on Invision. Individual components associated with each section of the Composer UI would be recalled at each relevant Style Guide.
Our intentions for the Design System from the start was to be simple in comprehension and minimalistic in rules. We chose simple logical rules that could extend across the entire design system so Developers weren't spending time constantly referring to documentation. Questions about the core rules were simple and few enough to be recalled at any point and easy enough to digest and memorize.
The outcome of such a simple design system meant that there was minimal design bugs/revisions needed, and for the most part implementation went extremely smooth throughout the project with the simple details of the system being easy to recall.
In addition, over 25+ Style Guides were created to describe the design requirements for each section of the Composer UI. An additional Master Foundation Style Guide was created to overview the core foundational design patterns that governed the majority of the UI.
For each section of Composer including each individual object sidebar, a separate Style Guide was created, which included all associated components and states, as well as an overview of all design requirements.
Through in-depth user interview and validation testing, we designed new interfaces to manage some of the most complicated, yet common use cases. We tested our designs against these complex use cases to ensure our designs could accomplish the needs of the most creative designer.
Editing is easier when you can see what you're doing. Convert the Events/Actions modal into a sidebar so the objects are visible while editing.
Interactivity is one of the core features of Composer, so be sure to highlight layers that are using Events/Actions in the Layer Panel.
Timeline Markers as objects that can be configured with Events and Actions. By allowing Play and Pause actions targeted at different Timeline Markers, Creatives could loop video until the user took an action, or time certain actions to a video to simulate an interactive video experience.
For example, in the Ad Unit shown below, the user is prompted to tap the screen at the right time in order to successfully hit the baseball; tap too early or too late, and the batter will misss the ball. In this case markers are set up during the video showing a ball being pitched, of which if the user taps the screen at 2.0 seconds, the batter will succesfuly hit the ball. Invisible buttons are inserted at certain markers on the timeline. The successful swing button will be active between 2.0 and 2.5 seconds, allowing the user a 0.5 second opportunity to hit the baseball successfully.
Preview before applying! Large images and video assets were difficult to interpret in thumbnail version. Allow media assets within the Media Library to be previewed in full size before applying them to the Canvas.
Search Filters and List/Grid View. More tools to find the asset needed.
We designed and documented a suite of keyboard shortcuts based on those from common Creative Tools. Keyboard Shortcuts were validated with the Creative Team to ensure that they felt as familiar as possible.
We were able to validate during user testing that Account Managers and other users outside the Creative Team were much less likely to effectively use Composer in its raw and natural state. With a highly complex feature set, and lack of design skills, we needed a separate solution for non-designers to free up engineering resources and lower third-party costs.
We created a simple template for the most common Performance and Brand use cases. Users would only need to provide a few custom assets such as videos and images, and select a few parameters, and a Quick Start Wizard would create a baseline working Ad Unit ready to go. From there, users could Publish the Ad Unit and be done, or they could continue to customize the premise Ad Unit in the Composer editor before publishing. This feature resulted in Account Managers from being able to create basic Ad Units, which accounts for the majority of Ad Unit production, independently of Engineering and Creative resources resulting in accelerated throughput and efficiency.
In order to streamline the most developed Playable Ad Units, several Playable Templates have been created for game verticals such as "Match 3" and "Slot Casino", etc. Game parameters such as time out duration, and assets could be swapped to skin the appearance to represent the advertised game. These parameters can be adjusted to tailor a game mechanic to the advertised app.
The ambition for enabling Creatives to build the best possible Ad Units is still alive and well. Some of the more exciting upcoming features include: