Ferry Works
WorkProcessAboutRésuméContact
Senior Product DesignerVisual Designer7+ YEARS · UI/UX · WEB3
All workCase study

HRIS Dashboard

A company-and-employee HR platform for Tricor's Asia offices, built so payroll, time and employee records stay in sync in real time, from a Hong Kong head office to every market it serves.

Visit tricorunify.com
Client
TricorUnify
Sector
HR Tech · SaaS
Role
UI/UX Designer
Team
1 UX · 3 eng · 1 PM
Period
2023
Markets
Hong Kong HQ · Asia
Surface
Web app · Desktop
TricorUnify dashboard mockup: demographic and tenure charts in a browser window

Overview

01 · The brief

TricorUnify runs Tricor Group's HR for offices across Asia out of Hong Kong, real-time in every market. I designed the shared shell: one dashboard, one table pattern, one filter, so whichever module a manager or employee opens next still feels like the same product.

Scope

What the work covered

  1. 01Stakeholder interviews
  2. 02Company & employee IA
  3. 03Multi-country data model
  4. 04Data table & filter system
  5. 05User flows
  6. 06Wireframes
  7. 07Interface design
  8. 08Data visualisation
  9. 09Design system
  10. 10Design QA

Problem

02 · Where it broke

Every country read a different version of the truth.

TricorUnify runs HR for Tricor Group's offices across Asia out of a Hong Kong head office, so an employee's record, leave balance and payroll status had to match the moment they changed, no matter which country's HR team or which employee opened them next. Data that synced overnight, not the instant a manager approved it, meant two people looking at the same profile could be looking at two different truths.

The product had also grown two audiences that didn't share a design language: an admin console for the Company side, and a self-service view for the Employee side, each shipped as if the other didn't exist. A payroll update an admin made in Hong Kong had no visible echo on the employee's own payroll tab, so trust in the number depended on a phone call, not the screen.

Approach

03 · How I worked

One shell, two sides, real-time by default.

Every module (Dashboard, Employee, Payroll, Time Management, Benefits) now reads from the same live data layer instead of a nightly batch, so an approval, a new hire or a payroll change shows up the same second on both the Company console and the Employee self-service view, in whichever country it happened.

Company and Employee sides share one table, filter and chart-type pattern instead of two design languages, so an HR admin at the Hong Kong head office and an employee at a branch office are reading the same product, not two products that happen to share a login screen.

Screens

Four modules, one shell

Results

06 · What the system produced

4 modulesEmployee, Payroll, Time Management and Benefits sharing one shell
2 sidesCompany console and Employee self-service reading the same live data
4 chartsMetric, line, bar and pie behind one menu, not four screens
0Nightly batch jobs between what Company sees and what Employee sees

A design system case study, not shipped usage data: figures describe the pattern, not production metrics.

Deliverables

Handed to the team

Next caseStiqy Rewards DashboardWeb3 · GrowthStiqy Rewards Dashboard