Kanvas
Laying the foundation of a design system
As the design system lead, I collaborated closely with our Engineering Lead to cultivate a community-driven design system, enhancing its maturity, scalability, and overall impact. Within our small team, I played a pivotal role in creating our roadmap planning, conducting weekly reviews, mentoring, and establishing recommendations on best practices.
Auditing the Design System
The existing design system had been a community driven effort with no real leadership. To better understand the state of the design system, I began auditing the existing components in Code & Figma to see what was being used and what was missing.
Influencing The Work
In order to priotizie the work, it was crucial to secure buy-in from the leadership team. This would create alignment in establishing a solid foundation, enabling us to effectively scale for the future. Collaborating closely with the Engineering Lead, we formulated a roadmap for the entire year, meticulously outlining the scope of our projects and creating a detailed execution plan.
Making The Updates
After receiving approval from leadership, we began updating our design library to match our code components. In the next four months, we not only met but exceeded our expectations and hit our yearly goals. Additionally, we started sharing our progress with the rest of the organization to demonstrate how design systems enhanced our product.
Tracking Changes
In an effort to raise awareness of design system updates, I documented the changes within our Figma design files, and made sure to provide updates with each release so everyone knew which components were being updated.
We also discovered a need to raise visiblity for our in-progress work. This led to the creation of our component tracker, which was part of our product documentation and roadmap. This made it easier for people to view the updates and see what was coming next.
Accessible Components
In addition to having pairity between design & code components, I also ensured that we were building them with accessbility in mind. We tested each component against a set of acceessibility requirements (color contrast, keyboard navigation, themeing etc) and ensure that each component was accessible for everyone.
Kanvas Figma Demo
Below is a sample of one our popular components (Table Template) that includes nested variants, component properties, built-in interactive states, and fully customizable.
Impact
Over the course of the next 6 months, I helped bring our Figma library up to pairity with what developers have been using and also snapped our terminology to the same vocabulary so designers and developers stayed in sync. We also worked to update all of our existing docuemntation to a single platform so that designers and developers were using the same guidelines.
After several sprints, we were able to make major strides in bringing our component to pairity:
- Updated components improved from 26% to 75%
- Outdated components decreased from 33% to 5%
- Missing components decreased from 41% to 17%
This allowed our design team to move more efficiently in creating new features without having to worry about if our components were out of date. Our designer to developer hand off transition significantly improved since everyone was using the same terminology and referencing the same components, reducing the issues at implementation.
Collaborators
- Bree Chapin - Design Manager
- Brandon Nydell - Engineer
- Naing Htet - Engineer
- William Frohn - Designer