Here's how I designed this dashboard
I just explained how I did it and how I believe you can do it too! TL;DR: There is a summary at the end!
A couple of days ago, one of my friends asked me how I designed this dashboard. I remember when I first wanted to design a dashboard. I was so confused. I read a lot about dashboards, and I saw a lot of examples. And finally, I designed this dashboard. The feedbacks were great.
I’m not an expert in this, but this is how I did it.
Some basic points:
What is a dashboard?
A dashboard is a screen that lets users make decisions.
What should a dashboard do?
It should aggregate the data in a simple way. It should facilitate the decision-making process. But, let’s be honest, there are often managers who don’t use our dashboards the way we think! So make sure to put a place where they can download their data.
You need to know 3 things when you are designing dashboards.
Data
It is the most important part of a dashboard. You need to know what types of data you are dealing with. And you should search for the best ways to visualize them.
Step 1: Write all the data you want to show.
Step 2: Try to cluster it. (you can use card sorting in 👇 this article; I talked about it)
Step 3: Put your categories on Left Navigation.
Step 4: Put your subcategories as sections on each page.
Keep in mind that if you put more than 12 sections under each category, it is impossible to show all of them on one screen. And, the scroll is not an option here, my friend!
If you have no other option, you can add a customization panel. In this panel, users choose their priority between items. And only 12 prioritized items will be shown on a screen.
Step 5: Find the best visualization options.
I’m not gonna lie to you. It is difficult, and you might need to know a little bit about data visualization in general. But, for starters, you can redesign a dashboard that already has the data. Or be specific about the system you want to design and search about their data and how they visualize it the most.
🎨 In my example, I saw many CRM examples and tried to learn about their data and visualizations. Then I put all the important graphs in one section named Graphs. In more complicated systems, this might not work, and your sections might be Email charts or SMS charts, etc.
It totally depends on your system and data and the amount of information you want to obtain from that data.
Layout
After you figure out how many sections you have, you can design the layout.
Navigation Drawer
First, We need a navigation drawer to help the user access different system parts. We choose what type of navigation drawer we need. There are multiple designs available for the navigation drawer. You can see them at👇 this link:
🎨 My navigation is standard. Keep in mind that this navigation bar can be collapsed. This enhances the space for sections on the screen. You can scale the sections in this situation.
If you had more than 12 sections, you might be able to add more items to the priority list. But it depends on the data and users. And you might have to conduct usability testing for that.
Header Space
Second, we define the header space. The header is a space where we can add profile details, notifications, etc.
🎨My case is a simple example that doesn’t have the header, and I put the profile section on the Navigation bar.
Body
Third, we define the space that is left. And finally, we put our data there.
🎨 I had 9 sections. First, I defined the overall margin.
🎨 Then, I created 6 rectangles in that margin. I used the XD repeat grid. This was very challenging to decide what chart could be put in what section.
🎨 I knew I had 2 pie charts, 1 bar chart, 1 area chart, and 1 line chart. I also had 4 metrics. I created a long section for the line chart in the middle. I put my 2 pie charts next to each other beneath the line chart.
🎨 I had 2 sections to the left to put my 2 other charts and a blank space on top to put my metrics.
🎨 It wasn’t easy, and I did multiple trials and errors until I could make it work. 🥲
Color
There is no need to talk about the importance of color!
Here are the resources that I used:
Grabient: For finding gradients.
Adobe Color: For finding matching colors.
https://color.adobe.com/create/color-wheel
Material Color: Overall idea of how colors work together.
Summary
Here’s the summary of how I designed it.
Here you go! That’s how I did it. If you think it was helpful, Feel free to share this article with any of your friends. 😊
💭 Comment below if you’ve any questions or suggestions. I like to see your dashboards. you can tag me on Twitter by @sepidy.
If you liked this article, please give it a clap.👏🏼 You can follow and subscribe to my email list to get notified when the next helpful article is out.
References
This is a little bit more advanced, and it is a great article.
