DESIGN SYSTEM
2026
Illustration System for Global HCM
Designing a illustration system that gives every record in GlobalLink HCM a consistent, trustworthy identity.
Enterprise
Design system
DESIGN SYSTEM
2026
Illustration System for Global HCM
Designing a illustration system that gives every record in GlobalLink HCM a consistent, trustworthy identity.
Enterprise
Design system
Role : Sole Product Designer
Product : GlobalLink HCM
Company : TransPerfect
Timeline : 3 weeks (end - to- end)
Platform : Desktop web
Role : Sole Product Designer
Product : GlobalLink HCM
Company : TransPerfect
Timeline : 3 weeks (end - to- end)
Platform : Desktop web
Project Overview
GlobalLink HCM has 35+ record types Worker, Compensation Grade, PII Policy, Workflow Definition, Long Term Leave Plan. Each one has its own profile header. Most of them had no illustration that actually represented what the screen was about.
Where one did exist, it came from Compass. TransPerfect's general-purpose design system, built for a wide range of products. Not for HR.
This isn't a customer-facing product. GlobalLink is used internally, across every region TransPerfect operates in. Every profile record is a first impression of the company's own tooling. It has to feel confident and functional from the first screen not experimental.
Project Overview
GlobalLink HCM has 35+ record types Worker, Compensation Grade, PII Policy, Workflow Definition, Long Term Leave Plan. Each one has its own profile header. Most of them had no illustration that actually represented what the screen was about.
Where one did exist, it came from Compass. TransPerfect's general-purpose design system, built for a wide range of products. Not for HR.
This isn't a customer-facing product. GlobalLink is used internally, across every region TransPerfect operates in. Every profile record is a first impression of the company's own tooling. It has to feel confident and functional from the first screen not experimental.
The Brief, As Given
It wasn't framed as "make this look better." It was simpler and more specific: most screens had no illustration that defined what the screen was about.
That's a legibility problem before it's a style problem. The fix wasn't a new icon pack. It was a system, purpose-built for this product, this component, and this user. Designed from the constraint up, not the canvas down.
The Brief, As Given
It wasn't framed as "make this look better." It was simpler and more specific: most screens had no illustration that defined what the screen was about.
That's a legibility problem before it's a style problem. The fix wasn't a new icon pack. It was a system, purpose-built for this product, this component, and this user. Designed from the constraint up, not the canvas down.
Paper First. AI Second.
Every concept in this system started on paper, not on screen.
For each category, I sketched the object by hand before opening Figma. what does Workflow Definition actually look like as a shape, before any color or stroke exists. Paper forces the idea to work as pure geometry first. If a concept doesn't read in pencil, it won't read at 48px either.
AI came in after the sketch, not before it. Refining proportions, stress-testing a shape against the 4-color system, generating quick variations of a badge position or corner radius without redrawing from zero each time. The sketch decided what the object was. The agent helped me get there faster, not decide for me.
Asking an AI to design an illustration for Workflow Definition cold produces something generic. Competent, forgettable, indistinguishable from any other enterprise icon set. Asking it to refine a shape I'd already sketched and committed to produces something specific to this system, because the constraint was set by hand before the tool ever saw it.
Paper First. AI Second.
Every concept in this system started on paper, not on screen.
For each category, I sketched the object by hand before opening Figma. what does Workflow Definition actually look like as a shape, before any color or stroke exists. Paper forces the idea to work as pure geometry first. If a concept doesn't read in pencil, it won't read at 48px either.
AI came in after the sketch, not before it. Refining proportions, stress-testing a shape against the 4-color system, generating quick variations of a badge position or corner radius without redrawing from zero each time. The sketch decided what the object was. The agent helped me get there faster, not decide for me.
Asking an AI to design an illustration for Workflow Definition cold produces something generic. Competent, forgettable, indistinguishable from any other enterprise icon set. Asking it to refine a shape I'd already sketched and committed to produces something specific to this system, because the constraint was set by hand before the tool ever saw it.
Four Rules. No Exceptions.
AI tools to extract PRD constraints fast. Every insight cross-checked. Goals reframed as intent statements, not UI actions, before any screen was designed.
One fixed slot — 296 × 236px, every category, no exceptions. One palette — 4 colors, locked to a strict 60/30/10 distribution. One stroke weight — 1.5px, everywhere, no variation. Zero characters — no faces, no expressions, no narrative scenes.
The test I held every illustration to: if a user can describe the data on the profile header without noticing the illustration, the illustration has done its job correctly.
That's the opposite of how most illustration systems get evaluated. The goal wasn't to be noticed. It was to make the page feel complete without asking for attention.
Four Rules. No Exceptions.
AI tools to extract PRD constraints fast. Every insight cross-checked. Goals reframed as intent statements, not UI actions, before any screen was designed.
One fixed slot — 296 × 236px, every category, no exceptions. One palette — 4 colors, locked to a strict 60/30/10 distribution. One stroke weight — 1.5px, everywhere, no variation. Zero characters — no faces, no expressions, no narrative scenes.
The test I held every illustration to: if a user can describe the data on the profile header without noticing the illustration, the illustration has done its job correctly.
That's the opposite of how most illustration systems get evaluated. The goal wasn't to be noticed. It was to make the page feel complete without asking for attention.
One Object. One Concept. No Repetition.
Each illustration earns its primary shape by asking one question: what single object most directly represents this HCM concept and does any other category already own it?
Worker → an ID card with an abstract silhouette, not a generic avatar
PII Policy → a masked identity card — the exact visual pattern every employee has already seen on their own profile
Workflow Definition → a track with station markers — sequential, directional, distinct from any hierarchy or calendar shape already in use
Payment Election Rule → a distribution diagram — one source, branching into weighted destinations.
No two categories share a primary object. Calendar, person silhouette, building, org node, distribution diagram. Each shape allocated once, documented, so the system stays legible as it grows.
One Object. One Concept. No Repetition.
Each illustration earns its primary shape by asking one question: what single object most directly represents this HCM concept and does any other category already own it?
Worker → an ID card with an abstract silhouette, not a generic avatar
PII Policy → a masked identity card — the exact visual pattern every employee has already seen on their own profile
Workflow Definition → a track with station markers — sequential, directional, distinct from any hierarchy or calendar shape already in use
Payment Election Rule → a distribution diagram — one source, branching into weighted destinations.
No two categories share a primary object. Calendar, person silhouette, building, org node, distribution diagram. Each shape allocated once, documented, so the system stays legible as it grows.
One Object. One Concept. No Repetition.
Each illustration earns its primary shape by asking one question: what single object most directly represents this HCM concept and does any other category already own it?
One Object, Pulled Apart
A masked field. A lock badge. A header bar. None of these shapes are decorative — every one carries a specific piece of meaning, and the system only works because nothing extra got left in.
One Object, Pulled Apart
A masked field. A lock badge. A header bar. None of these shapes are decorative — every one carries a specific piece of meaning, and the system only works because nothing extra got left in.
Built to Survive Being Small
Every illustration was designed at 296×236px and tested down to 48×48px before being marked done. Anything that disappeared at the smaller size — a thin connector line, a label, a sub-4px detail — got simplified at the source, not patched after the fact.
Built to Survive Being Small
Every illustration was designed at 296×236px and tested down to 48×48px before being marked done. Anything that disappeared at the smaller size — a thin connector line, a label, a sub-4px detail — got simplified at the source, not patched after the fact.
Documented as a System, Not a One-Off
The deliverable wasn't 24 SVGs. It was a system anyone could extend without me in the room — a style guide covering color tokens, stroke and corner rules, the badge decision logic, a category object registry to prevent duplicate shapes, and a step-by-step Figma workflow from blank frame to shipped asset.
Documented as a System, Not a One-Off
The deliverable wasn't 24 SVGs. It was a system anyone could extend without me in the room — a style guide covering color tokens, stroke and corner rules, the badge decision logic, a category object registry to prevent duplicate shapes, and a step-by-step Figma workflow from blank frame to shipped asset.
Live in Product
35+ illustrations, live across GlobalLink HCM today categories that previously had no illustration, or one borrowed from a system that wasn't built for this product.
Live in Product
35+ illustrations, live across GlobalLink HCM today categories that previously had no illustration, or one borrowed from a system that wasn't built for this product.
More Works
More Works
case studies or just WANT TO SAY HI?
LET'S CHAT
case studies or
just WANT TO SAY HI?
LET'S CHAT