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 mobile complaints.
Built a centralized Figma design system from scratch, then used it to design a responsive mobile experience for the platform's most-used flow.
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 mobile was growing, I knew that building responsive 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 structured color palette using Fractal's main color with clear usage rules so any developer could apply the right color without guessing.
I replaced Open Sans with Inter for a more modern feel and built a type scale with named tokens aligned to how developers referenced styles in code.
Buttons were prioritized first because they appeared in every core flow. I documented all states and specs so nothing got lost in handoff.
Form fields were the second most repeated component. Every state was accounted for, from default to error, keeping the experience consistent across the platform.
* Showing 4 of 12 documented sections. The full system also covers iconography, spacing, navigation, modals, tables, and more.
Mobile experience
Designing for the platform's most-used, most-reported flow.
With the design system in place, I designed Fractal's responsive mobile experience. Request submissions was the most used flow and the biggest source of support tickets.
The original desktop experience crammed everything into a single dense form that didn't translate to mobile. The design system made this fast since every component was already built and documented.
A home screen. Surfaces today's assignment and in-progress requests the moment the app opens.
A bottom sheet with every request type. Vacations, medical leave, shift swap, overtime, license, permits, all one tap away.
Focused step-by-step flows. Each request type walks through its own focused steps instead of one dense form.
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 mobile experience shipped to clients and the PM reported a 30% reduction in support tickets, directly tied to the redesigned request flows.
30%
Reduction in support tickets after the design system and mobile experience shipped.
* Reported by the product manager following the mobile 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.
