Crafting the IBM HR Dashboard: From Data to Design

This is the third part of a 3 parts project, you can find the full project here.

You can have a look at the first part here: Data Modeling and the second part here: DAX Formulas.
If you want to have access to the full Power BI file (with model, DAX and visualizations), contact me here.

• The end-to-end process of designing and building the dashboard.
• Key DAX formulas used to calculate HR metrics.
• How UX/UI principles shaped the dashboard design.
• Practical decisions to optimize user interaction and ensure data clarity.

From Concept to Creation

Step 1: Starting With Raw Data

The foundation of this project lays in understanding the problem and organizing the data effectively.
My initial steps included:

• Defining Metrics: Identifying essential KPIs like headcount, attrition rate, average salary, and tenure.
• Cleaning and Structuring Data: Ensuring data integrity and readiness for analysis in Power BI.
• Creating Basic Visuals: Prototyping the visualizations to determine the best ways to present insights.

This stage was crucial for ensuring that the final dashboard would answer the key questions HR stakeholders care about in a one page dashboard.

Step 2: UX/UI Design in Figma

Figma is a cloud-based design tool widely used for prototyping and creating user interfaces. Unlike Power BI, which focuses on data visualization and analytics, Figma excels at providing a flexible space for designing and iterating on layouts and visuals.

By using Figma first, I was able to focus entirely on creating a visually cohesive and user-friendly layout, which I then translated into Power BI for functionality and interactivity.

Designing in Figma allowed me to prototype a user-friendly dashboard before implementing it in Power BI. The goals here were to:

• Establish a Consistent Layout: Using grids to align KPI cards, charts, and filters for a structured and professional look.
• Choose a Warm, Accessible Palette: Selecting a brown-beige theme to convey professionalism while ensuring contrast for readability.
• Add Depth and Focus: Incorporating subtle shadows and spacing to make key elements stand out.
• Plan for Scalability: Designing a layout flexible enough to accommodate future metrics or updates.

This step emphasized the importance of viewing the dashboard from the user’s perspective, ensuring every design choice served functionality and clarity.

Explore the finished design directly on Figma, here.

Step 3: Integrating Icons and Visuals

After finalizing the layout in Figma, I created custom icons in PowerPoint to ensure maximum resolution. Each icon was designed to represent its respective metric clearly and effectively. The icons were then seamlessly integrated into Power BI, enhancing the visual appeal and making the metrics easier to interpret.

PowerPoint played a key role in this stage of the project. I chose PowerPoint to create the icons because of its flexibility and ability to export high-resolution visuals, which ensured that the final dashboard looked polished and professional. Each icon was designed to represent its respective metric clearly, using simple shapes and symbols that aligned with the dashboard’s overall aesthetic.

Explaining the Dashboard

The finished dashboard includes multiple interactive elements and graphs. In this section I will explain how each part works, with the name of the DAX formula used, created in the second part of this project.

KPI Cards

Each card highlights a critical HR metric, with icons to enhance quick comprehension.

• Headcount: Total number of employees.
  • Formula Name: Employee Count.
  • Icon: Group of people.

• Attrition Rate: Percentage of employees who left.
  • Formula Name: Attrition Rate.
  • Icon: Door and an arrow symbolizing turnover.

• Gender Balance Score: Ratio of male to female employees.
  • Formula Name: Gender Balance Score.
  • Icon: Male and female symbols.

• Average Salary: Mean salary across the organization.
  • Formula Name: AVG Salary.
  • Icon: Banknotes.

• Average Tenure: Average length of employment.
  • Formula Name: AVG Tenure.
  • Icon: Clock symbolizing time.

Age Distribution

A bar chart visualizes employees categorized by age groups (e.g., under 25, 25-35).

• Formula Name: Age Bracket (calculated column).
• Insight: Most employees fall into the 25-35 age group.

Gender Distribution

A pie chart illustrates the gender split in the organization.

• Formula Name: Male Percentage, Female Percentage, Employee Count.
• Insight: 60% of employees are male, and 40% are female.

Job Level Distribution

A stacked bar chart displays the distribution of employees by job level.

• Formula Name: JobLevel Count (not DAX ), Employee Count.
• Insight: Most employees are at job levels 1 and 2.

Employee Count per Department

This column chart shows the number of employees in each department.

• Formula Name: Department (not DAX), Employee Count.
• Insight: Research & Development has the largest headcount.

Attrition Rate per Department

A bar chart visualizes attrition rates across departments.

• Formula Name: Department (not DAX), Attrition Rate.
• Insight: Sales experiences the highest attrition rate at 20.63%.

Satisfaction Scores

A table presents satisfaction scores by department and role.

• Formula Name: Employee Satisfaction Score.
• Insight: Human Resources reports the highest satisfaction score at 2.82.

Salary Distribution

This horizontal bar chart categorizes employees by salary range (e.g., $3,000-$6,000).

• Formula Name: Salary Distribution (calculated column).
• Insight: The $3,000-$6,000 range has the highest number of employees.

Filter Interactions

Filters for department and role do not affect “Employee Count by Department,” “Attrition Rate by Department,” and “Satisfaction Scores.” This ensures data integrity when analyzing these metrics.

A note under these visuals states: “Graph is not affected by filters,” providing users with clear guidance.

Conclusion