Power BI is an interactive business analytics tool, not a visual design tool. Even though this statement is true, I was inspired to see how I could maximize what Power BI offers to make a visually appealing dashboard.

Over the past few weeks I was given the opportunity to focus on designing the user interface (UI) for a Power BI dashboard. This dashboard will be used by clients to view the readiness to move and costs to operate their applications in Microsoft Azure. This tool helps the client visually separate every component that will be moved to the cloud to better understand the project scope, but most importantly, where the costs coming from.

The Challenge

To organize all the information related to each individual application, environment, and machine.

The Result

Cloud Economic Assessment Power BI Dashboard (CEA)

Step 1: Create a Navigation Header

Navigation headers are everywhere! On every phone, on smart TVs, and every website. They are a staple, which means every potential user knows how to interact with them. This is the reason why I added it to this Power BI dashboard. Creating a navigation header provides a few other benefits as well.

Branding awareness

The header is always at the top. This is prime real estate to include the company logo and branding colors. The header gives the dashboard an identity, the same way a letterhead would on a piece of paper.

How did I build the header?

For the background of the header, I simply used a rectangle tool. To find the rectangle, select Home tab, Shapes menu, then choose Rectangle.

To insert the company logo, either copy paste from another source or if it is from a file, click the Image button (above the Shapes menu).

To insert text as the title of the dashboard, click Text box and type the text in the newly added box.

Step 2: Adding buttons to the header

Buttons are just as important as the header itself. The buttons help simulate a website experience, even though this is just a Power BI dashboard. The buttons offer more purpose than a simple clickable object.

Easy organization and order

The buttons on the header provide a chronological order of which the pages should be visited. This allows the user to easily page through the dashboard. Having one button as an accent helps signal to the user which page is currently being visited.  

How did I build the buttons?

Creating the navigation buttons requires some creativity. To start, create a rectangle shape just like the background of the header. Next, create a bookmark to map the button. To create a bookmark, click the View tab, and select the Bookmarks Pane checkmark. Navigate to the page to be bookmarked, then click Add in the bookmarks pane. Right click on the new bookmark and click update. I suggest renaming the bookmark to help keep the bookmarks organized. Clicking on the newly added rectangle reveals the Visualizations side pane. Inside the Visualizations side pane, click on Action. Be sure to toggle action to On, select Bookmark under the Type dropdown, and select Summary in the Bookmark dropdown. Continue following this paragraph until every page is mapped to a button. After mapping each button, style it with the many options in the visualization tab (Outline, Fill, Button Text).

Step 3: Boxing information

Using boxes in your design helps segment and group information that is related. This helps a user’s eye from wandering for relevant information.

The screen showed in this image highlights the different components of a machine that will be moving to Azure from an on-premise solution. Using the boxes, I was able to separate Azure Migrate recommendations as well as current hardware specs. Including all this data helps explain the reasoning behind the calculations and recommendations from Azure Migrate.

What do the colors provide?

This page is busy. Boxes helped provide a way to segment the related information but help direct the eye to the important info (at the top-right). Making the text larger for more important data points also helps draw the eye.

How did I build the boxes?

The boxes are made up of more rectangle shapes with the fill option turned off. The weight of the outline is default and the color of the outline is matched to the color of the header, to create consistency across the page.

Step 4: Use brand colors

Brand colors help tie the whole dashboard together. From the navigation bar, to the boxes, everything matching creates an experience that belongs together.

What does it provide?

Colors provide the accent to know if a button is selected or not. Colors provide the brand’s look and feel, that way the experience feels familiar and thought out. In the case of this example, Concurrency’s colors are familiar on the dashboard as they are seen on the website and in the logo itself.

What tools were used to accomplish this?

Each object can customize its colors. Look for fill or line color dropdowns in the Visualizations pane. To create customizable button menus like shown in the image above, choose Chiclet Slicer when selecting a visualization format. The Chiclet Slicer allows for selected colors, unselected colors, and hover covers. This allows for high customization to fit a brand’s color scheme.

Step 5: Show off your finished Power BI dashboard

Now that the dashboard is finished, show it off to the client and get feedback. I’m sure the client is going to enjoy the beautiful design. This is also the best part about Power BI, the ability to receive feedback and the ability to update the dashboard easily.

I encourage everyone reading to use this blog as an outline to spice up your Power BI dashboards and to help them stand out from the crowd.