Factorial: Engineering "Persona"
Scaling a startup's visual identity across 6 markets in a 90-day sprint.
By early 2021, Factorial was rapidly outgrowing its startup roots. While the platform was a powerhouse for HR automation, our online presence told a different story. The visual identity hadn't been touched since the 2016 Barcelona launch. We were building ambitious software for the future of work, but we looked like a legacy corporate tool.
I was brought onto the Growth Team to scale our online presence, but it quickly became clear that before we could scale the marketing, we had to rebuild the machine.
My Role
I led the visual development and architecture of our entirely new Design System. Working at the intersection of a newly formed Branding team and our Front-End Engineers, my mandate was to overhaul the marketing site, blog, and landing pages across 6+ international markets.
The Challenge: The 90-Day Deadline
In preparation for a massive brand relaunch, leadership tasked us with completely revamping the marketing ecosystem. The target launch was September. We began the foundational work in June.
We weren't just reskinning a website; we had to audit existing UI patterns, document a fractured ecosystem, build a new Design System from scratch, and hand off components to developers—all before the summer ended.
The Friction: A Three-Lane Collision
The greatest threat to this project wasn't the timeline; it was the logistical overlap. The ultimate goal was to migrate existing pages to the new design language without completely redesigning their underlying structure.
This created a massive dependency loop:
- Design Systems needed the new visual identity from Branding (colors, typography) to build components.
- Engineering needed the Design System to start the code migration.
- Product needed all of the above to align the core app with the marketing site.
The Strategy: To break the deadlock, we executed a "Token Surgery." Instead of starting from absolute zero, we targeted the underlying architecture of the old, incomplete system. We hot-swapped the base tokens (typography, colors, spacing) as the Branding team produced their earliest concept visualizations. This allowed engineering to begin migration while we fleshed out the missing UI components (search patterns, custom form fields, and complex accordions).
The Concept: "Persona"
Factorial’s core value proposition is that it handles the paperwork so you can focus on your people. We needed to encode that philosophy directly into the UI.
We named the new Design System "Persona" (Spanish for "Person"). This served as a constant North Star for our design decisions. It meant stripping away the cold, traditional corporate HR imagery and replacing it with a vibrant, modern, and human-centric visual language.
Our visual shift: Moving from stiff, stock-photo corporate environments to energetic, authentic human interactions.
Here's a side-by-side comparison of the original Sign-up flow that comes right after the Homepage VS the new visual approach, more human, targeting real “personas”:
The Controversy: The "Glass" Dilemma
A major conceptual pillar of "Persona" was the idea of transparency. At the time, major OS providers were leaning heavily into semi-transparent, low-contrast interfaces (reminiscent of the conceptual UI in the movie Her). We wanted to capture that innovative, frictionless feeling for Factorial.
However, "Glassmorphism" is incredibly risky. The tricky part is finding the exact line between a cutting-edge aesthetic and an accessibility nightmare.
We engaged in heavy internal debate about how far to push this. The compromise was strict governance: we reserved the "glass" effect exclusively for floating elements—modals, pop-ups, and overlays. It created the desired depth and modern feel without ever compromising the readability of the core content beneath it.
The Outcome: Stress-Testing the System
We successfully hit the September launch, but a design system is only as good as its scalability.
To prove the robustness of "Persona," I went beyond component documentation and put the system to the test. Using only the new grids, conceptual rules (glass and elevation), and components, I rapidly prototyped full page proposals for the Resources Hub, Blog, and Homepage.
The system didn't just hold up; it proved that Factorial could finally design and ship at the speed of its own ambition. Here are some UI test applications and page redesigns to illustrate it: