Paylocity is a leading provider of cloud-based payroll and human resources software. I helped design a new system from the ground up to incorporate their new product language.
Paylocity's design system
overhauled with teamwork .
Paylocity had an existing design system called Citrus. However, a new product language emerged, called Citrus 7. The Citrus design team (Arielle, Brian, Ross, and myself) were tasked with building a new design system to support it. I helped to establish parts of the token architecture, designing components, organizing the system, and facilitating design-engineer collaboration.
This case study is a concise overview. Additional details available upon request.
Design tokens improvements
to improve the way we work.
Arielle led the token architecture and I provided support. The previous token architecture lacked component-level tokens, which was crucial in implementing the new product language. This new architecture would be industry standard and help with updating components more accurately.
Additionally, we chose not to invent a new way of formatting design tokens. Rather, we decided to use the W3C token draft for our formatting.
Proof-of-concept
that worked with 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.
