Yahoo! Ad Platform Redesign

The Product

Users of Brightroll DSP, by Yahoo! are online advertising campaign managers who run campaigns (the Demand-Side) on ad properties throughout the internet (the Supply-Side). Each time an app or web page loads, ad placements are sold in real time (fractions of a second) by Ad Exchanges.

Campaign managers have a budget to spend, and attempt to meet a variety of specific performance metrics depending on the campaign goals. The DSP provides parameters for users to target specific audiences (called "Targeting") such as demographics, device type, time of day, include and exclude lists of specific sites and apps, and many others. Professional campaign managers often run hundreds of campaigns at once for a single account. For example, a single campaign (1) might run two different videos (x2) in 50 cities (x50), or run variations based on specific times of day users are likely to be surfing a list of specific apps or websites.

Quick Facts

Timeframe

05/2016 – 06/2017
(Verizon acquisition)

Product

Brightroll DSP, by Yahoo!
(Demand-Side Platform)

Orginization

Ads & Data UX

Team

5 + turnover

Tools

Sketch, InVision, Balsamiq

Role

Sr. UX Designer

image of Ads and Data UX team
Team Contributions
  • Cross-function Design Lead
  • Interviewed new hires
  • Mentored junior designers
  • Developed processes & standards
Design Contributions
  • Dashboard screen
  • IA & navigation patterns
  • Campaign optimization flows
  • Generative user research
  • Prototype user testing

The Team

Ads & Data UX was divided among two products, the DSP and the Ad Exchange, but my team was 100% dedicated to DSP maintenance and redesign. Three months into my on-boarding, parental leave and the departure of a senior team member left me in charge of a team of three, followed by the addition of two more new hires. Turnover was especially difficult on our Engineering team, which lost several senior members after the announcement of the potential (and eventual) acquisition by Verizon.

Our project was supported by a very experienced UX Researcher who made valuable contributions. Unfortunately, she was not tasked to our project until it was well underway, instead of prior to the start of design which would have been ideal. Until she got hired and brought up to speed I had to perform my own generative UX research and prototype user testing. Once on board, all the designers supported her lead on research, which was great mentoring for all of us on research methods and rigor.

With the close of the Verizon acquisition, teams were merged with AOL to form "Oath," and I was one of approximately 2,200 Yahoo! employees laid off.

The Problem: Outdated UI

Yahoo portfolio image
Some Issues
  • Slow workflows
  • Highly nested IA
  • Low information density
  • No "planning" capability
  • Poor reporting in-app
  • Poor reporting export
  • No notifications/intelligence
Big Business

Strong competition in a fast-changing industry, where advertisers had more money to spend than time, drove users to other platforms.

Incomplete Campaign Tool

Features to support critical campaign activities like planning and audience building only existed outside the platform, requiring additional work and set up time.

Outdated User Research

Product and Design teams were relying on task flows and user profiles generated years prior. Discussions suffered from speculation and uncertainty instead of wholistic knowledge of user needs.

Outdated Code

Tech debt to update the code framework, chaotic CSS, and years of changes made it preferable for Engineering to start from scratch with a new Beta UI.

Who are the users?

Types of Users

Fresh UX research to update organizational understanding of the user was needed, but hadn’t been done in advance. Most users worked at agencies that specialize in Advertising. Some agencies were large, handling all manner of clients and accounts, while others were smaller or more specialized. For example, one agency we talked to specialized in targeting mobile users who had flown through airports near New York within the previous few months. Larger agencies were more likely to share campaign work among users focused on different tasks, such as Ad Specialist, Audience Specialist, Optimization Specialist, Data Analyst, and Account Manager. Strategies, methods, and additional software tools varied significantly from one team to another.

Internal vs. External

An internal Yahoo! business unit ran campaigns on behalf of clients like an agency. Internal Yahoo! users experienced a Salesforce integration that made workflows like set up and budget allocation completely different from external users. External users often ran campaigns across multiple platforms like Facebook and Google, then aggregated campaign results into a single report for clients. Getting candid product feedback from external users was more difficult than internal users, who were easier to talk to and whose perspective more accessible. Thus, even though the voice of the external user was more important to the business, it was usually the voice of the internal user that was heard.

image of video chat with a Campaign Manager

Interview, a Yahoo! Campaign Manager in Europe

image of video chat with a Manager of campaign team

Interview, a Manager oversees a team that handles many accounts

Hands-On-Keyboard Users

The “hands-on-keyboard” (HOK) user was typically a Campaign Manager, intimately involved in details, using the DSP to set up and run campaigns, monitor and adjust parameters, and was generally responsible for campaign performance.

Manager Users

The manager user was more interested in bigger business performance details such as accounts, profits, and relationships with clients. Typically wasn’t involved in campaign details, but often managed a team of Campaign Managers (HOK users).

Power Users

