Outbrain Organic Campaigns

Role: UX Design, Visual Design

Outbrain Organic Campaigns is a tool that allows publishers to influence the content recommendations shown to users, while maintaining engagement. It allows publishers to choose specific pieces of content, set an impression or click goal, and sit back while Outbrain’s personalization algorithm directs the content to places across the web that will most likely help the publisher reach its goal.

Organic Campaigns was created to help publishers deliver on their business goals, which are often measured by content impressions and/or content clicks. Publishers typically use sponsored content, traffic exchange, or exposure through impressions to help reach their goals.

My role: I worked with a product manager and lead UX for the project. Outbrain product designers work hand-in-hand with product managers and engineers to create designs from defining the product, wireframing, user testing, and hi-fidelity prototypes/mockups to launched solutions. The visual design was created with the help of our UX Style Guide, which is a collaborative shared project between Outbrain designers. (The color palette and several UI elements were created by other UX teammates).

portfolio

Product Requirements

It became clear from the beginning that the product would need three main things:

  1. A place to see all campaigns
  2. A place to create a new campaign
  3. Ability to look at individual campaign details

Wireframes

From there, the next step was to hash out all of the details that needed to be present on each of these sections. #1 and #3 turned out to be fairly straightforward in what needed to be presented on the page.

portfolio

Evolution of early wireframes for the All Campaigns page. Main design decisions revolved around which campaign details needed to be sortable - i.e. have its own column - or present at all.

portfolio

Wireframe for All Campaigns page. Version 2 included streamlined table columns that allows users to sort by date, goal, and CTR.

portfolio

All Campaigns - Final high-fidelity design



Designs: Create a New Campaign

The UX for creating a new campaign turned out to be more complex, due to the information that a user would have to provide in order to create the campaign. Users would have to choose content for the campaign, and decide where on the web and when the campaign would show. As the product manager walked me through all of the necessary campaign details, it became clear that the Create Campaign flow would need to be a wizard with multiple steps.

portfolio

Early Wireframe: Creating a Campaign

High-Fidelity Prototypes

Adding campaign content - Adding URLs that contain errors

Video of multi-select dropdown interaction



User Testing

User Testing revealed that, while the wizard was fairly simple for folks to understand, there were smaller details within the wizard that were still hairy.


For example, the final step of campaign creation is a page that summarizes the new campaign so that users can check details before the campaign gets started.

  • Users did not realize that the wizard header, which shows which step you are completing, was clickable. Changing the visual design of this element made the header look more like a clickable navigational element.
  • The edit metadata section, which allows you to edit the campaign name, date range, and other campaign details, quickly became cluttered in the original design. It was hard to immediately discern the campaign title and there wasn't enough room for users to look at widget and section information, and so this was revised in later designs.
portfolio
portfolio

Left: The original campaign information section quickly became crowded as we added more editing capabilities. Right: A revised mockup based on user feedback



Final Design

portfolio

Create a Campaign: Empty state

portfolio

Final Version: Creating a Campaign Step 1

portfolio

Step 2: Selecting multiple sections

portfolio

Wizard final step: Your Campaign is Ready to Launch

Project Credits

Sagiv Gurevitch - Product Manager
Ela Eldar-Raskin - QA Lead
Tal Magen, Amit Levinsky - Front-end Engineering
Ido David - Algorithms
Mike Mathis - User Researcher
Savitha Pal, Ofer Perach - Color Palette, UX