Compstack HRMS Redesign
Redesigning an HRMS platform for HR teams managing payroll, people operations, and reporting
Details
Role
Product Designer
Team
Product Designer, Frontend Engineer
Date
March 2024
Overview
Compstack is an HRMS platform for the Moroccan market, combining payroll, employee records, time off, recruitment, expenses, reporting, and compliance.
I joined after the client lost confidence in a previous design direction. The product had grown quickly, but without a consistent structure — patterns were fragmented, workflows felt disconnected, and screens had been designed in isolation.
My role covered both admin-facing and employee-facing experiences.
The Problem
The platform had strong functionality, but lacked coherence — and that made it feel unreliable.
Four issues consistently surfaced:
Navigation didn’t scale — The structure reflected features rather than how HR teams actually work
Workflows had friction — Tasks like payroll and approvals lacked clear progression and feedback
Information lacked hierarchy — Data was present, but hard to scan and act on
Experiences were misaligned — Admin and employee flows felt like separate products
This created two risks:
The team couldn’t move forward confidently
Engineering lacked a reusable foundation to build from
The Challenge
HRMS platforms are inherently complex — multiple user types, high-stakes actions, and interconnected workflows.
The goal wasn’t to fix individual screens, but to create a unified system without oversimplifying the product.
With only six weeks and a large surface area, the work required prioritizing structural changes with the highest cross-product impact.
Why It Mattered
Usability issues in HR software aren’t cosmetic — they directly affect operations.
Unclear workflows can slow payroll, introduce approval errors, and create risk in employee management.
This project was ultimately about confidence:
For admins handling sensitive workflows
For employees using self-service features
For engineers building on a stable system
Research & Insight
Without access to live users, I approached the problem from three angles:
Unclear workflows can slow payroll, introduce approval errors, and create risk in employee management.
Without access to live users, I approached the problem from three angles:
Evaluating what existed
Identifying where workflows broke down
Understanding expectations from modern HRMS tools
Methods included heuristic evaluation, competitive analysis (BambooHR, Rippling, Gusto, Deel, Workday), workflow mapping, and regular reviews with stakeholders and engineers.
Without access to live users, I approached the problem from three angles:
Structure over surface — Fixing architecture would have more impact than refining UI
Overview and detail must coexist — Users need summary and granular data at the same time
High-stakes actions need review states — Speed alone isn’t enough; verification is critical
Shared patterns multiply impact — Improving core components improves the entire system
The Solution
Instead of redesigning modules in isolation, I focused on shared patterns and consistent structures that could scale across the product.
Dashboard
Redesigned as a purposeful command center. Admins can now see what needs attention at a glance — pending approvals, payroll timing, onboarding activity — and move directly into the right workflow.
Employee Management
Employee Management became the core area for understanding workforce information across onboarding, active employment, and offboarding.
The redesign gave this module stronger structure, clearer hierarchy, and more intentional operational actions. Because the work covered both admin-facing and employee-facing surfaces, I also considered how employee information should feel detailed and actionable for HR teams while remaining clear and approachable for employees interacting with their own records.
Payroll
Redesigned payroll as a guided review workflow. Its role was to help teams prepare, verify, and run payroll with confidence. The flow prioritized understanding before action by making it easier to grasp totals, due dates, employee-level details, and compensation changes in a more structured way.
This shifted payroll away from feeling like a raw data surface and toward feeling like a guided operational process.
Time Off
Time Off needed to work for both sides of the product. For admins, the redesign improved visibility into leave requests, statuses, and team planning. For employees, it created a clearer path for requesting time off and understanding balances or approval status.
Bringing both perspectives into the same system helped the module feel more connected and practical.
Recruitment
Clarified recruitment as a pipeline-management experience. Recruitment was repositioned around tracking progress and making decisions.
The redesign made it easier to understand openings, candidate stages, and hiring activity, especially when moving between role-level overviews and candidate-level detail. The goal was to make the flow easier to scan, interpret, and act on.
Supporting Modules
Beyond the platform’s core operational areas, I also redesigned supporting modules including Documents, Expenses, Integrations, and Settings.
I also worked across Documents, Expenses, Integrations, and Settings — supporting areas that were important to the product’s completeness, but needed stronger structure and consistency to feel integrated into the overall system
The redesign made these modules easier to navigate and manage by clarifying priorities, organizing information more intentionally, and aligning them with shared product patterns. This helped reduce fragmentation across the platform and reinforced a more scalable foundation for future growth.
Outcome
The product had not launched by handoff, so I focused outcomes on design and delivery impact rather than live metrics
Unclear workflows can slow payroll, introduce approval errors, and create risk in employee management.
The redesign helped the team:
Restore confidence in the product direction after a previously unsuccessful design phase
Create a more buildable foundation for engineering through clearer, repeatable patterns
Reduce inconsistency across modules, lowering the risk of fragmented implementation as the platform grows
Improve clarity in high-stakes workflows where structure directly supports confidence and accuracy
Align admin-facing and employee-facing experiences into a more cohesive product
In practice, the work did more than improve the interface. It gave the team a clearer system to ship and a more scalable baseline for future modules.
Other Projects
Compstack HRMS Redesign
Redesigning an HRMS platform for HR teams managing payroll, people operations, and reporting
Details
Role
Product Designer
Team
Product Designer, Frontend Engineer
Date
March 2024
Overview
Compstack is an HRMS platform for the Moroccan market, combining payroll, employee records, time off, recruitment, expenses, reporting, and compliance.
I joined after the client lost confidence in a previous design direction. The product had grown quickly, but without a consistent structure — patterns were fragmented, workflows felt disconnected, and screens had been designed in isolation.
My role covered both admin-facing and employee-facing experiences.
The Problem
The platform had strong functionality, but lacked coherence — and that made it feel unreliable.
Four issues consistently surfaced:
Navigation didn’t scale — The structure reflected features rather than how HR teams actually work
Workflows had friction — Tasks like payroll and approvals lacked clear progression and feedback
Information lacked hierarchy — Data was present, but hard to scan and act on
Experiences were misaligned — Admin and employee flows felt like separate products
This created two risks:
The team couldn’t move forward confidently
Engineering lacked a reusable foundation to build from
The Challenge
HRMS platforms are inherently complex — multiple user types, high-stakes actions, and interconnected workflows.
The goal wasn’t to fix individual screens, but to create a unified system without oversimplifying the product.
With only six weeks and a large surface area, the work required prioritizing structural changes with the highest cross-product impact.
Why It Mattered
Usability issues in HR software aren’t cosmetic — they directly affect operations.
Unclear workflows can slow payroll, introduce approval errors, and create risk in employee management.
This project was ultimately about confidence:
For admins handling sensitive workflows
For employees using self-service features
For engineers building on a stable system
Research & Insight
Without access to live users, I approached the problem from three angles:
Unclear workflows can slow payroll, introduce approval errors, and create risk in employee management.
Without access to live users, I approached the problem from three angles:
Evaluating what existed
Identifying where workflows broke down
Understanding expectations from modern HRMS tools
Methods included heuristic evaluation, competitive analysis (BambooHR, Rippling, Gusto, Deel, Workday), workflow mapping, and regular reviews with stakeholders and engineers.
Without access to live users, I approached the problem from three angles:
Structure over surface — Fixing architecture would have more impact than refining UI
Overview and detail must coexist — Users need summary and granular data at the same time
High-stakes actions need review states — Speed alone isn’t enough; verification is critical
Shared patterns multiply impact — Improving core components improves the entire system
The Solution
Instead of redesigning modules in isolation, I focused on shared patterns and consistent structures that could scale across the product.
Dashboard
Redesigned as a purposeful command center. Admins can now see what needs attention at a glance — pending approvals, payroll timing, onboarding activity — and move directly into the right workflow.
Employee Management
Employee Management became the core area for understanding workforce information across onboarding, active employment, and offboarding.
The redesign gave this module stronger structure, clearer hierarchy, and more intentional operational actions. Because the work covered both admin-facing and employee-facing surfaces, I also considered how employee information should feel detailed and actionable for HR teams while remaining clear and approachable for employees interacting with their own records.
Payroll
Redesigned payroll as a guided review workflow. Its role was to help teams prepare, verify, and run payroll with confidence. The flow prioritized understanding before action by making it easier to grasp totals, due dates, employee-level details, and compensation changes in a more structured way.
This shifted payroll away from feeling like a raw data surface and toward feeling like a guided operational process.
Time Off
Time Off needed to work for both sides of the product. For admins, the redesign improved visibility into leave requests, statuses, and team planning. For employees, it created a clearer path for requesting time off and understanding balances or approval status.
Bringing both perspectives into the same system helped the module feel more connected and practical.
Recruitment
Clarified recruitment as a pipeline-management experience. Recruitment was repositioned around tracking progress and making decisions.
The redesign made it easier to understand openings, candidate stages, and hiring activity, especially when moving between role-level overviews and candidate-level detail. The goal was to make the flow easier to scan, interpret, and act on.
Supporting Modules
Beyond the platform’s core operational areas, I also redesigned supporting modules including Documents, Expenses, Integrations, and Settings.
I also worked across Documents, Expenses, Integrations, and Settings — supporting areas that were important to the product’s completeness, but needed stronger structure and consistency to feel integrated into the overall system
The redesign made these modules easier to navigate and manage by clarifying priorities, organizing information more intentionally, and aligning them with shared product patterns. This helped reduce fragmentation across the platform and reinforced a more scalable foundation for future growth.
Outcome
The product had not launched by handoff, so I focused outcomes on design and delivery impact rather than live metrics
Unclear workflows can slow payroll, introduce approval errors, and create risk in employee management.
The redesign helped the team:
Restore confidence in the product direction after a previously unsuccessful design phase
Create a more buildable foundation for engineering through clearer, repeatable patterns
Reduce inconsistency across modules, lowering the risk of fragmented implementation as the platform grows
Improve clarity in high-stakes workflows where structure directly supports confidence and accuracy
Align admin-facing and employee-facing experiences into a more cohesive product
In practice, the work did more than improve the interface. It gave the team a clearer system to ship and a more scalable baseline for future modules.
Other Projects
Compstack HRMS Redesign
Redesigning an HRMS platform for HR teams managing payroll, people operations, and reporting
Details
Role
Product Designer
Team
Product Designer, Frontend Engineer
Date
March 2024
Overview
Compstack is an HRMS platform for the Moroccan market, combining payroll, employee records, time off, recruitment, expenses, reporting, and compliance.
I joined after the client lost confidence in a previous design direction. The product had grown quickly, but without a consistent structure — patterns were fragmented, workflows felt disconnected, and screens had been designed in isolation.
My role covered both admin-facing and employee-facing experiences.
The Problem
The platform had strong functionality, but lacked coherence — and that made it feel unreliable.
Four issues consistently surfaced:
Navigation didn’t scale — The structure reflected features rather than how HR teams actually work
Workflows had friction — Tasks like payroll and approvals lacked clear progression and feedback
Information lacked hierarchy — Data was present, but hard to scan and act on
Experiences were misaligned — Admin and employee flows felt like separate products
This created two risks:
The team couldn’t move forward confidently
Engineering lacked a reusable foundation to build from
The Challenge
HRMS platforms are inherently complex — multiple user types, high-stakes actions, and interconnected workflows.
The goal wasn’t to fix individual screens, but to create a unified system without oversimplifying the product.
With only six weeks and a large surface area, the work required prioritizing structural changes with the highest cross-product impact.
Why It Mattered
Usability issues in HR software aren’t cosmetic — they directly affect operations.
Unclear workflows can slow payroll, introduce approval errors, and create risk in employee management.
This project was ultimately about confidence:
For admins handling sensitive workflows
For employees using self-service features
For engineers building on a stable system
Research & Insight
Without access to live users, I approached the problem from three angles:
Unclear workflows can slow payroll, introduce approval errors, and create risk in employee management.
Without access to live users, I approached the problem from three angles:
Evaluating what existed
Identifying where workflows broke down
Understanding expectations from modern HRMS tools
Methods included heuristic evaluation, competitive analysis (BambooHR, Rippling, Gusto, Deel, Workday), workflow mapping, and regular reviews with stakeholders and engineers.
Without access to live users, I approached the problem from three angles:
Structure over surface — Fixing architecture would have more impact than refining UI
Overview and detail must coexist — Users need summary and granular data at the same time
High-stakes actions need review states — Speed alone isn’t enough; verification is critical
Shared patterns multiply impact — Improving core components improves the entire system
The Solution
Instead of redesigning modules in isolation, I focused on shared patterns and consistent structures that could scale across the product.
Dashboard
Redesigned as a purposeful command center. Admins can now see what needs attention at a glance — pending approvals, payroll timing, onboarding activity — and move directly into the right workflow.
Employee Management
Employee Management became the core area for understanding workforce information across onboarding, active employment, and offboarding.
The redesign gave this module stronger structure, clearer hierarchy, and more intentional operational actions. Because the work covered both admin-facing and employee-facing surfaces, I also considered how employee information should feel detailed and actionable for HR teams while remaining clear and approachable for employees interacting with their own records.
Payroll
Redesigned payroll as a guided review workflow. Its role was to help teams prepare, verify, and run payroll with confidence. The flow prioritized understanding before action by making it easier to grasp totals, due dates, employee-level details, and compensation changes in a more structured way.
This shifted payroll away from feeling like a raw data surface and toward feeling like a guided operational process.
Time Off
Time Off needed to work for both sides of the product. For admins, the redesign improved visibility into leave requests, statuses, and team planning. For employees, it created a clearer path for requesting time off and understanding balances or approval status.
Bringing both perspectives into the same system helped the module feel more connected and practical.
Recruitment
Clarified recruitment as a pipeline-management experience. Recruitment was repositioned around tracking progress and making decisions.
The redesign made it easier to understand openings, candidate stages, and hiring activity, especially when moving between role-level overviews and candidate-level detail. The goal was to make the flow easier to scan, interpret, and act on.
Supporting Modules
Beyond the platform’s core operational areas, I also redesigned supporting modules including Documents, Expenses, Integrations, and Settings.
I also worked across Documents, Expenses, Integrations, and Settings — supporting areas that were important to the product’s completeness, but needed stronger structure and consistency to feel integrated into the overall system
The redesign made these modules easier to navigate and manage by clarifying priorities, organizing information more intentionally, and aligning them with shared product patterns. This helped reduce fragmentation across the platform and reinforced a more scalable foundation for future growth.
Outcome
The product had not launched by handoff, so I focused outcomes on design and delivery impact rather than live metrics
Unclear workflows can slow payroll, introduce approval errors, and create risk in employee management.
The redesign helped the team:
Restore confidence in the product direction after a previously unsuccessful design phase
Create a more buildable foundation for engineering through clearer, repeatable patterns
Reduce inconsistency across modules, lowering the risk of fragmented implementation as the platform grows
Improve clarity in high-stakes workflows where structure directly supports confidence and accuracy
Align admin-facing and employee-facing experiences into a more cohesive product
In practice, the work did more than improve the interface. It gave the team a clearer system to ship and a more scalable baseline for future modules.