Skip to content
All projects
Web App2026

Payroll System

An interface study for payroll — the register, the approval a run waits on, and the payslip that comes out the other end.

Client
Sky Arkanum Technologies
Type
Web App
Stack
ReactViteTailwind CSS
Payroll System interface
The challenge

Payroll is read by people who add up columns for a living. A register whose totals do not reconcile is the first thing they notice, and it discredits everything around it. The exercise was an interface that survives that reading at full size.

What we did
  1. 1

    Designed around the three screens a payroll run passes through — the register, the people it pays, and the slip each person receives.

  2. 2

    Computed every figure rather than writing it in, so gross, each deduction and net derive from the rates shown on screen, and the column totals are sums of their own columns.

  3. 3

    Put the approval step in front of release, holding the run at ‘awaiting approval’ and excluding it from the year-to-date figures until it is released.

  4. 4

    Built it light, on paper rather than as a dark dashboard, because payroll is a document-shaped job and the desktop CRM demo already occupies the dark end.

What shipped

Features built

Payroll register with per-column totals
Employee records, salary structures and allowances
Deduction rules applied identically to every run
Approval timeline before release
Payslips with year-to-date figures
Archive of closed runs
Screens

A look inside

Payroll System screen 1
Payroll System screen 2
Payroll System screen 3

Next project

Personal Manager App

A daily planning app bringing tasks, notes and schedule into one place rather than three separate tools.

View case study
Start a project

Tell us what you are trying to build.

Send over the rough idea — even a paragraph is enough. We will come back with an honest view of scope, timeline and cost, and tell you if we are not the right fit.

Free consultation · No obligation · Replies within one business day