The Ultimate Guide to Storytelling and Dashboard Design with Power BI
The first Impression is the one that lasts
For those who don’t know me, I’m Leonardo Karpinski, and I’ve been teaching Power BI courses and giving lectures since 2016. I’m a Mechanical Engineer with no prior experience in Design.
Many people believe that you need to be a Designer to create spectacular Dashboards. But… If that were the case, I wouldn’t be here writing about it. A few years ago, I was in your shoes, struggling with the visual aspect.
I wrote this material specifically to show you that it is indeed possible to create visually attractive Dashboards with high impact that leave people with that ‘WOW’ effect.
I want to help you overcome that creative block that makes you spend hours deciding which chart to use in each situation, which color, background, and give you several cool tips to avoid the pitfalls that many fall into when creating visuals.
You may have done the most amazing work in the world on Power BI regarding ETL, calculations, modeling, etc., but if you don’t know how to capture attention and impress your audience, all your work will have been in vain. This is where the importance of Storytelling and Data Visualization comes into play.
In this eBook, I’m going to give you a complete guide to creating an INCREDIBLE Dashboard. Oh, and it’s important to note that all the examples were developed in Power BI. That means everything I show here you’ll be able to apply without major issues.
9 Steps to a Successful Dashboard
Creating high-impact visual Dashboards is easier than we think. You don’t need to be a designer to capture users’ attention with your Dashboards. Just follow the 9 steps below, and you too will be able to create amazing solutions:
9 STEPS
1
Identify your audience and purpose
You may have heard of the term “Storytelling.” This word has gained popularity in recent years, but the concept has existed for a very (very) long time. Remember those cave paintings you studied in school? That was how our ancestors passed down information, values, and cultural traditions to new generations – they told stories through those drawings.
Humans have an innate ability to connect with well-told stories.
Anon
But, back to the present day… You must have watched a TED Talk or an exciting commercial on TV or the Internet. What do they have in common? We become completely engrossed in those fantastic stories. Our eyes stay glued, and our hearts race as the video unfolds. Can your dashboard have the same effect on people? Absolutely.
Storytelling applied to data can be defined as the art of constructing a narrative around a set of data to help convey the meaning of that data in a powerful and engaging way.
This huge volume of data available around us needs to be digested by us every day. From the moment you wake up until the moment you go to bed, you are bombarded with information. The attention you give to each piece of information will depend on what you need at that moment and how that information is presented to you. The same happens when you give a presentation at your company – the one you spent days preparing.
Have you ever wondered how much of your presentation was actually absorbed by the audience? Of all those who attended your presentation, how many could stay immersed in it? If your presentation were a YouTube ad that appeared in those initial seconds, would you skip it or watch it until the end?
The same question arises with that report or presentation full of tables and charts you were asked to make. No matter the example, what we know is that if you don’t know how to tell and show a good story, a lot of work may have been in vain.
It may sound strange to talk about Storytelling in Power BI Dashboards since the information changes with each user interaction. Did you filter the period? The value changes, the story changes. Did you click on a point in the graph?! It changes again! Don’t worry about that. What you need to understand here is that you can (and should) use Storytelling resources in your BI projects. This can be summarized as follows:
Attract attention;
Facilitate understanding;
Make it memorable.
Would you tell any story to someone you just met? I imagine not. To know which story to tell, you need to know who is going to listen to it. You need to know your audience.
In the context of Dashboards, keep in mind that the audience is unlikely to be limited to just one type of profile. Different users have different goals and different points of view.
So, knowing that your audience is the top management of a retail company doesn’t guarantee you’ll capture the desired attention. You need to know why this audience needs a Dashboard and to attract attention, you need to have a well-defined purpose. After all, you don’t want to create something irrelevant to your target audience, right?!
If you realize that your target audience has very different profiles and the same level of priority, be careful! You could end up creating a little monster if you try to cater to all of them in a single dashboard.
You can use this checklist of questions initially to get a clearer view of the purpose:
Who is the dashboard’s audience, and what are their needs?
What is the relationship between you and your audience?
What do you want to achieve? Or rather, what problems should we solve with the data?
Is the analysis expected from the Dashboard currently being done? How?
What is already known or imagined about the solution?
Does it make sense to separate the analyses on different pages according to the user profile?
2
Draw a Sketch
Once we have identified who we are building our dashboard for and understand the audience, we need to start getting hands-on. But before jumping into the final report, it’s important to develop a draft of the result expected by the client – this could even be a department within your own company (consider the client here as the end user, your audience).
This is when you should sketch out how each page of the Dashboard will look with your client. I said “sketch” because it’s a low-fidelity drawing, meaning you shouldn’t worry about details like color, icons, interactivity between elements, etc. The focus here is to know which data and which chart will be in each position.
Some people prefer to hold a meeting first to simply write down the information and then make the sketch later, at a more leisurely pace. If you choose to do it this way, keep in mind that a subsequent validation by the client will be necessary. The choice will depend on the project timeline, the maturity level of the client’s expectations, the developer’s preference, the time availability on both sides, etc.
You might be wondering: How am I going to draw this? On paper?
When I worked as a consultant, I used paper, even without knowing how to draw. If you’re not a fan of paper, there’s the option to do this “sketch” in some software of your choice.
Here are a few examples:
To guide your drawing, you can answer some key questions:
- Which Reports/KPIs are considered the most important? Why?
- For each Report/KPI, what are the main dimensions to be used for analysis?
- Will scenario analysis (What-if) be necessary?Will the dashboard/report be exported to PDF? What is the screen size where it will be displayed?
- Is there a color palette to be followed (from the company or client)?
- Are there any colorblind people in the user group?
- Does it make sense to separate the analyses on different pages according to the user profile?
- What level of detail is desired for each metric? Is it necessary to use drill down?
A great tip I always follow is about the arrangement of visuals: always place the most important visuals at the top of the page! Users tend to scan a page following a “Z” pattern.
Without other attention triggers, users will start viewing the page at the top left of the screen (1), and that’s where you’ll need to place the most valuable information on your panel! Next, they’ll move their gaze to the top right (2), then to the bottom left (3), and finally to the bottom right (4). Just imagine a “Z” (zigzag). See in the example below the placement of key numbers at the top of the page.
3
Choose the right visuals
Before talking about visuals, we need to understand what Data Visualization is and its role. Data Visualization is the graphical representation of information and data, and its role is to:
Provide a representation of a data set that helps people perform tasks more efficiently.
Tamara Munzner
When we choose to represent our data in a chart, we are facilitating access to information and its interpretation. This makes decision-making faster and more reliable, as it is much easier to identify patterns and trends in a graphical format. Humans process visual information infinitely faster than text information. Can you imagine having to interpret millions of lines without any charts? That’s a lot of scrolling!
However, simply creating charts isn’t enough. You need to know how to choose the most appropriate charts for the type of information you want to convey and know how to present them in a logical order and format.
After determining your audience and purpose, you need to sketch out what will be developed.
To do this, you need to answer some questions:
- What type of dashboard am I creating?
- What is the central line of thought in my panel’s story?
- What are the key metrics that provide actionable information to users?
- To make it easier to choose visuals, I always like to identify the primary function of the graphical element I want to show. We can think of 4 functions:
Comparison
Distribution
Relationship
Composition
I’ll share two super useful guides to help you choose the right chart (while ours is still in the oven). To download them in PDF, click on the images to be directed to the original source where they were obtained.
https://chart.guide/poster
https://www.sqlbi.com/ref/power-bi-visuals-reference/
I’ve compiled a list of common examples of inappropriate visual choices! Check if you’ve fallen into any of these traps and stay tuned for the tips I give to avoid them in the future!
Comparison
Comparison Between Categories
The axis should start at 0.
This graph is a favorite among newspapers because it is easy to understand for anyone – even those who have never seen a graph in their lives. However, if used incorrectly, it can generate distortions, as in the example below:
Source: Viz Wtf
Remove excesses. Choose only one of the two: values in the label or axis.
Display the values right after the end of the bar to ensure the reader comprehends the differences in value accurately.
Prefer Bar Charts (vertical axis) over Column Charts (horizontal axis) when there are many categories on the axis.
You can use a different color to highlight a specific category to draw the user's attention if necessary. Otherwise, use the same color.
Bar and column charts should be plotted from the largest to the smallest value or in another ordinal order.
Do not use more than 5 categories in a stacked column chart. Use the "Small Multiples" feature in the Column (Horizontal) or Bar (Vertical) Chart instead.
There is no better way to learn to use the correct visuals than by practicing critical thinking with real examples. Remember: there is no perfection, just practice.
So, I ask you to analyze the example below and judge if the visual is 100% in line with what was requested. Try to identify all the problems and mentally propose a solution for each one, okay?
Exercise:
- General Objective: Comparison
- Specific Objective: Compare revenue in Brazilian reais obtained from product sales by State.
Problems Identified:
- Excessive colors and legend.
- The spacing between the bars is too large.
- Categories with long names on the X-axis.
Redundant information: Y-axis and Label. - The label color still doesn’t contrast enough with the background.
- The title text could be improved to align with what was requested.
- Result After Applying the Corrections:
Comparison Over Time
Comparisons over time should be made using charts with time on the X-axis (horizontal). The most recommended charts for this are Line Charts and Column Charts.
Always start the axis at 0 unless you want to describe small variations.
Don’t use more than 4 lines. The same applies to other charts.
Avoid using concatenated labels.
Prefer solid lines.
Composition
Composition - Static
Do not display more than 3 categories. Add a category called "Others" or divide the values into large groups (max 3).
Composition - Over Time
Do not use a Column Chart to show values on a very long X-axis. Avoid horizontal scrolling of the navigation bar.
Relationship
Don’t forget the axis titles.
Distribution
Use bar or column charts to represent the distribution of a variable.
4
Choose a theme and stay consistent
Color Palette
If the person requesting the Dashboard doesn’t have a color palette (brand visual identity), you’ll need to define one. This is where many professionals slip up by choosing “similar” colors randomly or being unaware of the tips I’m about to share.
Conscious use of colors ensures that the user of your panel doesn’t spend extra time processing specific information. The idea is always to facilitate the reading of the chart and draw attention only to what really matters. If you increase the brightness of a color on an element, for example, it will make it appear more important. Or if you use the same color hue on two different elements, you end up showing that they have some connection or relationship.
I’ll show you an example of strategic color use in a People Management Dashboard that I provide in the Complete Course. Notice that each “screen” predominantly uses one color. Each color is associated with a variable: active employees, hires, and terminations.
Swipe to see other screens and click to navigate the Dashboard.
We also have another example of correct color application in the Logistics Dashboard. Note that Gross Revenue, Total Cost, Number of Trips and Result have standard colors that are used throughout the page. This makes it easier for the user to read the information.
On Adobe Color and My Color Space, you can search for ready-made palettes by simply typing your reference color, for example, “Blue.” You can also extract colors from images or even search for trending colors by sector. I suggest exploring at least these first two sites on the list! There’s a lot of cool stuff there!
Coolors is excellent for testing color palettes if you have colorblind users. I wrote a post about this, showing an example here: Dashboards for Colorblind Users.
Typography
Typography is often a forgotten item in Dashboard development. But it can be the difference between a “good” panel and an “excellent” one.
We can divide fonts into serif and sans-serif. A serif is the stroke or bar that appears at the ends of letters. Serif fonts are recommended for more textual content like books and magazines. It is recommended to use sans-serif fonts in smaller texts such as captions and labels.
In Power BI, we have 24 available fonts. Note that Times New Roman, Georgia, and Courier New fonts are serif fonts:
Use bar or column charts to represent the distribution of a variable.
When choosing a font, test it in the online environment – where users will consume the Dashboard! In dashboards, I recommend sans-serif fonts. I often use the DIN and Segoe Bold fonts.
Final tip: Don’t forget the standard! Define the font and size of labels, titles, buttons, etc., and maintain consistency throughout the work. It’s not okay to have a card with font size 22 and another with size 24 in the same information hierarchy. So, be careful to choose a font that works in all the elements you’re using.
5
Create a custom background
On the Xperiun Platform, I provide dozens of editable Backgrounds for students to use in their Dashboards. See an example:
Remember that sketch we did on paper? Well… After getting it approved by the client, defining the color palette and fonts, you can start building your background.
In it, you need to consider everything that will appear on your panel, as well as all navigation functions, because the idea here is to leave as few elements as possible to be added in Power BI. The more “complete” your background is, the less work you’ll have on Power BI Desktop.
Notice that all elements have a certain alignment, shadow, color, and shape pattern… This is very important. I will go into more detail about this shortly.
To develop a Background like the one I showed as an example, you’ll need at least PowerPoint. Yes, you read that right! This beautiful background was made in PowerPoint. You can use Figma, Canvas, Google Slides, etc. You choose! Oh, speaking of Figma, in the Complete Course, you’ll also have a Complete Figma Course from Scratch!
If you want to create a gradient background but are super indecisive or don’t like creating from scratch, there’s UI Gradients and Web Gradients that already offer several ready-made options and allow you to download or copy the HEX of the colors. Summary with the links:
After creating your background, just export it as an image (preferably .SVG to preserve quality) and insert it as the Page Background in Power BI (select the “fit” option). It’s important to remember that the default Power BI page size is 16×9, so make sure the background size you created is correct.
6
Use Icons and Images to Add Context
Many people underestimate the details when developing a dashboard. They don’t care about the button’s shape and what it represents in context, or the images or other visual elements. They think they’re just “decorations.”
You need to be empathetic, that is, put yourself in the user’s shoes. The user needs to have the best experience when navigating your panel. This goes from the first overall impression (those initial 5 seconds) to interaction, where they will click, filter, navigate…
In the example below, we have the Logistics Dashboard where I used images and icons. Notice that the icons are related to their meaning. The user needs to look once to “learn” that this information is associated with that color and image. After that, they no longer need to read the meaning. This creates an easy understanding for the user and increases the chances of adherence.
Another cool example of using images is this one below. This Dashboard was developed by student Jadir Almeida in the People Analytics Dashboard Championship. Notice that the image is related to the panel’s theme, that is, “People.” This Dashboard is also available for download in Bonus 5 of the Complete Course.
There are several sites where you can download icons and images for free. Logo Makr allows you to change the color of the icon before downloading it. Here are some examples:
7
Align Visuals and Pay Attention to Writing
It may seem trivial, but aligning visuals and standardizing the spacing between elements is crucial to ensure an aesthetically pleasing experience for users who will spend hours analyzing that panel. Who hasn’t been annoyed by a crooked picture on the wall?
The best way to achieve perfect alignment and spacing is by using the Grid. Creating Grids involves dividing a proportion of the user’s screen into equal parts with spacing between them.
Applying this spacing, also known as negative space or white space, allows you to maintain order, organization, and emphasis on the panel’s key elements.
Consistency is key here! Set a standard and stick to it!
Define the Grid
You can use Power BI’s default Grid. To enable it, look for the “View” tab and select the “Gridlines” option. But it is somewhat limited.
If you choose to do it in PowerPoint, just create the vertical rectangles (columns) and distribute them horizontally, and the reverse for horizontal rectangles (rows).
If you choose to use Figma, just set the quantity of each in the Layout Grid menu. Optionally, you can also set the margin from which the Grid will be placed.
See an example:
Align the Elements
After defining the Grids, you need to insert the elements so that their edges do not cross the previously defined columns and lines and are aligned with each other. Doing this, you’ll notice that the distance between the elements will be equal.
These white spaces between elements are necessary as they facilitate readability and usability while making your panel elegant. The design community also calls this “negative space.” Notice in the example that the distance between the rectangles is always 17, between the button icons is always 42, and the horizontal distances to the margins are 33 px.
Take Care of the Writing
It’s crucial to check the grammar of all texts in the Dashboard. Nothing looks worse than leaving a chart title with a spelling mistake or forgetting to modify the title that appears automatically. Review as many times as necessary to ensure no errors slip through, okay?
Another very important thing is to define a naming standard for the variables. For example: if you choose to call the monetary value obtained from sales “Total Sales,” try to maintain this standard across all pages of this panel to make life easier for the user.
Also, don’t forget to format the currency when dealing with monetary values and standardize the number of decimal places and thousand separators, okay?
Edit the automatically generated titles and insert the appropriate format for the values.
8
Use References for Inspiration
When I started working with Power BI, I knew nothing about design, and I had to find a way to “learn” to create visually attractive Dashboards for my audience.
The best way to “get the hang” of Dashboard Design is to draw inspiration from references and read this eBook. In the Power BI Experience Course, I provide 26 Dashboards and dozens of templates (backgrounds, icons, etc.). You can start with them since they are fully editable resources.
Here are some of the Dashboards available in the Course:
9
Use and Leverage Power BI's Powerful Visual Resources
There are special features in Power BI that are Oscar-worthy, such as Drill-down, Drill-through, Tooltips, Indicators, Automated Analysis with Artificial Intelligence, Decomposition Tree, Smart Narratives, and much more.
When you are narrating the data, it’s very important that you have already analyzed the information in the Dashboard. The idea of data storytelling is that you show the insights you’ve obtained, not show the user what they “can see.” These special features I mentioned can greatly assist you in this task. Remember: the dashboard is for exploratory and descriptive data analysis. To truly tell stories with data, you need to obtain insights and bring the causes and/or solutions to the problems in the presentation, okay?
To learn how they work, read the two articles below:
Checklist
After finishing your Dashboard, use the summary below to ensure it’s flawless:
Color
- Adequate contrast between background and elements.
- Use the 60-30-10 rule.
Space and Alignment
- Standardized spacing between elements and between elements and margins.
- Alignment of visuals and titles.
Icons
- Legible, simple, and consistent icons.
Charts
- Choose charts and their properties appropriately (color, label, axis, legend, etc.).
Spelling
- Review all text elements.
Usability
- Simplify! The Dashboard should be easy to use.
Accessibility
- Don’t forget to check the size of text elements and color combinations if there are colorblind users. It’s essential to know who will use the Dashboard!
Consistency
- Set a style standard and follow it throughout the Dashboard. This includes color, font, metric names, border effects, shadows, margins, icons, etc.
Want to Learn More About the Topic?
If you’ve made it this far, I imagine you’re eager to apply these learnings to your Dashboards, am I right?
I also imagine you’d like access to the presented Dashboards! On the Xperiun Platform, in addition to more than 30 bonus dashboards, you’ll learn about all these steps in a detailed video step-by-step guide.
To sign up, just click the button below:
Best regards,
Leonardo