HR SaaS Design System Case Study: Zetalents

// 01 Context

Ten HR modules, used across two countries

Zetalents is a cloud HR platform from Riyadh, used by companies in Saudi Arabia and Egypt since 2016. Ten modules cover an employee’s whole time at a company, from payroll and attendance to recruitment and performance, each with views for employees, managers and HR.

I joined in June 2023 and rebuilt the platform’s design system and look while leading the redesign of its modules. After I left in August 2024, they came back to me for another module and some updates.

// 02 Problem

An outdated design, on a ready-made HR tool

The platform looked outdated. It was built on a ready-to-use HR tool and that tool’s design, so it carried a lot of components and features nobody used.

10
modules, one product: 2
languages on every screen: 3
kinds of people using it

Employees: a violation form — Fig. 01The old platform, with names and amounts changed.

// 03 The call

Attendance had to reach Payroll as one process

D1

How should attendance reach Payroll?

One process, in tabsover Two separate pages

I made it one process: pick the transactions, run the analysis, check the results, then send them to Payroll. Tabs keep the steps together, so people can stop and come back.

What happened: Worked through feedback notes in the design file. The last tab, Moved to Payroll, became one table with a filter for what’s already posted.

One process, in tabs, as shipped — # Attendance · Analysis Results1920 × 1080

// 04 Shipped

A new design system, and the modules rebuilt on it

A new design system and a new look for the whole platform: one colour system, one page layout, and the same tables, forms and side panels everywhere. On it, I redesigned Employees, Payroll, Self-Service, Attendance, Performance Appraisal, Talent Development, Recruitment and others, in English and in Arabic, right to left. For the Arabic, I tested five typefaces on real screens and chose Changa.