Paylocity's design system
Paylocity
Position
Staff Product Designer
Role
Design System Lead & Architect
Project date
April 2024
ui-ux-design
Paylocity had an existing design system called Citrus. However, a new product language emerged, called Citrus 7. The Citrus design team (Javier, Brian, Ross, and myself) were tasked with building a new design system to support it. I helped define the best practices for creating components, established the token architecture, built component tooling, organized the system, and facilitated design-engineer collaboration.
Design token improvements
to improve the way we work.
I led the token architecture with support from Javier Jacome, a senior product designer on the project. The previous token architecture lacked component-level tokens, which was crucial in implementing the new product language. This new architecture aligns with industry standards and helped enable seemless switching between themes. Additionally, we based our token naming and structure on W3C guidance.
Proof of concept
with our engineering partners.
Since our design token architecture was improved, we were able to design with our previous product language (Citrus 6) in conjunction with Citrus 7. We utilized variables and modes to view changes in Figma. This acted as a proof of concept for our engineering team to implement on the coded components.
Building atomically
through team collaboration.
All designers on the Citrus team contributed. Together we collaborated to construct components in Figma that balanced the needs of aligning with code and having the best practices in Figma. We held an atomic design approach for building components. By doing this, designers could solve and design for user context more efficiently.
Handing off design
with good documentation.
As components were designed, I set the team up with handoff documents that went into detail about a component. In this handoff, we would detail interactions, components needed, props, notes, etc. This document acted as the main anchor point between our engineers, designers, QA, and product.
