Design System Maturity Rubric
Poorly-documented design systems and no dedicated team to work on them
Skills
Research
Design Systems
Building Figma Components
Peer Presentations
Collaborators
Product Design Lead
Intermediate Product Designers
Tools
Figma
The company I helped to develop this rubric for had multiple digital products, each with their own design team and design system with little to no documentation for how each system worked. There weren’t any resources dedicated to building, documenting, or maintaining any of the design systems so it had become a very large group project amongst everyone on the design team to document the existing components, especially where there was overlap between design systems.
The whole team agreed that the end goal was to have usable component libraries, detailed documentation, and eventually a code component library for the developers so that we could reduce the amount of time being spent coding designs, as well as the amount of design debt being created. However, progress was stalling as designers reached points where they weren’t sure how to build components in a scalable manner, document them appropriately, or what “done” was supposed to look like.
To get things moving again, a small team of designers from each main product got together to work out what we should be aiming for.
Process
Our main goal was to research best practices for design systems and bring our findings back to the larger team so that we could provide guidance on direction and methodology. We decided our first focus should be defining what “done” looked like and then figure out a way to evaluate how close each design system was to “done”. We thought that if we had a clear idea of where each design system stood, it would help us identify what each one was missing and the team could focus on those areas next.
I suggested creating a rubric that would allow us to score a design system in a few key areas so that we could have more nuance into areas that may be lacking as well as an overall picture of the maturity of the system as a whole.
For the different stages/levels of maturity, we leveraged the Neilsen Norman Group’s 6 Stages of UX Maturity:
Absent
Limited
Emergent
Structured
Integrated
User-driven (Mature)
As a group we ideated different aspects of a design system that we thought would be important markers of its maturity and eventually narrowed it down to nine overarching areas:
Documentation: how well are the components and elements of the design system documented
Governance & process: what’s the process for updating and maintaining the system, what are people’s roles
Foundations: how solid and robust are the foundational elements (e.g. colours, typefaces, elevation, icons, motion)
Organization: is the system well-organized
Component structure: are components built in a way that’s easy to use and doesn’t require detaching
Content guidelines: have content guidelines, and word/character counts been defined
Adoption: are people using the system consistently
Accessibility: are the components and patterns accessible
Patterns: does the system have defined patterns for how to use and group components
We also defined what each stage of maturity looked like for the different areas.
After we reached a consensus, I took all the information and created an interactive component for the rubric that we presented back to the larger group, to make it easier for them to focus on relevant areas for their design system. They could insert it into an introduction page within their design system files, fill it out and see which areas they needed to work on. It also helped with accountability over time if they used it at regular intervals, as well as helped future team members understand the current status of the design system.
Result
The rubric was very well received by the larger design team and people were excited to start using it.
Disclaimer: The content shown in the images is not real and has been subbed in to protect proprietary information.