User Experience
Design System
Tyler Wetzel, Andrew Hurley, Lara Pilny, Gina Iannitelli, Jon Daiello
Flex Design System
The DSX team had already made significant progress in building the Paychex Flex system as UX teams transitioned from Sketch to Figma. My primary objective was to create new assets, elements, patterns, and components to expand the Flex kit while documenting interconnected styling and functionality.
Paychex's kit for Flex product experiences, built with Kuiper
This system is governed by the DSX team and outlines the available assets for designers to use in their product design solutions. The Flex System primarily is the set of guiding rules that shape the components and expected experience outcomes.
The actual code and interactivity comes from a development framework called "Kuiper". In short, Kuiper provides a set of atomic level components that come pre-packaged with functionality, styling features, and accessibility. In Kuiper these components are very basic, they lack variations and theming.
It is the responsibility of the Flex System to tell the Kuiper components how to look. Unless your team is pursuing the creation of a snowflake, you will likely not interact with a core Kuiper component on its own.
During the process of crafting our first design system documentation, I identified the following key opportunities:
During the process of crafting our first design system documentation, I identified the following key opportunities:
During the process of crafting our first design system documentation, I identified the following key opportunities:
1. Research
My initial step was to assess the current user experience and identify inconsistencies across the product. By reviewing local components and discussing errors with designers from each swimlane, I gained insights into their needs and developed robust components tailored to those requirements.
2. Fixing Errors and Maintenance
As I built new components for our rebranded design kit, I was responsible for creating reusable assets and updating outdated elements in the library. Managing the library allowed me to improve its overall coherence and usability, ensuring consistency across the system.
3. Color System
Previously, designers and developers faced inefficiencies and confusion due to inconsistent color usage. To address this, I evolved the base palette into a semantic palette and introduced alias tokens. This initiative improved workflow efficiency and fostered stronger collaboration between designers and developers.
4. Documentation
Collaborating with content designers, I created comprehensive documentation for both product designers and developers. This not only enhanced my understanding of effective design practices but also provided valuable insights into daily tasks and team dynamics across disciplines.
5. Collaboration
One of the most rewarding aspects of being part of the DSX team was collaborating with diverse stakeholders throughout every stage of the projects I worked on. Supporting designers and developers allowed me to build meaningful relationships, which made the process both productive and enjoyable.
