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.
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 to take the proof of concept and research and design HUD from ideation through finished product.
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.