Dashboards/Reporting

Power BI Dashboards

Custom Dashboard Designs

Executive Product Dashboard - Power BI

The primary goal of this project was to synthesize the data and offer design recommendations for a security dashboard. This dashboard consolidates information from multiple platforms and applications, allowing product owners and ELT members to understand the implications of vulnerabilities within their systems

Overall Goals of the Dashboard

Goals

The primary goal of the dashboard was to enable product owners to view multiple metrics from various tools, such as SonarQube, Jira, and others, which periodically scan their products. This data was then consolidated and displayed in a Power BI dashboard.

Power BI facilitated rapid development, seamlessly integrated with our tools via APIs, and offered a cost-efficient solution for creating the dashboard.

Noted down some of the important goals which were spoken

Goals of the Dashboard

Centralized Data View: Consolidate metrics from multiple tools (e.g., SonarQube, Jira) into a single, unified dashboard for easier tracking and monitoring.
Vulnerability Tracking: Enable product owners to quickly identify and understand the vulnerabilities in their applications or platforms
Actionable Insights: Offer clear and actionable insights by highlighting critical issues, enabling faster decision-making and response.
User-Friendly Interface: Design an intuitive dashboard that allows non-technical users, such as product owners and ELT members, to easily interpret complex data.

Before Design

Before Design Consultation

Product owners and Power BI developers collaborated over a period of time to create an initial working draft, which was then reviewed by the primary users, generating a wave of feedback.

Over the course of development, several key aspects were successfully implemented:

Integrating the APIs and connecting the necessary tools.
Conducting initial research with product owners to identify the specific metrics they wanted to track.
Configuring the APIs to ensure the required metrics were retrieved from the tools.
Developing a tile-based view that dynamically adjusts based on the platform and implementation selected by the user.

Why Design Consultation.

Feedback from the owners and management team highlighted several key issues with the dashboard:

Cluttered Layout: The dashboard was too congested, with excessive elements on the screen, making it challenging for users to focus on essential information.
Lack of Visual Hierarchy: There was no clear differentiation between high-priority metrics and secondary data, leading to confusion when users attempted to quickly identify key insights.
Poor Aesthetic Appeal: The visual design was outdated and inconsistent, lacking polish, which made the dashboard less engaging and more difficult to navigate.
Limited Customization: Users had minimal control over data presentation, such as filtering or customizing views according to specific needs or platforms.
Inefficient Use of Space: The dashboard did not utilize screen space effectively, with some areas being overcrowded while others were unnecessarily empty.

Due to these issues, the team decided it would be best to consult with designers to address these problems and ensure the dashboard is scalable for future needs.

Process

Working through the Process

I began by establishing a clear process to guide the team through the design consultation. This involved outlining how we would approach the project, including the steps and communication channels to ensure alignment across all stakeholders.

After agreeing on the plan, we scheduled sessions with the key participants—users, Power BI developers, and product owners—to gather insights and ensure that all perspectives were considered. These discussions helped us identify user needs, technical limitations, and design opportunities, setting the foundation for an effective, user-centered design solution.

Constraits of Power BI

The first step of the project was to understand the constraints of Power BI from the developers' perspective. This was critical in ensuring that the final dashboard design would not only be visually appealing but also technically feasible.

Several key constraints were identified during this phase:

Customizing Power BI’s built-in visuals fully without third-party tools is challenging and may affect performance.
Large datasets can slow dashboards if not optimized for data size and complexity.
The grid-based layout limits flexibility for highly customized designs without workarounds.
Implementing advanced interactions can be complex, restricting dynamic user exploration.
Real-time data integration may face latency issues, especially with multiple platforms and large datasets.
Power BI dashboards can struggle with responsiveness on mobile devices, limiting accessibility.

Ideation & Research

Research & Ideation - Steps

Step 1: Initial Research and Consultation

Reviewed the initial research provided by the team to understand the current dashboard’s context and identified key areas for improvement.
Engaged in discussions with product owners and stakeholders to showcase and clarify the metrics that are critical for their needs. This helped gather additional insights and requirements.

Step 2: Affinity Mapping

Created an affinity map to systematically group related information and metrics. This process involved organizing the data into categories to identify patterns and relationships.
This exercise aimed to streamline the dashboard’s content by ensuring that related metrics are displayed together, enhancing overall coherence and usability.

Step 3: Chart & Metric Correlation

Analyzed the metrics to determine which types of charts or visualizations would best represent each one. This involved matching data types with the most effective chart formats to ensure clarity and accuracy.
Focused on selecting chart types that would facilitate quick understanding and effective communication of key insights.

