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

Newsroom Redesign

Newsroom front page

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

My Role

User Interface Design

Problem

Newsroom old design
Old Newsroom design.

Before I was hired, there was no full-time designer on staff and general design direction were decisions usually by leadership and the front end engineering team. Since the engineering team were divided into several teams and didn’t have full ownership of the holistic design system, there were decisions made in piecemeal. I had to take a step back and rethink design problem areas as well as push our engineering team towards reusing components to avoid "interface snowflakes".

Process

This project was mostly a user interface redesign and didn’t involve much advanced thinking on the user experience. While the R&D team and I thought it was an important project that could streamline future work on Newsroom, we also focused strictly on high level design and did not include improving the UX in trouble areas within Newsroom.

  • Started by asking the R&D and sales team (the latter work directly with Taboola's publishers) what they thought were the trouble areas and priorities that should be in the redesign.
  • Identified UX and UI trouble areas in the app and noted them in a document.
  • Explored the app and took inventory of all the common elements.
  • Triaged all the aforementioned issues and arrived at some informal solutions to direct my priorities.
  • Codified a consistent color palette, typography, and grid.
  • Designed commonly used interface elements such as buttons and forms elements.
  • Put together a layout with all the newly redesigned elements.
  • Received feedback internally from stakeholders within our team and iterated on the design.
  • Reviewed it with our publisher sales team, who serves as the liaison to our publishers, and gave them the opportunity to show it to our publishers so as to not surprise them with all the massive changes.
  • Documented the new specifications and design system for the engineering team for easy reuse across dashboards and platforms.
  • Worked with the front end engineering team on implementation.

Design System & Style Guide

A design system is a library of reusable components that allows designers to produce designs at scale. Most digital products have a design system in place, anywhere from a rudimentary one in a source file that designers can reuse to an official repository. I started with the basic components such as the color palette, buttons, icons, and forms, all the way through to building the more advanced modules. Once the design system was finalized, I created a document in a presentable format and uploaded it to Zeplin to share the design system with the engineering team.

Newsroom style guide palette
Color Palette from the style guide.
Newsroom style guide buttons
Button and button states from the style guide.
Newsroom style guide icons
Icons from the style guide.
Newsroom style guide layout wide
Wide (standard desktop) layout.
Newsroom style guide layout narrow
Narrow layout seen on smaller screens. Due to the narrow width, the responsive alert right rail is out of the viewport.
Newsroom style guide layout narrow alert rail
Narrow layout with alerts right rail invoked. A user can invoke the right rail by clicking on the alerts button in the top right. It slides in and out.