‘What design pattern do I use?’

Creating a design pattern library

The Problem

VMware’s suite of cloud management products was being integrated into one platform, VMware Tanzu Hub. This required each of the products to be reconstructed and combined into a single offering with common services and a consistent look and feel.

To achieve this we needed to align 12 product teams so they were using common design patterns. Some patterns were new, and some had multiple versions being used in different products. We needed to define a set of approved patterns so all designers were on the same page.

We wanted to do more than just document the patterns. We wanted to create a Figma library of components, templates, and usage rules so that designers had a single source of truth as well as components to easily drop into their designs.

The Product

VMware Tanzu Hub is the new access point for all of VMware’s cloud management products. This meant that all new and existing cloud management products needed to be integrated into the Hub. This required rework for existing products and alignment for new products. We had to make sure that each product area within the Hub used the same patterns and common services.

Atoms, Molecules and Organisms

All our products were using the VMware Clarity Design system, so why did we need a design pattern library?

Clarity provides the basic “atoms”, for example, buttons, input fields, and drop-downs. But we needed to go beyond that to provide more complex patterns, the “molecules” and “organisms”, so that our customers have a common experience for items like forms, data-grids, and multi-step workflows.

We worked with the Clarity team to ensure we were using the latest approved versions of the Clarity components, and then worked with them to review their Figma library of basic components to ensure we could use it as the building blocks for our patterns.

The Users

The library supported 80+ designers and developers. Each of the 12 products had a team of designers and developers that needed to align their patterns with the Hub. 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.

The Team

I was project lead on the library from its conception, then co-lead once we scaled larger. We gathered a core team of designers to create and publish the library, and involved a large team of designers to contribute and review patterns. I managed the process, resources and schedule.

My role: Project lead

Designers on library core team: 6

Designers contributing to library: 25+

Patterns: 40+

Special thanks: This was a huge team effort but I have to express my gratitude to these superstars.

Nicholas Pappas joined me as co-lead as the library scaled larger. Nicholas automated our process.
Drew Smith is a Figma guru as well as an amazing designer.
Sarah Plantenberg provided excellent mentoring and ran our workshops.
Soomee Kang, my manager, helped me organize and build a process to succeed.

The Design Process

Design Exercises

I organized a series of workshops and sessions to understand the needs of our users and design our process.

Brainstorming 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.

To the right 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.

Prioritizing Patterns

I ran team meetings to identify and prioritize the patterns needed in the library. We reviewed all the products to understand where the biggest differences were, and which patterns were the most critical.

Defining the Process

We reviewed the outcomes from the workshops and built a process. These are highlights.

Standardized tickets in Jira for all work
2 week sprints ran parallel to the design sprints on the Hub
As each designer became available they took a pattern, researched it, reviewed it with the team, documented it in a branch of the library, then reviewed it with the core library team for approval.
Weekly demo meetings to show work in progress and final decisions.
A community channel in Slack for discussion with developers and engineers.
Include the Clarity team to review patterns to ensure proper usage of the atoms.
Include the Accessibility team in reviews to ensure that all patterns are accessible.

Growing Pains

As word got out that we were creating a Figma pattern library, more and more designers and developers asked to get involved with the active community growing to over 80 people. I had a period of growth as I learned new leadership skills and how to organize a large-scale project. We had a workshop to discuss scaling issues and decided to bring in additional people to the core team, and to refine our process for reviews.

The Design Pattern Library

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. Accessibility was also reviewed for every pattern to ensure that all patterns are accessible.

Figma Components

Each pattern also has a set of Figma components so designers can easily use the approved elements in their design work.

Many designers contributed to the library. Special thanks to Kim Chan, Alex Wan, Anusha Vasudeva, Drew Smith, Soohyun Park, Shruti Chaudhry, Deyan Angelev, Rhandee Leano, Niyanth Kudumula and many more.