Behind the scenes of a dashboard design

I look forward to articles like this that try to dive into why certain visual design decisions were made. For next time, I think this article would have benefited from more pictures to explain what you explained in words. For example, I think all of these pieces would have been better explained by a picture instead:

For those first few days when the context is empty, we decided the tooltip would say Chartbeat is still learning about your site.
When a value is above or below that mean by a certain multiple of the standard deviation, we label it as good or bad.
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.
When you hover over the metric suggested actions will appear.

Trying to describe any of those with words only makes it very hard to figure out what the actual visual design decisions were, and instead made me just start skimming.

And then the other thing I wish this article had was more of the decisions that led to the final design. You hint at having tried a lot of different variations, but they don't get displayed at all, which is a shame because that's where the real learning process is (for you and the reader).

Anyways, cool take on displaying just enough information to convey the right message without overloading the page!

tomger3• 13 years ago

Thanks Ian! That's really good feedback. I completely agree, I hope to record more design steps/decisions to have a better base for this type of article in the future.

Behind the scenes of a dashboard design

Related Stories