Payroll HR System

Project details

Payroll is the salary & insurance module within DingHeng HR Suite, integrating attendance, leave, overtime and insurance data. The project delivered both an HR-facing Web Dashboard and an employee self-service Mobile App, balancing legal compliance, automation and self-query in a single design system.

Context

Traditional payroll systems are built around back-office data entry rather than process visibility or employee access. HR teams often lose track of where each employee sits in the monthly close — and every payslip enquiry routes back through HR.

The core challenge of Payroll was translating complex compliance logic — including labor & health insurance rates, income tax parameters and supplementary premium withholding — into an interface that HR could operate confidently, while exposing a thin, secure self-service layer to employees on mobile.

Since the product had to serve two very different audiences on two very different form factors, the UX needed to balance: data density on Web / simplicity on Mobile / compliance accuracy / sensitive data protection / cross-module data integrity.

Constraints & Decisions

Payroll operates under four hard constraints: compliance (labor & health insurance, income tax and supplementary premium parameters change annually), cross-module integration (attendance / leave / overtime / insurance data must flow into salary calculation), privacy (mobile payslip viewing must be password-gated, and no error message may leak another employee's data), and dual-end form factors (information-dense Web vs. compact Mobile).

To resolve these constraints, four core design decisions were made: a payroll-close process dashboard to surface progress states (pending / calculating / done / exception); a centralized compliance parameter page so annual rate updates happen in one place; an employee self-service Mobile App with per-query password protection; and a consolidated insurance workflow that merges enrollment, premium reconciliation, salary adjustment and dependent records into a single guided flow.

Trade-off:

The Web Dashboard and Mobile App share design tokens but optimize layout independently — the HR Web prioritizes column density, batch operations and filterable tables (sacrificing whitespace and mobile availability), while the Employee App prioritizes simple navigation, password-gated access and collapsible records (sacrificing column density and cross-employee comparison).

Outcome

Payroll shipped as a core module of the DingHeng HR Suite, with a unified design system spanning the HR Web Dashboard and the Employee Mobile App.

Deliverables included: a payroll-close progress dashboard / centralized compliance parameter management / employee self-service payslip app with password & QR Code access / consolidated insurance workflow (enrollment, premium reconciliation, salary adjustment, dependents, pension) / Form & State UI Guideline / UI specifications for engineering implementation.

What's next?

Full case study materials including wireframes, UI specifications, form & state guidelines, and dual-end design system documents are available upon request.

For collaboration or interview opportunities, feel free to contact me via email or LinkedIn. contact@yasminalin.com.tw