Joined Fractal, an HR SaaS platform serving 60,000+ employees, as Lead UX Designer during a time when the design process was fragmented and undocumented.
No shared design system meant constant one-off Slack requests, inconsistent UI, and growing complaints about the experience.
Built a centralized Figma design system from scratch, then used it to redesign the platform's most-used flow across desktop and mobile.
Support tickets dropped 30%, and developers began serving themselves from the design system instead of pinging me directly.
Overview
One design system, every screen after it.
Fractal is an enterprise SaaS platform serving over 60,000 employees, designed to centralize HR workflows across Latin America.
When I joined Fractal, I was receiving 15 to 20 Slack requests a week from developers and PMs who needed individual screens just to move forward. I realized the real problem wasn't my workload, it was the absence of a shared design language. So I proposed building one.
Design lived in a fragmented Adobe XD environment with no component library, no documentation, and no single source of truth. I migrated all core workflows into Figma and built a centralized design system from scratch.
The challenges
A fragmented process, multiplying by the day.
That fragmentation showed up everywhere, from inconsistent screens to a hand-off process that leaned entirely on me. Three things kept coming up.
The goals
Build the foundation, then build on it.
The goal was to fix the process at its root instead of patching individual screens. Three things had to happen.
Key decision. Although client demand for a redesigned experience was growing, I knew that building new screens on top of a broken foundation would only multiply the inconsistencies. The design system had to come first.
Design system
One Figma file, twelve documented sections.
Instead of migrating outdated screens from Adobe XD, I rebuilt everything from scratch. The component library covered color tokens, typography, interactive states, and full component specs, all documented in a single Figma file. Developers went from pinging me on Slack to serving themselves from the system.
A palette built around teal for primary actions and blue for secondary ones and links, with clear usage rules so any developer could apply the right color without guessing.
Primary · Teal
Teal 50
#E4F4F1
Teal 500
#009687
Teal 600
#008175
Teal 700
#006A60
Neutrals
Gray 50
#F5F7FA
Gray 200
#DDE3EA
Gray 400
#A6B3C0
Gray 500
#7E8EA0
Secondary · Blue
Blue 50
#EAF3FA
Blue 500
#2F85BE
Blue 700
#205D87
Ink 900
#0E3554
Feedback
Warning
#FFB92D
Error
#D63B3B
Success
#2F9E69
Typography runs on Open Sans, with a type scale built around how developers actually referenced styles in code.
Four button variants cover every level of emphasis, so developers reach for the right one instead of improvising a new style.
Primary. The one main action on a screen, like submitting a request.
Outline. Lower-emphasis actions placed next to a primary one.
Ghost. Low-emphasis actions inside dense UI, like tables.
Destructive. Actions that reject or remove something, like denying a request.
Every field state is accounted for, from default to error, so the experience stays consistent across the platform.
Default
Focus
Error
Selecciona una fecha de inicio para continuar.
Disabled
The redesign
From confusing to clear, guided flows people understand.
With the design system in place, I redesigned Fractal's most-used flows, both what employees see and the admin tools that approve their requests. Request submissions was the biggest source of support tickets: people couldn't clearly see how many vacation days they had left, and some terms were never explained.
Having the design system already built made the redesign fast, since every component was ready to use. Now each request type walks you through its own steps, instead of one form trying to do everything.
* Showing the vacation request flow here since it's one of the most popular, but this same approach was applied across many more flows.
Applied hierarchy. Before, everything sat at the same level, balance, type, payment, dates, with no order to follow. Now it's step by step: balance first, then your choices, then dates.
Live balance feedback. The old form showed your balance as plain text, easy to miss. Now a progress bar updates as you pick your days, so you see the impact before submitting.
Explained the jargon. A lot of people didn't know what "tipo de goce vacacional" or "forma de pago" meant. Now both are radiocards with a short description under each option, so you're not guessing.
The same thinking applied to the admin side: the queue managers use to approve or reject every request that comes in.
Moved categories into a persistent sidebar. The old page put every category up front before you could see a single pending item. Now they live in a slim sidebar with a live count next to each, which also scales better as new categories get added.
Leaned into minimalism. The old screen packed color and borders into almost every element. The new one leans on white space, so there's less to parse and your eyes move faster.
Results
From 15 Slack pings a week to near zero.
After the design system launched, Slack requests for individual screens dropped to near zero. Developers could self-serve from the Figma file without needing me.
The redesigned experience shipped to clients and the PM reported a 30% reduction in support tickets, directly tied to the new request flows.
30%
Reduction in support tickets after the design system and redesigned experience shipped.
* Reported by the product manager following the redesigned experience launch.
Key takeaways
What this taught me.
Start with the system, not screens
Every design decision without a shared foundation multiplies rework for designers and developers. Building the design system first made every feature after it faster to design, build, and scale.
Your job isn't just design, it's advocacy
Changing an established handoff workflow the team had relied on for years required building trust, explaining the benefits, and getting buy-in before changing anything.