Experienced “pros” who know the ad business, know the software, and need to work quickly and efficiently. They often manage the biggest accounts, and to be the platform of choice for this user was a design goal.

First-Time & New Users

Entry-level and junior users were common in the industry, and business training on the platform was not practical. The new DSP needed to be easy for new employees to learn quickly on their own.

 

Core Workflows

The design team created low-fidelity wireframes to illustrate the basic steps and UI required to accomplish the most common workflows, in this case using Balsamiq, which allowed a team of 4 UX designers to collaborate quickly while some transitioned to Sketch. The work was reviewed cross-functionally using InVision. This allowed us to establish "baseline" workflows, identify common patterns, issues, opportunities, and iterate on the design quickly.

Importantly, it also facilitated design review of new ideas with Product and Engineering teams in a new environment, free from the old UI and ways of working.

Example Workflows
  • Campaign Forecasting
  • New Campaign Setup
  • New Line (Insertion Order) Setup
  • New Audience Segment Creation
  • Alerts & Notifications
  • Campaign Optimization
  • Reporting

Goals & Guiding Principles

Inspiration

A successful redesign would have certain characteristics, based on existing DSP user feedback, preliminary research & landscape analysis, and UI design best practices. Executive Product & Design leadership challenged the team to build these qualities into the new platform UI.

screen image of Airtable.com UI

Inspiration: Innovative UI patterns by Airtable.com

Fast & efficient

Focus on core workflows to make them efficient, integrating 
the tools users need when they need them.

Campaign lifecycle

The application should support critical ad campaign activities from beginning to end, such as Planning and Reporting.

Flatten the architecture

Make it easy to do “anything from anywhere”.

"Spreadsheet on steroids"

Users expect to be able to perform many of the same actions that they do in their favorite tool, MS Excel.

Actionable UI

If it is editable, you should be able to click on it, edit it. If it is “Red” you should be able to take action to fix the problem.

"Sticky" actions

The application should remember states of screens and preferences set by the user.

Focus on "Power Users"

Enable them to take powerful actions, like bulk editing.

Easy To Learn

The UI and screens should be clear and intuitive; new users should not need a tutorial.


Dashboard: Application Entry Point

image of DSP Dashboard with Visual Design styles applied

I worked with team members to apply an evolving Visual Design system to my designs in wireframe

Hello Everybody

The dashboard was the first screen I designed, which was helpful because at the start I was still learning about programmatic advertising. All users start at the dashboard after login, however, different users might be interested in different tasks, such as creating and managing campaigns, building an audience, creating an ad, or client account management. The dashboard is intended to provide higher-level data and features to identify specific campaigns and lines that match different use cases.

Diving Deeper

Filtering tools in the left column could be used to identify matching campaigns in the center column. Selecting a campaign in the center presented additional details in the right column, or direct navigation to that campaign. As "read-only," this screen facilitated monitoring, finding, and diving deeper into the data. The primary goal is to help answer the question, “What do I need to spend my precious time on?”

image of DSP Dashboard wireframe

Wireframe: Filter column can be collapsed for laptop screens

image of DSP Dashboard wireframe

Wireframe: Filter column used shopping site patterns to narrow results

image of DSP Dashboard wireframe

Wireframe: Filtered results match specified attributes

Exploration: Related Key Metrics

image of metrics display exploration
image of metrics display exploration
image of metrics display exploration
image of metrics display exploration
image of metrics display exploration
image of metrics display exploration
image of metrics display exploration
image of metrics display exploration

Navigation & Mental Models

image of DSP Information Architecture

Smart Flexibility

Fast, intuitive, direct navigation to any item of interest was a major goal of the redesign. Re-thought main navigation made direct access to more of the campaign data possible by surfacing recent and favorite items. The customizable spreadsheet was also a powerful tool for navigation, allowing data linking, show/hide, sorting, and filtering.

Smart Structure

Rather than "do anything from anywhere" capability, user research revealed a strong preference for maintaining the Advertiser > Campaign > Line hierarchy inherent to the business. Main navigation also reflected the campaign "life cycle" phases of Planning, Setup, Flight, Reporting, and Archiving.

image of Advertiser-level information assets

Advertiser level. Campaigns and other asset "libraries"

image of Campaign-level information assets

Campaign level. Line data table is the main "child" asset

image of Line-level information assets

Line level. Performance Data, Targeting, and Ads

  

I want to see everything all at once.

— Ad Agency User with three desktop monitors
  

A Spreadsheet On Steroids

image of a DSP Campaign screen with Visual Design styles applied

A powerful, editable spreadsheet was the backbone of many workflows

I Spreadsheets

Every campaign manager we talked to relied heavily on MS Excel to do their jobs, and would often export raw data from other software for import and manipulation in Excel. Leveraging a similar spreadsheet model in the redesign UI gave users many powerful tools they were accustomed to and would dramatically increase the speed of many tasks.

Edits Not Forms

