Employees · Records
Manual files — Employee records, postings and department transfers lived in manual files, so any payroll change meant chasing paperwork across offices.
Payroll — Government Payroll System
Exarth built the payroll management system for the Government of Khyber Pakhtunkhwa — automating employee records, BPS pay scales, allowances, deductions, payroll runs with an approval workflow, GP Fund and reporting for the Employees Social Security Institution (ESSI).
- Employees, posts & pay scales
- Allowance & deduction rules
- Payroll runs with approvals
- GP Fund & reporting
- GovTech
- UI/UX + Dev
- RBAC
DashboardPayrollEmployeesScales
payroll.kpessi.gov.pk
Built for the Government of Khyber Pakhtunkhwa — Employees Social Security Institution (ESSI).
PKR 78MPayroll & loans
772Active loans
22BPS pay scales
100%Approval workflow
Overview/ 01
One system for KPK's government payroll
Payroll is a unified payroll management system for the KPK ESSI — bringing employee records, BPS pay scales, allowances, deductions, payroll runs, approvals, GP Fund and reporting into one secure platform.
Exarth designed and built the platform end to end — from information architecture and a design system to a performant, role-based web application that processes monthly payroll across departments with a clear approval trail.
- Employees, posts & BPS scales
- Allowance & deduction rules
- Single & bulk payroll runs
- Approvals, GP Fund & reporting
- Role
- UI/UX + Development
- Sector
- Government · FinTech
- Timeline
- 7 months
- Platform
- Web App
- Access
- Role-based
- Year
- 2025
Scope & deliverables
Discovery & Strategy
System architecture, BPS rules and payroll workflows across every department.
UX / UI Design
A clean, accessible design system tuned for finance officers and approvers.
Frontend Engineering
A fast, responsive portal with real-time analytics and dense payroll tables.
Backend & Integrations
Secure APIs, payroll engine, approval workflow and GP Fund accounting.
Challenge & solution
Manual payroll sheets, or one automated system
Monthly payroll ran on spreadsheets and paper approvals — slow, error-prone BPS calculations with no audit trail across departments.
- Spreadsheet payroll
- Manual BPS scales
- Paper approvals
Pay Scales · BPS grades
Manual grades — BPS pay scales and increments were applied by hand, causing inconsistent grades, calculation errors and disputes at every revision.
Allowances · Earnings
Manual add-ons — Allowances were added manually per employee, so entitlements were missed, duplicated or applied inconsistently across departments.
Deductions · Cuts & loans
Manual cuts — Tax, loan and fund deductions were calculated by hand, producing slow, error-prone net pay and reconciliation headaches.
No core
No shared platform
Fragmented systems
DaysPer runPaperApprovals
Payroll Run · Monthly run
Spreadsheets — Monthly payroll was built in spreadsheets per department, taking days and breaking on every scale or allowance change.
Approvals · Sign-off
Paper approvals — Payroll approvals moved on paper between officers, so runs stalled and there was no clear record of who approved what.
GP Fund · Provident
Manual ledgers — GP Fund accounts, advances and deductions were tracked in manual ledgers, so balances and advances were hard to verify.
Reports · Analytics
No insight — With payroll in spreadsheets there was no way to analyse cost, deductions or trends across the institution.
Measurable impact on the live platform
PKR 78MPayroll & loans
772Active loans
22BPS scales
100%Approval workflow
Key features
Everything payroll needs, in one platform
From maintaining BPS pay scales to running and approving monthly payroll — every step lives in the same secure system with a clear audit trail.
01/05 features
Auto-playing — hover to pause
payroll.kpessi.gov.pk/employees-posts Live
Feature 01Employees & PostsA complete registry of employees with posts, departments and transfers — each record linked to its pay scale.
Engineering
Technology & Development
Engineered to run government payroll at scale — BPS scales, rule-based earnings, bulk runs, approvals, GP Fund and reporting on one secure platform.
System architecture
Officers → secure portal → payroll engine → secure data
UI
Client LayerRole-based portal · finance officers, approvers & administrators
SSR · responsiveENG
Payroll EngineBPS scales, allowance & deduction rules, single & bulk runs
Rule-basedFLOW
Workflow LayerApproval routing · GP Fund accounting · background exports
Approvals · GPFSEC
Data & SecurityEncrypted records · role-based access · full audit logging
RBAC · auditHow we built it
6-phase delivery
- 01
Discovery & Architecture
Phase 1Mapped BPS rules, payroll workflows and approval chains into one system blueprint.
- 02
UX / UI Design
Phase 2Built an accessible design system for finance officers and approvers.
- 03
Frontend Engineering
Phase 3Developed a fast, responsive portal with real-time analytics and dense tables.
- 04
Payroll Engine & APIs
Phase 4Engineered the rule-based payroll engine, approval workflow and GP Fund APIs.
- 05
QA & Security
Phase 5Hardened access control and audit logging, then validated payroll across scales.
- 06
Launch & Iterate
LiveRolled out across departments with monitoring, then iterated on finance feedback.
Technology stack
16 technologiesFrontend4
- Reactv18
- Next.jsApp Router
- TypeScriptv5
- Tailwindv4
Backend4
- Node.jsv20
- REST APIs
- Payroll engineRules
- RBAC
Data & Cloud4
- PostgreSQL
- RedisCache
- Cloud Hosting
- Docker
Integrations4
- BPS Scales
- GP FundAccounts
- ApprovalsWorkflow
- ReportsPDF/Excel
Product Screens
Every step, one platform
Glide through the live payroll platform — from the analytics dashboard to pay scales, payroll runs, approvals and GP Fund.
Drag to explore01 / 18
Philosophy
Design Approach
A user-centered design philosophy focused on clarity, accuracy and trustworthy financial workflows for payroll officers and approvers.
ClarityAccuracyTrustResponsive
- Design pillars
- 04
- Accessibility
- AA
- Secure access
- RBAC
- Audience
- Finance & admin staff
- Platform
- Responsive web app
- Design system
- 30+ shared tokens
- Accessibility
- WCAG AA
Every screen is shaped around real payroll workflows — clarity first, accuracy in every calculation, and an audit trail built into each interaction.
- Pillar 01
Responsive Web Design
100%Responsive screensFluid layouts and dense payroll tables that stay legible from office laptops to large displays.
Crisp from compact laptops to wide monitors.
- Pillar 02
Accuracy by Design
0Hidden mathClear breakdowns of earnings and deductions so every figure is verifiable at a glance.
Every salary figure is traceable to a rule.
- Pillar 03
Accessible Typography
AAWCAG contrastAccessibility-friendly typography with strong contrast for dense financial data.
Legible for every user, in any light.
- Pillar 04
Security-First Design
RBACAccess controlRole-based interaction patterns that protect salary and employee data at every step.
Sensitive data protected at every touchpoint.
Tokens
Design System
A cohesive visual language that keeps every payroll screen consistent, accurate and trustworthy.
4Colors
6Type sizes
5Spacing
8Icons
4Breakpoints
Color palette4
Typography6
Heading
Space Grotesk 800 · 32px
Subheading
Inter 500 · 20px
Body text for product listings, collections, and guides.
Inter 400 · 16px
Caption labels
Inter 400 · 14px
Small helper text
Inter 400 · 12px
Bold heading
Space Grotesk 700 · 18px
Components4
Add to cart Wishlist
Organic In stockHeirloom
⏎
DefaultHoverActiveOff
Spacing scale5
XS4px
SM8px
MD16px
LG24px
XL32px
More work
Explore more projects
More of what our team designs and ships — from government platforms to healthcare SaaS and AI products.