Step 4: Displaying Actionable Insights

Developed strategies for presenting actionable insights in the dashboard tiles in a way that goes beyond color coding. This included using visual elements such as icons, text labels, and interactive features to highlight important information.
Ensured that the insights were clear and accessible, enabling users to quickly grasp and act on the information.

Step 5: Dashboard Design Implementation

Designed the dashboard incorporating the chosen brand colors and font guidelines to maintain consistency with the company’s visual identity.
Ensured that the design was not only aesthetically pleasing but also functional, adhering to best practices in user interface design to enhance usability and engagement.

After Design

After Design Consultation

We began by establishing a clear process to guide the team through the design consultation. This involved outlining how we would approach the project, including the steps and communication channels to ensure alignment across all stakeholders.

Displaying Actionable Insights

Before: The status indicators for Critical, Warning, or Passed were displayed using a color strip. This approach not only increased the learning curve for users but also posed accessibility challenges, particularly for color-blind users.
After: We implemented a severity level indicator directly in the heading of each tile, making it easier for users to understand the status at a glance. Additionally, we provided a range that correlates with the vulnerabilities, aligning with the corresponding data visualizations.

Chart & Metric Correlation

Before: The graphs used in certain tiles did not effectively align with the metrics they were intended to represent. For example, the JIRA metric for tracking defects over time was displayed using a bar graph, which is not the most appropriate or commonly used chart type for this kind of data.
After: We scheduled a consultation with a data analyst to better understand the correlation between the metrics and the most suitable graphs types. This collaboration ensured that we selected charts that are more commonly used and intuitive for representing the data. In the example mentioned, we replaced the bar graph with a line chart, which is a more appropriate choice for showcasing trends in defects over a specific period. Additionally, the line graph was made interactive, allowing users to delve deeper into the data for the selected timeframe, thus improving both the accuracy of data representation and user engagement.

Cluttered Layout

Before: Each metric was displayed in its own separate tile, which significantly increased the amount of space used on the dashboard. This approach led to a cluttered layout, making it difficult for users to navigate and quickly find the information they needed.
After: We re-evaluated the layout and opted to group certain related graphs together, but only when it made logical sense for the users. For instance, we combined the Defects vs. Leakage charts into a single tile, as users typically viewed these metrics collectively. This strategic grouping not only reduced visual clutter but also enhanced the dashboard's susability by presenting related data in a more cohesive and accessible manner. The overall result is a cleaner, more organized dashboard that allows users to quickly access and analyze the information that matters most to them.

Structure & Visual Aesthetic

Before: The dashboard lacked a clear layout or hierarchy, leading to a disorganized presentation of information. Additionally, the visuals were quite basic and did not incorporate the company's brand colors or adhere to brand guidelines, which made the design feel generic and disconnected from the overall corporate identity.
After: We restructured the dashboard to create a more organized and visually appealing layout. One of the key improvements was the separation of information by placing the filters in a dedicated left panel, which helped in decluttering the main content area and provided a clearer, more intuitive navigation structure. Following this restructuring, we ensured that all visual elements, including graphs and legends, were aligned with the company's brand guidelines. This involved incorporating the official brand colors, fonts, and design elements, resulting in a more polished and cohesive look that not only enhances user experience but also reinforces the brand's identity across the dashboard.

Conclusion

Designing the Power BI dashboard presented a significant challenge, particularly in understanding the constraints and collaborating closely with the development team. However, through strong teamwork and communication, we successfully produced an impressive first workable version. This initial release serves as a solid foundation that our developers can build upon, adding more tiles and features as the dashboard evolves and scales.

As we concluded our consultation, we provided the team with several key recommendations to ensure the dashboard remains effective and user-friendly as it grows:

Limit Tiles per Page: We advised keeping the number of tiles to a maximum of eight per page. This helps maintain clarity and ensures that users are not overwhelmed by too much information at once.
Segregate Content Across Pages: If the number of tiles exceeds eight, we recommended splitting them across different pages. This should be done strategically, with content segregated based on specific tools or categories, allowing users to navigate easily between related sets of data.
Create a High-Level Summary Page: For senior executives, such as those at the CXO level, we suggested creating a high-level summary page. This page would provide a concise overview of key metrics and insights without the need to delve into detailed graphs, enabling quick decision-making without overwhelming them with too much granular data.

These guidelines are designed to ensure the dashboard remains scalable, user-friendly, and aligned with the varying needs of its users as the project continues to develop.