Oscar Martinez (Valerock)
Rethinking dashboard design - Part 1: The analytics hub
Updated: Nov 11, 2022
Let's be honest, Power BI Dashboards usually suck, but they don't have to.
Dashboards are not commonly used in Power BI projects, and when they are, we often find them overloaded with too much data and lacking a clear structure, making them confusing and difficult to navigate.
Worse yet, they’re typically designed by analysts who think solely about KPIs, metrics, and data visualizations but often oversee user experience and interface.
It doesn’t have to be this way. With a little bit of creativity and outside-the-box thinking, it is possible to create Power BI dashboards that are both informative and visually appealing. By focusing on basic design principles and storyboarding, you can create dashboards that users will actually use.
The anatomy of the Analytics Hub concept in Power BI.
Inspired by the traditional anatomy of a web page that has been developed and refined over the years, I decided to take a similar approach when designing the analytics hub.
The main idea is to have a clear and well-defined structure that guides users through the dashboard while still allowing for flexibility and customization. As a traditional web page, the analytics hub can be broken down into three main sections: the header, the body, and the footer.
The header typically contains the site's logo as well as links to important pages on the site. In the case of the analytics hub, the header might also include links to different areas of the application, such as reports, dashboards, and data sets.
The body is the main content area of the web page and is where most of the information is presented. The body of a web page is typically divided into one "Hero" and one or more individual content sections:
In modern web design, most of the time, you will find at the top of the page, right below the header, the "hero." A web page hero is an important piece that is meant to grab the user's attention, highlight critical information, and provide them with a quick overview of what the page is about.
The content section of a web page is where the bulk of the information is presented. The content section of the analytics hub is where users will find most of the information. This is typically divided into different areas, each containing its own data.
Within the content areas, we can find Features, CTA, Maps, Testimonials, and many other types of blocks; these areas are highly flexible with the information they can contain and how they are presented.
The footer typically contains information such as the site's copyright notice, contact information, and links to other important pages on the site. In the case of the analytics hub, the footer might also contain links to different resources such as support documentation or training or a social media bar.
Once we have defined the blocks we need, it is time to create the elements in Power BI. The blocks should be made one per Power BI report page; this way, we will have the flexibility to change the order and add or remove blocks as needed without affecting other areas of the dashboard.
When creating the elements, we need to remember a basic brand identity principle: every detail on the page should reflect the company's branding. All colors, fonts, and images should follow the company's style guide.
After the elements have been created, we need to publish the report and piece them together on a single Power BI dashboard by pinning complete live pages.
Case study #LikeABosch
As a case study, I present to you the dashboard I created for my favorite tool company: Bosch. Bosch is a German engineering company that created the brilliant #LikeABosch marketing campaign; based on this campaign and its 2021 results I developed the Power BI Dashboard concept "I analyse data #LikeABosch.
This dashboard was developed with the same theory as the one explained above. It is divided into three main sections: the header, the body, and the footer. The body section contains four different content types, let's take a look at it:
The header contains the Bosch logo and links to different areas of the company, such as Mobility and Industrial Technology.
The body is divided into four blocks: one hero and three individual content blocks.
The hero was inspired by the fantastic advertising campaign #LikeABosh. This hero was created with the support of Canva, an design app that I used for removing the background from the image of Shawn, the main character of the campaign.
The feature block contains information about the different businesses; this is presented in HTML cards with a sliding motion. I already have some experience with HTML cards, but when I knew nothing I hired in UpWork freelancers with HTML and CSS skills.
The CTA (Call To Action) block is meant to encourage users to explore further data of the Bosch group by downloading a PDF with more facts about the company.
Finally, the body ends with a map and more geographically representative numbers.
A simple footer containing a social network bar was added to close this dashboard.