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.

Heads Up Display

Hud popover

Newsroom Heads Up Display (HUD) is a Chrome extension that overlays the publisher’s website with data and visualizations directly from Newsroom, allowing publishers to see data directly in the layout of their website. HUD also tracks scroll depth to allow publishers to see how far their users scroll down the page.

My Role

User Experience Design & User Interface Design

Problem

Newsroom web app is a standalone product that allows publishers to take a deep dive into their data in an experience separate their website. No direct visual context is provided within Newsroom web app which can increase cognitive load on the user. We weren't providing a way to see visual positioning of the articles on the publisher's website.

Process

To give publishers a bird's eye view of article data, we thought it was best to directly overlay the website with a Chrome extension. At the start of this project, we only had three publishers that we thought would be interested. However, we still wanted to design HUD in a unobtrusive way that would work well for most publisher websites.

  • The stats widget placement to the bottom right of the viewport is positioned here for the least amount of view obstruction since website layouts are generally centered or aligned left, and it's placement at the bottom allows the user to scroll the page so the stats widget wouldn’t impede the user.
  • The small pill overlays with a shadow are positioned to bottom right of the article because it is likely to obscure the focal point of the article title and image.
  • When the user clicks on a pill, a popover appears with more data so the user can get more insights into the article's performance. It can be hidden from view after the user is finished looking at the data.

When HUD went into alpha release, access was given to a very active publisher on our platform to get feedback. After prioritizing some of their requests, we released it to two more publishers for more feedback which were very positive.

On a future iteration, I want to rethink the pill overlays as I thought they weren’t flexible enough to cover all the different types of articles one might see on a typical publisher's website. For example, the pill didn't work so well with small text links due to the pill overlay not being efficiently designed (i.e. takes up too much space).

Hud off
HUD - Off
Hud error state
HUD - Error
Hud loading state
HUD - Loading
Hud default
HUD - Trend pills and Dashboard
Hud popover
HUD - Article Overlay
Hud refresh data
HUD - Out of Date Data
Hud scroll depth viewport
HUD - Scroll Depth
Hud scroll depth full page length
HUD - Scroll Depth (Outside Viewport)
Hud settings panel
HUD - Settings Pane
Hud settings panel spec
HUD - Settings Panel Spec