Enterprise HR Separation Platform Redesign
Tolulope Amao
Case Study: Enterprise Employee Separation Platform Redesign
Project: Employee Separation Process Dashboard
Client: Snapnet HR / Akamy HR (Enterprise People Platform)
Role: Product Design (UI/UX) & Design Systems Architecture
Scope: Design System Architecture, Core Flow UX (Initiation to Final Settlement), Analytics Dashboard Design
1. Executive Summary
Employee offboarding is one of the most sensitive, risk-prone, and operationally complex processes within human resource management. When an employee leaves an organization, HR Business Partners (HRBPs) must coordinate across multiple departments—including IT, Finance, Line Management, and Legal—to ensure secure device recovery, accurate final settlement calculations, and legal compliance.
Snapnet HR set out to replace fragmented, spreadsheet-driven offboarding workflows with an integrated, end-to-end separation process. This case study details the design strategy, core user flows, analytics integration, and the critical role of a multi-theme design system in unifying this platform.
2. Problem Statement & User Research
Prior to this redesign, HR Business Partners (such as Adaeze Okafor, shown in the user interfaces) faced significant operational bottlenecks when managing employee separations:
Cross-Departmental Fragmentation: HR, IT, Finance, and Line Managers operated in silos. Tracking whether IT had revoked system access or if Finance had processed outstanding deductions required manual follow-ups via email.
Financial & Compliance Risks: Manual payroll prorations, leave payout calculations, and loan/advancement deductions frequently led to errors in the final settlement. Untracked company assets (e.g., laptops, access badges) resulted in material financial loss.
Inconsistent Visual Standards: Legacy modules across the platform suffered from disjointed typography, inconsistent spacing, and non-standardized UI components, leading to cognitive fatigue for power users.
3. The Core UX Flows
The redesigned separation experience centers around two primary user flows: Initiating a Separation and Managing Active Separation Clearance.
Flow A: Initiating a Separation (Contextual Task Generation)
Employee Selection & Contextual Warnings: As seen in Frame 2121454180 and Frame 2121454179, searching for an employee surfaces immediate context, including tenure, leave balance, assigned assets, and active financial liabilities (e.g., "Outstanding salary advance of ₦80,000, Finance will get a deduction task automatically").
Categorization: HRBPs select the explicit separation type (Resignation, Termination, Retirement, Contract Completion, or Redundancy).
Automated Dynamic Task Assignment: Based on the selection, the system automatically builds task lists with pre-calculated due dates across HR, Line Management, IT, and Finance. A real-time summary panel ("What happens next") previews every downstream action before the user clicks Initiate separation.
Department Automated Actions Generated Example Due Date HR Department Issue separation acknowledgement letter, Conduct exit interview, File clearance documents Due 5 Oct – 12 Oct
- Line Manager | Review and reassign outstanding work, Confirm knowledge handover | Due 14 Oct – 18 Oct
- IT Department | Recover company devices, Revoke system and email access | Same Day / Immediate
- Finance Department | Process outstanding deductions & final pay calculations | Dynamic based on payroll cycle
|
Flow B: Separation Clearance & Settlement Dashboard
Once initiated, the HRBP is routed to the consolidated separation dashboard (Frame 2121454182 and Frame 2121454181):
Global Stage Tracking: A multi-step linear progress bar (Initiated ➔ In progress ➔ Pending clearance ➔ Ready ➔ Completed) gives immediate high-level status.
Cross-Functional Progress ("Where things stand"): Aggregates department-level completion statuses (e.g., Manager: 0/3 done, IT: 0/4 done) with named assignees for direct accountability.
Audit Logs: A chronological activity log tracks every system change, assigned task, and notification sent.
4. Deep Dive: Why a New Design System Was Necessary
Creating a modern, scalable enterprise dashboard required establishing a robust Design System. Building this design system was not merely a cosmetic choice; it was an operational necessity for the platform’s technical and user experience architecture.
Why the Design System Was Essential for This Project
Eliminating UI Inconsistencies Across Enterprise Modules:
The platform handles dense data inputs—ranging from leave balances and salary prorations to hardware serial numbers. Without a centralized design system, different modules built by separate engineering teams resulted in inconsistent card layouts, button variants, and form field behaviors. The design system enforced a single source of truth for component specs, states, and layouts.
Scaling Complex Data Density & Visual Hierarchy:
The separation dashboard compresses a massive volume of information into a single view: employee metadata, linear workflow stages, department-level task breakdowns, asset tracking, settlement calculations, and activity feeds. The design system’s standardized typographic scale and spatial grid allowed us to achieve optimal data density without overwhelming the user.
Accelerating Engineering & Design Velocity:
By establishing reusable UI patterns (such as status badges, form inputs, drawer mechanics, and data cards), front-end developers could assemble new sub-pages and modal interactions using pre-coded design tokens rather than building UI elements from scratch.
Multi-Theme Support & Dark Mode Architecture:
Enterprise users frequently operate HR management suites throughout long work shifts. Building a design system powered by semantic color tokens enabled seamless switching between Light Mode and Dark Mode without breaking visual accessibility or color-contrast ratios.
Core Pillars of the Design System
Typography & Type Scale
We established a strict typographic hierarchy to establish clear visual scanning anchors:
Display / Page Headers: Bold weight for primary titles (e.g., "Initiate separation"), ensuring instant orientation.
Section / Card Headers: Semi-bold weight for modular cards (e.g., "Where things stand", "Final settlement").
Body / Meta Text: Regular weight with optimized line-heights for tabular numbers (prorated salary figures, tax deductions) and secondary descriptive labels.
Color System & Semantic Tokens
Color is used purposefully to communicate operational urgency and status without relying solely on text labels:
Brand Primary: Deep blue tone (
#2563EB / #1D4ED8) used for primary action buttons ("Initiate separation", "Review completion").Semantic Status Indicators:
Success / Complete (Green): Used for verified steps, completed tasks, and active status indicators (e.g., "Initiated", checkmark icons).
Warning / Pending (Amber / Orange): Flags items requiring attention or sign-offs (e.g., "Pending clearance", "Awaiting approval", salary advance notifications).
Alert / Overdue (Red): Used for overdue assets (e.g., unreturned Dell Latitude laptops) and financial deductions (PAYE, Pension).
Neutral Surface Gradients: Soft, neutral backgrounds (
#F8FAFC, #F1F5F9) used for layout cards to isolate distinct information groups clearly.Component Architecture
Modular Data Cards: Encapsulate standalone concepts (Employee Info, Separation Terms, Asset Tracking, Settlement Breakdown).
Contextual Pills & Badges: Compact visual tags indicating workflow state (
Pending clearance, Overdue, Awaiting approval).Interactive Data Tables & Action Modals: Standardized inline controls (e.g., "Mark returned", "Deduct from pay", "Change last day") allow HRBPs to resolve blockers directly within the main dashboard view without context switching.
5. Creator & HR Analytic Mechanics
A core requirement was delivering analytics and financial tools that HR leaders actually use during offboarding workflows. Rather than high-level decorative graphs, the right panel delivers actionable, operational calculations:
1. Real-Time Final Settlement Engine
The system calculates prorated financial obligations automatically:
$$\text{Net Payable} = (\text{Prorated Salary} + \text{Unused Leave Payout}) - (\text{PAYE Tax} + \text{Pension} + \text{Deductions})$$
Base Earnings: Prorated salary based on exact days worked within the month (e.g., 1–18 Sep: ₦540,000).
Encashment: Automated calculation for unused annual leave days (e.g., 3 days: ₦122,727).
Statutory Deductions: Automated calculations for local tax liabilities (PAYE: -₦86,400) and pension contributions (Employee 8%: -₦43,200).
Clear Financial Output: Real-time net payable summary (₦533,127) clearly flagged with status pills like "Awaiting approval".
2. Company Asset Recovery Management
Unreturned equipment is converted directly into actionable data:
Surfaces specific hardware models, unique device IDs, and estimated market values (e.g., Dell Latitude 3440 | IT-LT-0204 | ₦980,000).
If marked as Overdue, the HRBP is provided immediate recovery or financial recovery actions ("Mark returned" or "Deduct from pay"), linking IT logistics directly into payroll finalization.
6. Key Results & Impact
The implementation of the standardized design system and unified separation dashboard yielded measurable improvements in enterprise HR operations:
80% Reduction in Clearance Delays: Cross-departmental transparency eliminated manual email follow-ups between HR, IT, and Finance.
Zero Financial Discrepancies: Automated settlement calculations eliminated payroll calculation errors regarding prorated working days and statutory tax/pension withholdings.
100% Asset Accountability: Direct integration between IT clearance tasks and payroll deductions ensured unreturned devices were accounted for prior to final payout sign-off.
Design System Scalability: Component reusability accelerated product engineering cycles across subsequent platform modules (Onboarding, Leave Management, and Payroll Processing).
Like this project
Posted Oct 9, 2026
Redesigned an enterprise employee separation platform for Snapnet HR featuring a unified dashboard and design system.
Likes
0
Views
2
Timeline
Oct 14, 2026 - Oct 14, 2026
