fbpx

How to develop your dashboard design process

How to develop your dashboard design process

When you spend a lot of time building dashboards, you tend to develop an approach or ways that make it easy to create the next one. After a while, you realize there are always ways to improve your design process in general.

A while ago, I wrote a blog post about implementing the best practices in your dashboards. In that post, I took apart the excel dashboard below and showed ways it could be improved. In the post, I also spoke about how there was no flow in the dashboard because we have information about sales and customer satisfaction thrown together.

In this post, I will rebuild this Excel dashboard using the Superstore data set with a focus on the Sales information. Below is a walkthrough of my thought process in recreating it to meet dashboard design best practices.

PROCESS

Document requirements

The first thing I do before starting out any development work is to capture the relevant information needed to design and build the dashboard. For this dashboard, I came up with the requirements from the existing Excel dashboard.

I wanted to create a Sales dashboard that a user can easily read to find out how well the business is performing right away, focusing on metrics such as Sales, Order Quantity and Shipping Cost.

Make sketches

Before I build dashboards, I like to have a basic idea of what it should look like. I usually sketch out the design to make it easy when I start to build. Below are some of my attempts at sketching out the design and although my sketching skills are not so great, it makes it easier for me get the layout the way I want as well the chart types I want to use.

Another reason why I love to sketch is that it helps me to avoid over clutter. In the examples above, I restricted the chart types to just 3; bar charts, line charts, and donut/ gauge charts.

Choose chart types and analysis

It is important to select the correct chart types for your views. There are 3 major metrics that are analyzed in the original Excel dashboard. I kept it the same for the makeover dashboard but divided them into sections that made the analysis easy to understand and read.

It is always good to know what type of analysis you want to perform and the type of charts that are best suited for communicating the insights you discover. This is the stage to ask the questions I want answers to. For example, how do Sales perform in each region?

Divide the dashboard into sections 

I decided to divide the makeover dashboard into 4 major sections; the KPI section, the bar charts to analyze categorical data, line charts to show the various trends and gauge charts to compare performance in the various segments.

Having an idea of what views to include allows you to save a lot of time in the development process.

Build your views

  • KPI Charts

Using BANs is a cool way to show KPIs that lets you track right away how well your business is performing. You can simply build this by selecting the various dimensions and using the Show Me text table option or simply use the Measure Names and Values to build this.

You can check out this excellent post by Tableau zen master Steve Wexler that recommends the use of BANs in our dashboards and the reasons for that.

  • Bar charts

I created this view to show how the major metrics being analyzed compared in the various regions. I put labels on top of the charts and placed them in boxes to easily show that there are 3 separate metrics being looked at here.

You can build this horizontal chart in Tableau by placing the dimension field, in this case, Region, on the Row Shelf and the measure or metric (Sales) on the Column Shelf.

  • Line Charts

A line chart is the best way to display the trend of the metrics you want to measure. In this view, the Sales is plotted against the Week of the order dates. Just as I did with the bar charts, I put labels on top of the line charts and put them into separate boxes to make it easy to know what trend you’re looking at.

  • Gauge charts

The last view I built was the gauge chart. I wanted a cool way to show what the percentage of Sales were in each customer segment. Initially, I had decided on a donut chart but this did not look good in the final view the way I imagined it.

Since I wanted them to be displayed in a vertical format, I settled on using the multiple gauge chart. You can check out my detailed blog post on how to build a multiple gauge chart here.

Bring it all together

After creating all the views, the next most important step is how to put them together on the dashboard to make it both appealing and functional. You can achieve this by considering the following options below;

  •  Select a layout and arrangement

Since I had already sketched the layout of my dashboard, arranging the various views on the dashboard becomes a lot easier. It is best practice to design your dashboard to a grid layout. 

Before I start placing my charts on the dashboard, I use layout containers to create boxes for them as shown below. For this dashboard, I used a 1500 x 900 layout.

  • Do some formatting

After creating views, I like to remove all grid lines from the charts to make them look clean. I also remove the borders from the individual charts and use the layout containers instead or sometimes just leave the borders around the chart as-is and not use a border around the container.

  • Use dashboard actions for interactivity

I decided to use dashboard actions to filter the charts based on a region bar clicked. Dashboard actions can be implemented using the Dashboard menu. To create a dashboard action, click on the Dashboard menu from your dashboard and select Dashboard actions. In the dialog box select the filter option and select the sheets to apply the actions on.

  • Include the necessary filters

The other interactive feature I used was a parameter that filters the dashboard based on the current month, last quarter and last 12 months. Below are the steps I used to create this filter.

First, I created a parameter to use as a reference date to create the various calculations against. I used this to be able to select what my current date was.

After creating this parameter, I created the various calculations for the current month, last quarter and last 12 months.

After this, I created this date range parameter

And then a calculation to link the date range parameter and the various date ranges i.e. current month, last quarter and last 12 months.

On the dashboard, I placed the Date range filter on the top right-hand side of the dashboard to let users know it is a global filter. Click here to view the interactive version of the dashboard.

Conclusion

In all, having a process helps make the dashboard development process easy and structured. Now on to you readers, what do you think about the makeover of the Excel dashboard? Is there anything you want to add or take away? Please leave your comments below.