Scaling design and development with a design system
GPARENCY used two contractors to design our products that implemented their own styling. Our products suffered from design inconsistencies and contributed to a confusing user experience.
We wanted to create a design system to establish visual cohesion across all products and improve development speed but we ran into many problems when ideating how to move forward with our design system.
When performing an audit of our products and current designs we found these issues:
I worked with my manager, the Head of Design to ideate what we needed to include in the design system and scoped out new components we needed to build.
We implemented these processes to guide us through the creation of our design system:
.png)
Font & background color paired together
to meet accessibility
.png)
Documentation on the use case of each color
and how to correctly use them
We wanted to create a shared language between designers and developers as we would be in constant collaboration together. Our components had similar naming conventions as developers, reducing the time they needed to reference and code them.
Our components had built-in prototyping interactions created to mimic a live prototype. This helped us do two major things:
Design specs matched the dev build on our modal forms
Utilizing variants to show different states and levels of customization
We labeled our Input Fields by use case and state so that we kept our file organized and searchable. This contributed to our design language by using the correct combination when handed over to developers.
When we needed to make changes, it would only affect the necessary parts as we only had to update them with the new values. We applied this method throughout our file to create sustainable and scalable designs.
Input Fields organized by use case and states so that they can be referenced quickly
To set our team up for success, we wanted to create documentation for both new and existing team members.
We wrote guides on how to contribute to our design system and when to use certain components. We also logged all our changes to keep track of when and what we added or changed to the design system.
The creation of our design system helped reduce our design debt by increasing our design velocity. We were able to prioritize new features coming from the product roadmap and have designs ready for devs to build when a new sprint rolled around.
Our dev team loved the design system as they could reference the design specs of our component by using the design system as a single source of truth.
Here are some of our accomplishments and expected outcomes:
