New Ad Campaign Creation Flow
Redesigning the ad campaign creation flow for agency users by introducing new layouts, features, and visual updates to better meet their needs.
Role: UX Designer
Timeline: 2+ years (2022-2024)
Team: Internal & External Developers, Project Managers, Technical Writers, Marketing, Sales, QA Testers
Background: The Platform
Disney Campaign Manager (formerly Hulu Ad Manager) launched in March 2020, allowing advertisers to create and manage their own ad campaigns on Hulu. Campaign creation included:
Naming the campaign, setting its dates and budget
Targeting viewers based on demographics like age, location, interests, and content preferences
Uploading a video ad
Submitting the campaign for approval
Problem Statement: Make it work for Agencies
When we launched the platform, our main customers were small and medium-sized businesses. But over time, agency users became our main focus.
The team and I realized we needed to create a new campaign flow because:
Agencies are more sophisticated users than SMBs and want more options in the platform such as more ad formats and more targeting options
We were going to rebuild the whole platform to be in-house (currently managed by a 3rd party agency since launch), giving me the opportunity to redo the UX
Why do we want agency users?
Agencies bring in more revenue than SMBs
Business goals changing to better suit the needs of agency users
Achieving more parity with the options offered to advertisers in the direct (non-self-serve) side of the company
Become more inline with competitors
Requirements: What Agencies Expect
Agency users have different needs than our usual customers, so we had to add new features to support them.
Below is a list of those user needs, along with a brief description of each.
-
A line item is a single set of targeting, budget, dates, creative assets, etc.
In the current platform: 1 campaign = 1 line item
In the new flow: 1 campaign = multiple line items
Having many line items is useful for agency users since they usually run multiple sets of targeting/creatives under the same brand.
-
Agency users want more options for targeting to let them better reach their clients' customer base. Such as:
Dayparting: The ability to choose the schedule of days and times when the ad should run and should not run
Frequency: How often an ad should air
-
A VAST (video ad serving template) tag is a string of code that is configured in a 3rd party application that includes:
Video ads with different content and/or different audio/video quality
Tracking pixels or 3rd party tags to count number of views (or impressions)
VAST was already available on the direct (non-self-serve) side of the business and was a common request from agency users.
Prior Work
A previous designer explored a new single-page campaign design (shown here) and tested how it performed compared to the existing multi-page layout.
Here were the main results from the sessions:
Half of the users (3 out of 6) preferred the single-page flow.
Many felt the single-page flow lacked clear step-by-step structure.
Users liked the progress bar in the page-by-page flow because it showed where they were in the process.
Users appreciated seeing all the steps at once in the single-page flow’s navigation bar.
Discovery: Single-Page Layout
Based on past designs and research, I chose the single-page layout. It’s easier to navigate with new features and scaleable for future updates.
Below are competitor examples I reviewed, focusing on user flows and how they handle multiple line items.
Meta: Calls line items "Ad Sets"; targeting is on one page and creative setup in following page
Snap: Calls line items "Ad Sets"; targeting is on one page and creative setup in following page
TikTok: Calls line items "Ad Groups"; targeting is on one page and creative setup in following page
Design Process
A major change in the new campaign flow was the implementation of line items. A line item is a single set of targeting, budget, dates, creative assets, etc.
I started exploration by having a tab for each line item on the top rail.
Wireframes of line item "tabs" on the top
Adding more details from wireframes
Further experimentation using "tabs" in high-fidelity mocks
The tab layout wasn’t scalable for campaigns with multiple line items, so I transitioned to a side panel navigation instead.
My first attempt at having line items live in the side panel
I then switched to a simpler view with just line items in the side panel
Ended up using an accordion to hide all the line items so there was space for the navigation area
Once the navigation was set, I added new content, including a section for dayparting, pacing, and frequency settings.
I called this section "Delivery" since all three relate to how often an ad runs.
In the Ad Upload section, I designed a new flow for VAST, allowing users to input and upload VAST code and preview their creative assets.
The challenge was figuring out how to display multiple assets in the modal and clearly show whether each asset was accepted, rejected (with error details), or still pending review.
I explored several VAST layout options and ultimately decided to show only the attributes that failed validation, instead of displaying a pass/fail status for each asset.
I experimented with having different tabs for each asset on the top
I moved tabs to the left side and added a table showing each "pass/fail" attribute for each asset
I removed the "pass" attributes and added icons to each tab, allowing users to quickly see the status of each asset
Final Designs
Below is the prototype of the new campaign creation process.
Design Process
A major change in the new campaign flow was the implementation of line items. A line item is a single set of targeting, budget, dates, creative assets, etc.
I started exploration by having a tab for each line item on the top rail.