Powerful advantages of the spreadsheet model included increased data density, and the ability to make many actions without changing screens. Direct editing, bulk actions, easy sorting and filtering, are a few of the benefits of the spreadsheet, as well as more control over what data is/ is not presented.

image of an advertiser screen wireframe

Wireframe: advertiser screen showing a spreadsheet of associated Campaigns

image of a campaign screen wireframe

Wireframe: campaign screen showing a spreadsheet of associated Lines

image of a line screen wireframe

Wireframe: a Line screen, showing detailed performance metrics, connected to related controls

"...I would highly recommend and endorse him for any position that requires these skills and allows the freedom for his experience to shine through..."

— Jason Hodge, Sr Product Manager, Yahoo!

UX Research

Can I Get a Do-Over?

At the start, very little reliable product research was available. The Yahoo! team was relying on research done by the Brightroll team several years earlier (a very successful, but different video-ad-focused product), and the expertise of former Brightroll employees – several of whom left the company early into the redesign. The Yahoo Ad Manager “Platform Engagement Team” held a lot of experience, but also strong opinions that were not really what was needed for a new design vision. A half-time researcher had been tasked to our project, but ultimately was removed for lack of commitment and performance.

To learn, I performed my own “guerrilla” style UX research, asking everyone I could about the product, even the VP of Sales for the DSP. Platform Engagement guarded it’s access to external company users, and I didn’t have the bandwidth or authority needed to “get out of the building” until a new UX Researcher was hired. Still, my scrappy initiative enabled me to design a new dashboard and IA that was ultimately validated and refined by solid user testing.

A new, very experienced and effective UX Researcher was hired for our team. Unfortunately, about eight months had passed after project kickoff before she was on-boarded and contributing the sort of generative research and user testing we needed. Ideally, this type of work would have started even before project kickoff. Working with the new, veteran researcher was great experience and brought confidence and rigor to the methods I had already been employing, like interviews of users and stakeholders, and user testing prototypes.

NYC Ad Agency Visits

The new UXR took our testing and user interviews to the next level, and planned a trip to Yahoo!'s New York office where we met with external advertising agency clients and a wider internal team of account managers. The trip was very fruitful, and exposed a diverse variety of user techniques and ways of working, especially at the ad agencies we visited.

Design Sprints

I helped facilitate design sprints that were based on the GV Design Sprint, and included both internal and visiting external users and the cross-functional involvement of Engineering and Product stakeholders. This process uncovered nuanced user needs and allowed us to collaborate on solutions. We broke into groups, filled many square feet of white board, transcribed discussions in real time, recorded sessions with video, and shared insights.

 

image of video chat with a Campaign Manager

Design sprints: Agency users visited to share experiences and develop solutions

UXR Contributions
  • Test plan & script development
  • Prototype creation
  • Prototype testing
  • Internal team interviews
  • Agency user on-site visits
  • Audio & Video recording
  • Insights & reporting
  • Design sprint facilitation

Optimization Workflows

Campaign Optimization

Understanding the complex factors related to campaign performance took time. We conducted extensive research with our users to identify what metrics they needed in different scenarios, and how that information indicated possible ways to improve performance. Different metrics were used to assess or troubleshoot different aspects of a campaign's performance, and different tactics could be employed to achieve different campaign goals.

Actionable Intelligence

Being able to quickly understand what tactics are working or not working, then quickly make adjustments was the goal of the Line Screen, and was essential for the success of the DSP product. Audience Targeting is a crucial component of any ad campaign. Audience segmentation, re-targeting, adjusting bids, and many other tactics could be used to optimize lines and overall campaign performance. All of this differed from one user to another, one campaign to another, the type of agency running the campaign, and other factors.

image of an advertiser screen wireframe

Advertiser screen metrics: Account-level margins, costs, dates...

image of a campaign screen wireframe

Campaign screen metrics: Overall campaign metrics, issues with lines

image of a line screen wireframe

Line screen metrics: Detailed problem solving, full controls

image of a DSP Campaign screen with Visual Design styles applied

Line screen: shown with Visual Design applied, shows all critical metrics to support assessing line performance, troubleshooting issues, and optimizing using a variety of tactics, supports charting multiple, user-selected metrics

image of video chat with a Campaign Manager

Wireframe: my design for the line screen

image of video chat with a Manager of campaign team

Targeting screen (Devices): One-click linking on the line screen to related screens to support quick adjustments

image introducing VISA portfolio project

Multi-Channel Platform

Senior UX Designer

5/2015 – 11/2015
See Next Previous

Contact

San Francisco, CA, U.S.A.

photo of Brian J. Sherman mountain biking
photo of Brian J. Sherman snowboarding at Heavenly, CA
photo of Brian J. Sherman with his 2012 Ducati Monster at Lict Observatory, San Jose, CA
photo of Brian J. Sherman backpacking in Yosemite