The platform had grown feature by feature. I rebuilt its information architecture into 11 modules with one repeatable internal structure, then designed the employee self-service experience on top of it.
Context
HR Link is a Saudi cloud HR system covering the full employee lifecycle: recruitment, employee files, payroll, attendance, benefits, business travel, performance, disciplinary actions, approvals, and integrations with government services such as GOSI and Muqeem. Every screen is bilingual because Saudi HR data is bilingual by law and by habit: names, contracts and job titles exist in Arabic and English at the same time.
The constraint
A menu that had grown by accretion. Features sat where they were built, not where an HR officer would look for them. The same kind of screen, a list of transactions, a report, a setup form, looked different from module to module, and engineering was rebuilding table and form patterns for each one.
The decision
I proposed one anatomy for every module and held the line on it. Each of the 11 modules (People & Culture, Compensation & Benefits, Time & Attendance, Travel, Talent Tracker, Goals Master, Time Sheet & Costing, Notification Center, Workflow Engine, Reports, General Setup) got the same skeleton: its working screens first, then Reports, Notification Center, Workflow and Setup, always in that order.
That meant some features moved to places that felt less special to the people who had built them. The trade was a less bespoke menu for a platform where an officer who learns one module has learned all of them. We mapped the whole tree with the PM first; the menu document went through several versions before anyone opened Figma. Only then did I design the two-tier navigation: a module rail, a contextual sub-menu, and tabs so an officer can keep two workspaces open at once.
What shipped
- Two-tier RTL/LTR navigation: module rail, contextual sub-menu, tabbed workspaces.
- A data-table pattern with Arabic and English name columns side by side, status chips, and one toolbar (search, columns, view, sort, filter, export) reused across modules.
- A bilingual glossary of module and screen names, agreed once so Arabic labels were never improvised by developers.
- Employee self-service: 23 web screens exported for implementation, plus the mobile app and its store listings.
- The marketing site, email templates and the solutions widget set used in sales material.
My role
Sole designer. Information architecture and flows with the PM; all UI, components and developer handoff; marketing and email design.
What I learned
An internal sign-off is not evidence from users. The internal team validated the module rail, but HR officers are the people who work in it every day, and the tab pattern in particular needs testing with them.