Newsroom Head-Up Display

My Role
User Experience Design & User Interface Design
Platform
Chrome Extension
When
2017-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.

Newsroom Head-Up Display (HUD) is a Chrome extension that overlays the publisher's website with Newsroom data and visualizations, allowing publishers to see article data directly in the context of their website without having to load Newsroom in a new browser window. Head-up display is a metaphorically derived name from the type of display one would see in a fighter jet or modern automobile. HUD allows the pilot/driver to see data projected on a window without looking away from their usual viewpoints.

Problem

Newsroom is a product that allows publishers to take a deep dive into their article data, but what if a publisher wants to see data in direct visual context? There is no easy way to see the visual positioning of the articles on the publisher's website directly within Newsroom.

Goal

The goal was to provide publishers with an additional tool to invert the Newsroom experience by using the publisher's website as a basis for the user interface instead of within a self-contained web interface. Some users are perfectly okay with logging into the web application, but HUD would provide another way to view data as it correlates directly to the publisher's website.

My Role

As the sole product designer, I took the proof of concept, researched and designed HUD from beginning through finished product.

Process

This project, as with most Taboola projects, started as a proof of concept from the R&D department. I had to take inventory of the current state of HUD and weigh it against what our publishers needed from this tool.

HUD was my first experience designing a Chrome extension. I started with background technical research to determine what was possible and the limitations of a Chrome extension. From the user interface perspective, I knew there would be design limitations since HUD would be overlaying a website that could be designed and structured in an infinite combination of ways. The design of the HUD user interface needed to be flexible and not break or severely obscure the publisher's website. Some obstructions would be tolerated considering the duality of usage as a regular website and as a reference point for HUD to overlay and expose the data.

Some aspects of the user interface were already had a working design considering that we were pulling in user interface elements and data visualizations from Taboola Newsroom dashboards in the web application. Some elements required a simpler design for less screen space, a similar problem as designing for a responsive layout.

Hud popover
HUD - Article Overlay

The publisher stat widget placement to the bottom right of the viewport is positioned here for the least amount of obstruction since website layouts are generally centered or aligned left. The right side of a webpage also typically contains the less critical user interface elements in Latin-based languages since people of these languages read left-to-right. The placement at the bottom is less likely to obscure a website element of importance.

When HUD went into beta release, we gave access to a very active publisher on our platform for feedback. After prioritizing some of their requests, we released it to two more publishers for more feedback. We released it privately in the Chrome Store.

Takeaways

The central user experience issues I ran into were around the separation of HUD's user interface layer and the publisher's website:

  • Interactive walkthrough: We would need to train the publishers to recognize HUD's user interface by implementing an interactive walkthrough when the user first loads HUD. We did not implement this in the first iteration due to the low usage during beta testing. We also knew that the people using HUD would already be familiar with their website.

  • Pill overlays: they are not flexible enough to cover all the different types of articles one might see on a typical publisher's website. For example, the pill doesn't work well with small text links due to the pill overlay's excessive size. To solve this problem, I would need to design the pill overlay with a more compact footprint.

  • Dark scrim: There were also thoughts to overlay a dark scrim between the publisher's website and the HUD user interface to emphasize the separation. In the end, I decided less is more — let's test the user interface with the least amount of resistance and iterate as user feedback came in.

  • User interface placement customization: Even though I placed HUD's user interface elements in areas that would cause the least amount of resistance, we should not be opinionated on this and allow the publisher to change the placement of the HUD user interface layer. These customizations could be options in the settings panel.