Heads Up Display
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.
User Experience Design & User Interface Design
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.
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).