Taboola Newsroom Redesign

My Role
User Interface Design
Platform
Web
When
2016-2018

Taboola platform allows online content publishers to market digital content through a recommendation engine which is served via site widgets and feeds on publishers and websites across the web.

Taboola Newsroom is a publisher-focused dashboard for editors and reporters to get performance insights and other engagement metrics from their articles. Publishers can see high-level traffic, run A/B tests on published articles, and compare articles to traffic against the rest of the Taboola network to identify opportunities for coverage. Publishers receive several types of alerts that recommend actions on articles or informs the publisher of a significant story event, such as recommending to post a story to Facebook or an increase/decrease in traffic.

Problem

Before me, there was nobody who owned and managed Newsroom's user experience and interface. The user interface was a combination of inconsistent design decisions made across three different engineering teams that came to different solutions, resulting in the inconsistent styling of elements and iconography. It was difficult for our users to make sense of how to do even the most basic tasks, such as how to find more data for an article (it is buried in a collapsible table row with little affordance to signal to the user that it could be expanded to reveal more information).

Taboola's goal was to resolve some of the glaring user experience and interface issues — this included inconsistent user interface elements, hard to understand data visualizations, and overall information architecture, specifically in regards to the navigation. Furthermore, the engineering team did not have style guide guidelines or documentation. Technical debt was piling up due to the lack of reusable components and overarching design system.

My role in this project started before it appeared on the R&D team's radar. As I worked on other projects, I was already redesigning the essential, reusable elements and adding them to my Sketch symbol library. I did not see a good reason to bring in flawed user interface elements from the app if I had to recreate them in Sketch.

Newsroom old design
Old Newsroom design.

Process

  • I started by gathering data from R&D and sales teams; the latter worked directly with Taboola's publishers (i.e., our users). With their help, we identified trouble areas that affected our external and internal users (employees).
  • With this information, I created user personas to help define the types of users that use Newsroom to provide context for our design decisions.
  • I conducted an audit and identified trouble areas from a UX/UI perspective and documented them. I also documented common, reusable components.
  • I triaged the trouble areas that were identified in previous steps and arrived at some ideas to direct my priorities.
  • Produced high fidelity wireframes informed by the prioritized user stories and documentation. At this point, I already designed and built out an extensive component library in Sketch for Newsroom, which allowed me to essentially wireframe and design mockups at the same time.
  • Codified a consistent color palette, typography, and grid and commonly used interface elements, and a layout with all the newly redesigned elements.
  • Received feedback from stakeholders within our team and iterated on the design to meet our goals.
  • Shared the designs with our publisher sales team and gave them the opportunity to review, provide feedback, and share with our publishers to not surprise them with widespread design changes.
  • Documented the new style guide and design system for the engineering teams to reference.
  • Paired with the front end engineering team implementation.

Users are generally opposed to changes of a system once they learn it, so I knew there was going to be some pushback internally and externally. There was an effort to balance those concerns by not making wholesale changes to the user experience while also educating stakeholders on the benefits of the changes.

Design System & Style Guide

A design system is a library of reusable components that allow designers to produce design at scale. To create Taboola's style guide and design system, I started with the essential components such as the color palette, buttons, icons, and forms, all the way through to building the more advanced modules. After I finalized the design system, I created a document and uploaded it to Zeplin to share the design system with the engineering team.

Newsroom style guide palette greyscale
Style Guide > Color Palette > Greyscale
Newsroom style guide palette basic
Style Guide > Color Palette > Basic
Newsroom style guide palette dataviz
Style Guide > Color Palette > Data Visualization
Newsroom style guide buttons
Button and button states from the style guide.
Newsroom style guide icons
Redesigned alert icons for all the alerts in Newsroom. Each icon is color-coded by positive (green/gold), or negative (red). Variant icons denote a variant row in Front Page.
Newsroom style guide layout narrow
A narrow layout optimized for smaller screens. The right alert rail hides outside of the viewport. Invoke the alert rail by clicking the notifications button at the top right.
Newsroom style guide layout narrow alert rail
A narrow layout for smaller screens with the aforementioned right alert rail invoked.