Pixel Design System
Pixel is a design system created for Jobvite to standardize the visual design language and consistency of patterns and elements across their products.
Overview
Jobvite was wanting to do a visual redesign of their products to improve customer retention and stay up-to-date with their competitors. The lead engineer and I realized a design system would be needed to deliver a consistent visual design and improve our current hand-off and QA process for the redesign.
Year
2021
My Role
Senior UX Designer
Research
To gain leadership approval and allocate resources for a design system, I conducted surveys with engineers and designers to understand their workflow challenges, performed an audit of our product for inconsistencies, and researched case studies of successful design systems.
In this screenshot, designers were using a single sketch file to grab components and styles from.
Key Insights
After presenting the following challenges that our team and product currently face due to the lack of a design system, we were able to secure the necessary resources and plan a design system on our roadmap.
With five different repositories for components and code, our engineers face challenges in locating the appropriate components, resulting in delays in the development process.
The design team has been using a Sketch file to access components, which has led to uncertainties about its accuracy and caused inconsistencies in the design.
Our components and styles are not adequately accessible, which creates barriers for users with disabilities and can harm the overall user experience.
Styles
I explored of various typography and colors to review with the design team. Our goal was to establish colors and text sizes that would be more inclusive and accessible to a broader range of users. We also recognized that improving accessibility would improve usability by creating a stronger hierarchy in the designs.
Components
I followed the principles of atomic design to develop a reusable component library in Figma. By breaking down the interface into smaller, reusable building blocks, ensured that the components were scalable and consistent across the product. This approach not only promotes faster iteration but also enhances collaboration among designers, developers, and stakeholders.
