Every hour on the clock, ready for payroll
About the project
Timerack is time and attendance software for staffing agencies: it records when people work, where and on what, and turns those hours into payroll and client invoices.
A staffing agency’s people work at someone else’s site. One worker can be at a logistics yard on Monday and a clinic on Wednesday, on different shifts, pay rules and assignments, and every hour has to become a correct paycheck for them and a correct invoice for the client. Timerack does that for hundreds of agencies, with time clocks, a mobile app and a web platform for the people who run payroll.
We designed both sides of that web platform: the Employee Portal, where people punch in, check their timesheet and schedule, request time off and file expenses, and the Manager Portal, where admins set up each employee’s pay, clocks and policies, then review, approve and lock their timecards. In light and dark, on desktop and on phone.
- Client
- Timerack
- Stage
- Established Platform, New Design
- Services
- UI/UX Design Services
- Platform
- Web App, Desktop and Phone
- Timeline
- April to July 2026, Two Portals
The challenge
Every punch becomes a paycheck, and an invoice.
In staffing, a punch is more than a time. It carries a pay category, a shift, an assignment and a task, and depending on the state, a meal break, a lunch rule or a tip declaration. If any of it is wrong, the worker is paid wrong, the client is billed wrong, and someone in payroll fixes it by hand at the end of the week.
The two people using the product could hardly be more different. One is an hourly worker on a phone at the start of a shift, who wants to clock in and get to work. The other is a manager looking after a whole roster, each employee with eleven tabs of settings, eight policies, badges, fingerprints and time clocks. The design had to keep the first simple without hiding anything the second needs.
The product
Punch, submit, approve, lock
Two portals over the same hours: what an employee records on one side is what a manager approves on the other.
Punching in asks for the pay category, shift, assignment, task and microtask, with an optional note, before the clock starts. After that the screen shows where you are and what you can do next: start a break, start a meal, transfer to another assignment or punch out. A transfer shows the old punch beside the new one before it is confirmed, punching out asks whether you received tips, and the last 15 days of punches show where each came from: web, mobile or kiosk.
The weekly timesheet lists each day’s pay type, time in and out, assignment and location, with totals for regular and overtime hours, comments, hours utilisation and the columns you choose. Submitting asks you to confirm the hours are accurate. The schedule shows the week’s shifts, meals and days off, and time off shows what you have earned, used and carried forward, every request by status, and a calendar of your leave, your colleagues’ and the holidays.
Employees upload their own documents and read the company’s, and forms that need attention are flagged on the dashboard. The notice board keeps active and expired posts apart, each tagged Safety, HR, Team, Health or Training. Expenses go into reports line by line, each with its receipt, and are reviewed, signed and submitted in one step.
Each employee’s record sits in tabs: personal details, pay method and rates, levels, policies from lunch and rounding to overtime and alerts, terminals with badges, face and fingerprint templates, web and mobile access, address, pay category mapping, shifts and paid time off. Every change is logged with its old and new value and who made it. Timecards are reviewed in one wide table, sent for email or manager approval, checked against alerts and rejected punches, and locked when the period closes. New employees are added by hand, copied from another, built from a template or imported in bulk.
The idea
Ask at the punch, not after
The punch-in window collects the pay category, shift, assignment and task when the worker starts, so the timecard is right before anyone has to correct it. Transfers and tips work the same way, asked at the moment they happen rather than reconstructed at the end of the week.
Show only what they can use
Managers switch each employee’s access on or off: web punch, a timesheet they can read or edit, leave requests, schedules, expenses, a mobile clock with location or photo. We drew the employee dashboard in four versions, so people only ever see what they can use.
One state, one next step
Not started, punched in, on break, on a meal, shift ended. The punch screen always says which, with a large clock and only the actions that make sense right now, and every punch is confirmed against the current time before it is recorded.
A long record, made calm
An employee record holds more settings than any one screen should. We split it into eleven tabs, gave every switch a plain sentence saying what it does, and logged every change, so a manager can see who changed a pay rate and when.
Impact
Two portals, one record of every hour
We designed Timerack’s Employee Portal across eight modules, from the dashboard and web punch to expenses and time off, and the Manager Portal’s employee record, shifts and timecards. More than 170 screens and states in light and dark, with a phone layout for every module, so the same hours read the same way at a desk or on a shift.
170+
Screens, light and dark
8
Employee modules
11
Employee record tabs
Next project
Betr Journal
How Usarion redesigned Betr, a mental wellness app, around one short daily loop: check in, reflect, and see what lifts you and what drains you.
Book a call
Pick a time that suits you
Get in touch
Let’s build something amazing together
Let’s build somethingamazing together
For product, interface and web-system work that needs clear direction and careful execution.