Design System
I created and helped implement a design system to serve as the source of truth for the company’s growing number of products.
My Contributions
Research • Foundational Elements • Component Library • Mockups • Documentation • Usability Testing • Product Management • Dev Support
The Challenge.
As I started building our design practices at my company, it became very apparent that our design process was not scalable. We had to evolve our process in order to keep up with increasing demands as we integrated the design element more heavily into our product lifecycle.
Creating a centralized and socialized source-of-truth became essential. I decided to invest a significant amount of time and energy into building our first design system.
The Foundation.
We started by building a solid foundation infused with the essence of our brand.
Material Design was the inspiration and base of our design system because of its clean and uncluttered feel.
A solid foundation was essential to ensure the design system was scalable and could grow. This included the color palette, typography, iconography, elevation, spacing, and a few core animation curves and timing.
Once we had the foundation in place, we started building out all of the components that we needed in the platform. We stayed lean by only creating components that we had a need for, thus eliminating many hours of extra work.
Component libraries were built in Figma and utilized variants and auto-layout features to allow us to easily design for different screens and customize the UI elements to fit the function of the screen while remaining true to our design principles.
Alongside a front-end engineer, we considered how to best implement the design system.
We decided to extend and modify the PrimeNG library to support our Angular front-end applications.
This enabled us to stay lean and adopt a framework instead of building a new one from scratch.