Hat Management System

Internal Tool – HR & IT Integration Platform

Overview

We created the Hat Management System to make internal operations smoother by bringing all organizational roles—what we call “hats”—into one place. This platform connects HR and IT data, making it easier for teams to manage roles, see who’s responsible for what, and keep everyone aligned. Our focus was on turning complex processes into a simple, scalable interface that adapts to the company’s changing needs.

The Company

This system was built for a large organization with many teams and constantly shifting responsibilities. Here, a “hat” means any position or task assigned to an employee. With hundreds of roles spread across different departments and regions, the company needed a clear, reliable way to manage its hierarchy, cut down on duplicate work, and make accountability transparent.

The Problem

Before the Hat Management System, the company struggled with:

  • No single platform for creating roles or assigning people to them.
  • Unclear reporting lines and responsibilities.
  • Manual processes—spreadsheets and isolated data—that led to mistakes.
  • No easy way to audit roles or see which positions were unfilled.

Solution

  • To tackle these challenges, we created a system that offers:
    • Dashboard with KPIs: Real-time stats like Total Active Personnel, Total Active Hats, Unassigned Personnel, and Hats Held From Above—pulled directly from live databases.
    • Tasklist System: Tasks grouped by categories such as New Hire, Termination, and Transfers, updated in real time from the HR API, with clear visual cues for action.
  • Visual Feedback: Line and pie charts show workforce distribution and trends, helping managers quickly understand the big picture.
  • Hat Management Tools: Easy creation, assignment, editing, and tracking of hats, with all relevant details and documents in one place.
  • Hatting Chart: An interactive org chart that shows roles, reporting lines, and who’s assigned where—perfect for leadership reviews and audits.

Process

1. User Research: Talked to HR and IT stakeholders to understand their daily routines and pain points. Identified key users—hatting specialists, managers, and executives—and gathered their stories to shape the design.

2. Information Architecture and Navigation: Built a sidebar navigation that groups actions logically, making it easy to find what you need. Designed for scalability, so it works for multiple teams and divisions.

3. Wireframing and Prototyping: Sketched out low-fidelity wireframes and mapped user flows. Prototyped in Figma, adding dynamic overlays for actions like “Edit Hat” and “Create Hat.” Included positive feedback states like “No tasks to complete” and “You’re Amazing!” to keep users motivated.

4. Visual Design: Used a clean, accessible UI with clear icons, color-coded statuses, and a strong visual hierarchy. Consistent spacing and layout grids keep everything organized and easy on the eyes. Accessibility was a priority, with keyboard navigation and high-contrast elements throughout.

5. Training and Enablement: Led multiple training sessions with the team leaders and main users responsible for the software. These sessions were designed to ensure they felt confident using the system and could answer any questions from their teams. For example, I created detailed training materials and walkthrough slides of the interface—to cover every feature and possible scenario users might encounter

6. Development and Launch: Worked closely with developers to make sure everything—from parent-child hat logic to status badges and task sorting—worked as intended. Delivered final UI kits and documentation through Figma for a smooth handoff.

Impact

The Hat Management System brought much-needed clarity and automation to role management. Results included:

  • Over 90% of personnel successfully assigned to a primary hat.
  • Real-time metrics now available to executives and managers.
  • Faster task resolution across HR and IT teams.
  • Better visibility into the company’s structure and reporting lines.

More of the project