Concert Ad Manager (CAM), developed as part of Vox’s SaaS initiative, is a self-service platform for creating campaigns across Vox’s advertising network. Since its launch in 2021, CAM has only supported the building of Vox’s proprietary ad formats, known as the Athena collection. With a need for expanded functionality, I designed the UI/UX to allow IAB Banners to be created in CAM as well. I was the sole designer working directly with our Head of Product, Director of Engineering, internal revenue teams, and a small team of engineers. I maintained a project document, wrote and managed Jira tickets, led various stakeholder meetings to define project requirements and share designs, and held weekly design reviews with my direct team.

Context & Goals

The original goal of CAM was to empower smaller brands and marketing teams to easily build high impact ads at scale. But it has evolved to become essential to our internal revenue teams since it allows non designers to build any to-spec Athena campaigns. These teams have reported an increase in productivity, reduced turnaround times, and more bandwidth for designers to focus on custom ads and RFP mocks. With such positive feedback, we wanted to further improve the workflow of this user segment by adding additional format support into CAM. Since IAB Banners are standard sizes and a common companion to Athenas for takeovers and sponsorships, this was the format most useful to our revenue teams.

The Research

I kicked off the project by meeting with stakeholders to discuss the current process, identify specific pain points, and understand the key differences between the Athena and Banner ads. Designers currently worked off a template in Figma where they plugged in the advertiser provided assets and output the ads as jpgs. It was a tedious process that required access and familiarity with Figma. By moving it into CAM, we would eliminate the need for a designer while allowing users already familiar with the tool to build the campaigns.

While Athenas and Banners use many of the same assets, Banner ads differ in that they:

include up to five unique sizes
have distinct editorial branding
are not responsive but device specific

Mapping out a user flow helped me to understand the additional complexities of building this type of ad format. I realized that the editorial network would need to be selected at the outset in order to render the correct version of the Banner templates. I also decided to group the five ads together, since they all shared assets, instead of creating linked individual ads. This would mean substantial changes to both the UI/UX and backend of CAM. As I started to wireframe, an engineer on my team began a tech explore so we could both be working simultaneously.

The Design

One of the biggest challenges was the UX for adding and accessing a single set of assets for multiple sizes, and then arranging everything to satisfy different editing capabilities. The message and CTA were the same across all Banners, but the image, while the same, could be cropped or zoomed in/out per size instance. Through wireframe explorations, I landed on a design with a single place for both the assets and ads where the image could be edited in situ.

It was also clear that a single page scroll would not only be cumbersome, it would make it difficult to see the ad you were editing. After sketching out options and discussing the tradeoffs with my team, I went with a tabbed design since it allowed me to include the name of all the Banner types (something our users mentioned was important).

Having a solid design system to pull from made refining and fleshing out my wireframes much easier. I was able to reuse several components and tweak others to work in this different context. I shared early and often with my team and continued iterating based on their feedback. This constant collaboration meant that any technical considerations could be investigated and resolved in real time. I had a project document where I kept track of open questions and connected with the project manager for our revenue teams as needed. I led a final stakeholder meeting where we got sign-off on the designs and then I passed everything off to our engineering team.

While the engineers were building the new IAB Banner flow I’d designed, I went about simplifying the existing Figma Banner templates for the more automated environment of CAM. I streamlined the spacing, fonts, and layout of all five Banner sizes for 18 of Vox’s O&O properties, then reviewed my changes with the SVP of Product Design to ensure no meaningful branding was lost. I located all the necessary fonts, then researched and provided recommendations for the most efficient way to host them for use in CAM (something we’d never had to do prior to this). Finally, I completed extensive visual and functional QA to make sure everything matched my designs as closely as possible.

The Outcome

While I left the company before this feature was launched, I’m incredibly confident that supporting IAB Banners in CAM will transform the way our internal revenue teams create ads. This functionality will continue to make our revenue teams more efficient and productive, allows the talented Revenue Studio designers time to focus on the kind of high impact custom work that brings in, well, revenue, and lays the groundwork for further format support, such as Preludes, to be built next.