Designing a Sexy Dashboard

Surprisingly, good dashboards have a lot of in common with a perfect partner. Smart, frank, simple, charming, and… sexy. I realize this might sound a bit stupid, but… come on :)

The only problem with the significant others — they are so damn hard to find. And there’s no way around. Dashboards, however, are hand crafted and you are free to redesign them as you wish.

Having thought about it for a while, I started looking for “the one” design I truly wanted to iterate on. So please meet Geckoboard. The company I fell in love at first sight. I don’t work for these guys and they’re not paying me anything to say kind words. They are building a great product that needs no explanation. Sometimes it’s that simple.

For our case study I picked the design made by Peter Thomas, Product Designer at Geckoboard.

Designed by Peter Thomas for Geckoboard.

For the record, this is not an attempt to redesign Peter’s work. He’s done a fantastic job. And clearly he’s got much more perspective than me on the company’s business, mission and goals. What I did is an attempt to understand how dashboards are designed and share with you what I’ve discovered.

Let’s get started.

Define what you want

At first we’re setting our basics:

1. Key audience: Sales & Marketing.
2. Dashboard type: Strategic / Executive. Should provide KPIs to be tracked daily, monthly, yearly. If you want to learn more about dashboard types, I recommend this article.
3. Key metrics: visitors, signups, conversion rate, leaderboard, plans, team sales, sales today /month/ total.
4. Use cases: HD/4K TVs.

Group into sections

Grab your pencil and sketch out the layout before you even open your computer

Personally I use printable UI prototypes made by “Sidecar” that I bought here for $3. But basically any piece of paper will do.

At first, create a 6x3 grid of similar blocks. Then assign fair quantity of blocks to each section. In our case: 2 for Leaderboard, 1 for Plans, 3 for Visitors/Signups, 1 for Average Conversion Rate, 1 for Sales Today, 3 for Monthly Sales, 1 for Average Sales/Month, 1 for MRR, 3 for Team Sales, 1 for Average Team Sales/Month, 1 for Sales Total.

We need to ensure that logically connected data is displayed next to each other:

1. Leaderboard goes with Plans. That accounts to 3 blocks in total, so we’ll set them vertically.
2. Conversion pipeline should preferably be displayed in one single line. Which means we’re grouping Visitors/Signups + Average Conversion Rate + Sales Today. We do not have enough space to show them vertically, so we’ll stick to the horizontal layout.
3. Monthly Sales groups well with Average Monthly Sales + MRR. We’ll display them horizontally under the conversion pipeline. It’s going to be a chronological continuation of the Sales Today section.
4. Team Sales goes perfectly well with Average Team Sales.
5. And finally Sales Total should be located in the bottom right corner. Usually it’s the common place for the total price: checks, e-commerce, bills etc. And user will feel very comfortable looking for it here.

Zoom in

Each and every detail matters.

1. Headings are the first place people look at when they are trying to find blocks of information. Let’s differentiate them by adding icons that would enrich the semantics. Cons: there’s a chance that icons would clutter the interface, which is a double evil for dashboards. Pros: headings would be easier to find.
2. Time period should be equal for Visitors/Signups, Monthly Sales and Team Sales. Let’s pick one year for our case study. Cons: too long period of time would make it hard to look for a specific data. Pros: this approach brings in more consistency that allows user to compare different data for a single time period.

3. Axis charts are quite complex blocks. To make them look simple, I suggest the following: 1) alternate color for X axis columns; 2) add dividers for Y axis rows; 3) add quarter indicators in case user wants to compare data for a three-month period. Cons: again, when you add anything to a dashboard, there’s always a chance it will clutter the whole thing; our goal is to find an equilibrium between the clean and informative interface. Pros: additional markers would reduce the time user needs to find the information they are looking for. No one likes how the road signs look like, yet they help you to get to your final destination.

All these suggestions might not work for all dashboard scenarios. Comprehensive A/B testing would show the pros and cons for a given case. My recommendation is the following:

Always trust your gut, yet double-check it with data.

Create a styleguide

Work on your color scheme, fonts and icons

1. We’ll pick a contrasty color scheme: dark background, light letters and vivid sections. This way we’ll ensure the information is distinctive and easy to read. Cons: bright colors might appear to be too striking and distract our users. Pros: bright colors is a good differention point for a wandering eye.

2. I picked Open Sans Light as our primary font. Cons: letters have a standard width, in some cases narrower letters would be more handy for longer lines of text. Pros: the font is crisp and simple, available both for latin and cyrillic, has most of the glyphs and is free.

3. Picking the icons was actually the easiest part. Some of them are custom made and others are from the “Streamline” 4000 icon set — ultimate time saver each designer should consider to have.

Dive into the SketchApp

Finally we are putting all the pieces together. I call it a “Lego Time”.

1. Create a rough UI for each section. It should be quick and easy, as we’ve already agreed on the layout and content.
2. When you’re satisfied how everything is displayed, start polishing things out. Ensure all the elements are consistent and are easy to iterate on. Hint: use SketchApp’s symbols and styles to speed up your process.
3. Close your computer and come back in 1 day. If you don’t like what you see, look up the instructions “1” and “2”. Repeat until you stop hating what you’ve created.

Our final static dashboard.

Create functional animation

Try avoiding surprising transitions. Animate only where it is needed. Not more.

Our final static image looks good. And it’s time to bring it into life. Before we open After Effects let’s discuss what kind of animation we need and how it is going to help our users.

Dashboard consists of multiple data often taken from diverse databases and sources. Hence, it needs some time to upload everything. And it’s our perfect opportunity to use animation.

There are multiple solutions that we can apply: animated pre-loader icon, percentage pre-loader bar, custom waiting message etc. I will try a bit different approach: show an empty dashboard and then display how the data is uploaded. It’s kinda similar to turning on engine in your car and waiting a sec till it picks up the pace.

Let’s dive into details:

1. Leaderboard consists of a single list. Let’s display each line one-by-one.
2. Plans consists of three vertical column charts. Clearly some of them are going to be higher than others, yet I suggest applying the same animation time frame. This way we’ll get the following results: 1) columns would appear simultaneously 2) higher columns would speed up a bit and give users an additional indicator of more successful plans.
3. Visitors/Signups, Monthly Sales, Team Sales have similar axis charts. Let’s animate them with a masked layer. Simple and powerful solution both for us and developers.

P.S. Do not forget about custom easings. They are very easy to apply, yet make a striking difference.

4. Conversion Rate, Sales/Month, Team Sales/Month have nice gauges. User is accustomed to see similar ones in thermometers, cars, audio systems etc. I have spent some time looking at how they behave in the real world: the arrow goes up 20%, slows down and returns back 5–7%, then it goes all the way up to the final index.

5. Sales Today, MRR and Sales Total have simple counters. We’ll apply a regular animation with slider control.

Render and enjoy

And don’t forget to ask your questions or start a discussion. I’m sure there’s still a big room for improvement here.

Our final animated dashboard design.

P.S. If you’re interested in visualising data, here’s a couple of books I strongly recommend written by the legendary Edward Tufte :

1. The Visual Display of Quantitive Data check it here ->
2. Envisioning Information check it here ->

Thank you for hitting the ❤️ button if you enjoyed the article. It will encourage me to SHARE with you more.