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 newer automobile where it 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. Newsroom is a siloed interface that forces the user to parse information in isolation from their website.

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 application. 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

My role to take the proof of concept and research and design HUD from ideation through finished product.

Process

HUD was my first experience designing a Chrome extension, so there was some background research to determine what was possible and the limitations of a Chrome extension. It turns out that a full front-end application could live within a Chrome extension and there were not any severe limitations that would hinder the feature set.

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 amount of ways. The design of the user interface elements needed to be flexible and not break or severely obscure the publisher's website. Some obstructions are tolerated considering the duality of usage as a regular website and as a reference point for HUD to overlay and reveal data.

The publisher stats 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 left side of a webpage also contains the more important user elements. The placement at the bottom is for the same aforementioned reason because it will less likely obscure a website element of importance.

Another design issue was designing the user interface in a way that creates separation from the publisher's website — meaning HUD user interface elements had to be distinct in a way that it could not be confused with the website's user interface. To solve this issue, we could train the user to recognize HUD's user interface by implementing an interactive walkthrough when the user first loads HUD, although we did not implement this in the first iteration because it was only going to be used by three publishers in alpha testing.

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. I went through a few iterations on the design and released it privately in the Chrome Store.

On a future iteration, I want to rethink the 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 didn't work well with small text links due to the pill overlay's size — they took up too much space.

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