Use Case: Tanzu Design Pattern Library
The Tanzu Design Pattern Library provides documentation and Figma components to ensure alignment among 12 product design teams. We used the Clarity design system for the “atoms” but needed to define the “molecules” and “organisms” - the higher level patterns used throughout the platform.
I started the library with workshops to define the process, then ran the project with agile sprints every two weeks. I ran sprint meetings and weekly demos, as well as presentations to management. I created an inclusive culture around the library using Slack channels which were open to designers, engineers, and stakeholders. This became the place to ask about patterns and to receive guidance on both usage and implementation.
My role: Project leader
Designers on library core team: 6
Designers contributing to library: 20+
Patterns: 40+
Process: 2 Week sprints, weekly demos, Jira tickets, community Slack channel
Design Pattern Library
The library is contained in a large Figma file. Each pattern has a page with documentation explaining how the patterns should and should not be used.
Each pattern also has a Figma component so designers can easily use the correct elements in their work.
Image: Example from the Tanzu Design Pattern Library
Pattern Documentation
Library pages include documentation with specifications, examples, and usage rules with Do and Do Not examples.
Accessibility was also reviewed for every pattern to ensure that all patterns are accessible. I included our A11y team in design reviews to ensure compliance.
Image: The library page for tooltips (detail)
Templates and examples
Some library pages such as this one I did for forms provide a page template that includes all form components laid out properly with auto layout. Designers are able to drop the template into their designs and easily create the form they need and be sure they are aligned with other products in the platform.
Image: An example page template in the library
Workshops
I collaborated with Senior Staff Designer, Sarah Plantenberg, to run workshops to define the process for designers to contribute to the library. We knew the project was too large scale for a small team to do in the required timeframe, so we engaged designers from multiple teams.
This is a screenshot from a brainstorming workshop where we used “found” objects to create models of the ideal process. The results of the workshops were very positive and designers were excited to participate.
Image: Miro board from library process workshop
Prioritizing patterns
I ran team meetings to identify and prioritize the patterns needed in the library. We reviewed the products and found the most common and most needed patterns.
This is a screenshot of a Miro board to prioritize the patterns.
Image: Miro board for prioritizing patterns
This is a brief summary of my work on the library. Contact me to learn more.