WorkCase 02 of 08
Enterprise HR & workforce platform
Separate modules steered toward one experience system — shared IA, tokens, and components.
- My role
- Product UX and UI engineering: information architecture, multi-user self-service flows, reusable system patterns, design tokens and shared components, and frontend work so design intent held up in production.
01
Context
An enterprise HR platform used by several kinds of users. Self-service for leave, timesheets, approvals, profiles and notifications lived in separate modules that had grown apart.
02
Challenge
Steer separate HR modules toward one experience system — so self-service flows for leave, timesheets, approvals, profiles and notifications read and behave the same way for every kind of user.
03
My role
Product UX and UI engineering: information architecture, multi-user self-service flows, reusable system patterns, design tokens and shared components, and frontend work so design intent held up in production.
04
Key decisions
- 01
Decision
Shared information architecture before screens.
Why it mattered
Leave, timesheets and approvals share a shape: submit, review, decide, notify. One information architecture made that shape predictable in every module.
- 02
Decision
Tokens and shared components as the contract.
Why it mattered
Reusable system patterns gave every module the same foundations, so consistency came from the system rather than from screen-by-screen policing.
- 03
Decision
Design both sides of every request.
Why it mattered
The same flow serves the person asking and the person approving. Designing both sides together kept requests, approvals and notifications in step.
Next phase · Conversational AI concept
Designed next: an AI assistant for routine HR work.
Phase 1 went live with self-service modules and mostly manual transactions. For the next phase, I designed a conversational AI assistant to automate most routine HR transactions — leave, attendance, payslips and policy queries — as a plain-language front door to the same flows.
Next-phase concept, not yet live. Shown as an anonymized composition.
05
Constraints & trade-offs
Module autonomy
One experience system
Trade-off
Shared foundations — IA, tokens and components — with room for module-specific content where a task genuinely differed.
Self-service simplicity
Business rules
Trade-off
Carried the rules in the flow’s structure — clear states and notifications — rather than in long instructions.
06
Collaboration & implementation
- IA
- Tokens
- Components
I turned business rules into multi-user journeys, forms and prototypes with Product and Engineering, then worked on the frontend so the shared patterns held up in production.
07
How AI shaped this
I use AI to move faster through research, exploration, documentation and build — then judge every output myself. On this platform it widened what the team could cover without lowering the bar.
ChatGPT
Used for
Clustered audit findings and user feedback from every module into shared pain points; drafted edge cases, error and empty states for leave, timesheet and approval flows; structured tokens into JSON and CSS variables.
What it got us
One agreed problem list across modules, broader state coverage, consistent tokens from the start.
Figma AI
Used for
Batch-renamed layers to system conventions, organised frames and used Find similar to surface existing library components; filled screens with context-aware copy and realistic HR test data.
What it got us
A cleaner library, fewer duplicate components, layouts tested against real content.
Claude
Used for
Audited React and TypeScript components for refactoring; reviewed markup against WCAG 2.1 AA (ARIA, semantics, keyboard); drafted Storybook usage guidelines and READMEs.
What it got us
Accessibility issues caught before release; documentation that kept pace with the build.
Cursor
Used for
Multi-file component builds, repo-wide search for token definitions and state patterns, inline refactors and contextual debugging.
What it got us
Design intent reached production faster, with fewer handoff gaps.
Stays human — information architecture, system decisions and the final call on every component.
08
Outcome
Verified outcomes only
Separate modules steered toward one experience system — shared IA, tokens, and components across multi-user self-service flows.
09
Reflection
A design system earns adoption when it removes decisions, not when it adds rules. Shared IA did as much for consistency as any component.
10