Chartbeat's Heads Up Display -
enabling homepage editors to make
critical data driven decisions.

Overview

The HUD is targeted towards high volume homepages. It’s purpose is to asses how articles and positions are performing by ranking the positions by Clicks Per Minute (CPM). Two hour historical views are available for each position to aid homepage editors in their decision making.

I was part of a small agile team led by Product Manager Adam Clarkson. I worked hand in hand with team, and the design Director Renee Solarzano to iterate on this product over the course of several months. I worked on the IA, visual design, and user testing.

Michael Mazur Design
Michael Mazur Design

The Problem

The iteration I started with had a few problems that were uncovered after launch. Firstly the design did not account for carousels that swapped out multiple articles in the same position. A homepage editor could not see how each individual article was performing, they saw an aggregate of all the articles in the position.

Secondly we were found that there was a latency issue with publishing software that was causing editors to prematurely swap out content. When an editor would publish a new article we had to convey to them that not all the users were seeing the new article immediately. We found that users were not refreshing their browsers as frequently as previously assumed coupled with publishing latency.

Michael Mazur Design

Research

We held multiple user testing sessions that uncovered our two major problems, multiple articles in a single position. Secondly, we discovered that users were not giving enough time to an article to truly see how it is going to perform.

After the first release we leveraged simple questionnaires that solicited feedback from our users. Secondly during the design process we put our potential solutions in front of users to get some feedback on the design during task based exercises.

Michael Mazur Design
Michael Mazur Design

Design Process

The design process was a highly collaborative and iterative process. I worked with the product manager, engineering team, and design director to deliver a solution that passed user testing. After conducting some initial user testing and research I quickly identified the major problem areas.

From there I moved into sketching and wireframing as there were going to be some major structural changes. After validating and getting sign off from all key stakeholders I moved into high fidelity mocks. There were 3 major high fidelity versions that were designed and tested.

Michael Mazur Design
Michael Mazur Design
Michael Mazur Design

Final

After 3 main rounds of high fidelity versions we landed on a solution that we were confident would solve the problems we uncovered in user testing and also move the product towards a new style guide we had been working on internally.

The goal was not only to solve users needs but move the product into a new visual design language that unified all of the products. Some additional screens needed to be re skinned and they are pictured here as well.

Michael Mazur Design
CASE STUDIES
Michael Mazur Design

Michael Mazur Design

Interested in working together? Get in touch.