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 analytics, run A/B tests on published articles, and compare topics to Taboola's network to identify topic trends and opportunities. Whenever a notable or actionable event occurs on an article, the publisher receives an alert.

Problem

Before I came aboard, there was nobody who owned and managed Newsroom's user experience. The user interface was a hodgepodge of inconsistent design decisions made across three different teams, resulting in some confusion from our publishers. 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 an overarching design system.

Goal

I wanted 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. Once some of the critical user interface issues were resolved, I wanted to build a rudimentary design system to streamline the product development process.

My Role

As the sole product designer, I was in charge of creating and maintaining our design system in Sketch and our style guide for our engineers.

Newsroom old design
Old Newsroom design.

Process

This project actually started before it appeared on the R&D team's radar. There were no source files — I had to recreate all the user interface components from scratch in Sketch. As I worked on other projects, I was already redesigning the essential, reusable elements and adding them to my Sketch symbol library. Since this project started off the books, the design process was leaner than a typical design process.

  • I started by gathering feedback from R&D and our publisher sales teams (who work directly with our users, the publishers). With their help, we identified trouble areas that affected our publishers the most.

  • I conducted an audit and identified trouble areas from a UX/UI perspective and documented them.

  • I triaged the trouble areas that were identified in previous steps and arrived at some ideas to direct my priorities.

  • I produced high fidelity wireframes informed by the prioritized user stories and documentation. At this point, I already designed an extensive component library in Sketch for Newsroom, which allowed me to essentially wireframe and design mockups at the same time.

  • I codified a consistent color palette, typography, and grid and commonly used interface elements, and a layout with all the newly redesigned elements.

  • I gathered and analyzed feedback from product owners and stakeholders within our team and iterated on the design to meet our goals.

  • I 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.

  • I documented the new style guide and design system for the engineering teams to reference.

  • I paired with the front-end engineering team implementation.

Users are generally opposed to changes of a system once they learn it, and I knew there was going to be some pushback both 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 why we made the changes and the benefits to them.

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.