Tom Germeau

Behind the scenes of a dashboard design

As a product designer at Chartbeat, the biggest challenge I face is how to incorporate huge amounts of data into as simple an interface as possible; not only do we have to pick which metrics fit the story we’re trying to tell, but also when we should show them. In this post, I break down a few behind-the-scenes design decisions that went into Chartbeat’s dashboard. This part of the design has a big impact, but is often not mentioned when we talk about the end result.

An example from the Chartbeat Dashboard: Adding context

We most recently ran into this type of challenge because we wanted to expose more context around our core metrics we display. We have a few core metrics (such as recirculation, engaged time, and visitor frequency) that are especially critical to a publisher's site's health. So rather than just showing the constantly fluctuating numerical data for these metrics, we also wanted to indicate whether these numbers were good or bad. Our goal is to get our customers in and out feeling smarter. To do this we keep the amount of information displayed to a minimum. Dropping in a bunch of charts displaying a full historical context would be lazy on our side and frustrating on our customer's end.

What we did

After much experimenting we choose to compress the context our customers need into just a colored bar with a rich tooltip. If you look closely the bar shows you an average, current value and maximum, and how they currently relate. The important part is that at first glance the color of the metric and bar will tell you if you need to take action. When you hover over the metric suggested actions will appear. This mechanism makes it so that it's up to the customer to decide if he wants dive deeper based on hints the dashboard gives. x

Comparing to other data points

It's important to know what data we're comparing to. In an ideal situation we compare the current values with data from the same weekday, at the same time of day. We can store up to twenty eight days of historical context, which means we can have up to four comparable data points. Of course we want to give a good experience to a new customer who doesn't have any data yet. First impression is everything, so we decided that after just a few days we start to compare against all the available days at the same hour. From the moment we have more than a couple of weeks of data we start to compare against the same weekdays only. In other words the longer you use the product the more accurate it gets. This feels like a predictable behavior that's easy to explain to customers.

For those first few days when the context is empty, we decided the tooltip would say Chartbeat is still learning about your site.

Defining good and bad

We've taken a thoughtful approach to selecting what data we can compare with. We can make it even easier to scan our dashboard by helping the customer determine if the current value is good or bad. We do this by calculating the mean and standard deviation of all available data points. When a value is above or below that mean by a certain multiple of the standard deviation, we label it as good or bad. This multiple is based on looking at what the data looks like for a group of sites that were recognized as covering our most common clients.

Now that we know what state a certain metric is in we can adapt the rest of the dashboard based on that new information. For example when a site's average click-through rate (Chartbeat's real-time version is called recirculation) is low we point out which articles are responsible for that. Letting our dashboard only call out elements based on multiple complex states creates the feeling a lot of work is being done for you.

Close the gap

This is just one example of how closely together design and engineering have to work to get it right. Two other examples are Instagram's background upload, and Apple's hidden sleep light. Customers are expecting simple user interfaces. For the visual part of those interfaces, the industry has pretty much closed the gap between visual design and engineering by teaching designers HTML & CSS. Let's make sure designers pay the same attention to the invisible parts of the experience.

More takeaways from creating the Chartbeat dashboard: "Using SVG in your web app."
TweetFollow @tomg