The biggest update to a design system ever, built on abandoned work 

While at VMware I led the design efforts to release the largest update to Clarity design system in it's 15 year history. I had to figure out how to unify two libraries, reverse engineer design tokens, and ensure I was meeting the needs of my design stakeholders. 

What I accomplished

• Built a library from the ground up for prototyping, design tokens, and documentation
  
• Buy in and adoption from major design stakehholders
• Wrote and designed centralized specs, guides, and components leading to easy adoption.  
  

 The team

• Lead Designer (me)
• Manager
• 1–3 designers helping out
• Product manager
• Project manager
• 3 full time developers

I was challenged to merge unfinished systems into one.

Clarity is VMware's internal design system. It was one of the first design systems to be built in house and widely adopted throughout a large organization. It had gone through several iterations and was simultaneously reliable and saddled with design and technical debt. Adoption had begun to slip.  

As a result, Clarity was facing a mandate to update in a bid to ensure relevance and maintain the team through the Broadcom Acquisition. 

Clarity was actually two design systems. One widely used but and ran on an old tech stack. Another ran on a modern back end but wasn't adopted. Neither were modern by Figma standards.   

Strategic relationships with teams created evidence I could use to push for change

I rebuilt a backlog in JIRA and restarted pushing small updates to libraries. At the same time I interviewed other design leads and shadowed designers as they used the libraries. listening to their feedback on how designers used Clarity. 

• Lack of modern Figma feature support caused teams to ignore or rebuild components
• Teams often built whole systems on top of Clarity to expand it
• Junior designers would break components, preventing their mockups from ever getting updates

I made the case to create a new library and won

Leadership initially demanded we either update the old, more popular library with the new visuals or provide non-functional development specs without a new library. In the first case, we would be bogged down in fixing a broken system of files. In the second, we wouldn't be providing anything our design customers could use. 

Using my research, I made the case that it was finally time to pay down our extant backlog and prioritize serving the teams that used Clarity. Much of the knowledge, though salient in the organization, hadn't been presented or coalesced in one place. With permission to build from scratch, I got busy. 

Accessibility was a part of the process from the start

We had an embedded accessibility specialist on our team I met with at least weekly who was part of the QA process. All colors were checked using a contrast analyzer and I followed WCAG 2.1 AA guidelines. Other discussions included :

• Target sizes for WCAG 2.1 vs 2.2 and planning for larger sizes
• Refining dark theme visual design and color contrast
• Tab order and screenreader compatibility for complex components
• Text vs non-text contrast for elements

I'm currently working on getting my Certified Professional in Accessibility Core Competencies (CPACC) certification.  

I reverse engineered the tokens and reestablished an understanding of the system

Lack of institutional knowledge and documentation left the team with a vast library of tokens and an unclear guide to applying them. Many of the tokens (particularly color) lacked contextual evidence for their application. 

Some token names were not as contextual nor readable as they could be, so publishing guides helped us and the design team get on the same page while we considered rewriting the naming structure and heirarchy.

I wrote many guides for my team and for designers at large, embedding institutional knowledge in public, easy to acess places like the library itself. 

I mandated standards for the team to follow

I focused on maintaining a simple architecture and aligning the team to build in a similar manner. I prioritized

• Robust autolayout and resizing capabilities so components wouldn't break
• Building in prototyping and hover / pressed / error states
• Thorough use of tokens, including for spacing and sizing of elements

Throghout the process I served as the primary QA for the project.

An example of a component wired up for prototyping. 

Regular audits of components assured our designs were coherent. 

Focusing on a better library led to a faster path to production

I created a rollout plan with engineers so they could get working on such as updating the underlying color, typography, and spacing systems while we worked on components. I created spreadsheets, updated github, and audited our storybook as necessary to make sure devs had the feedback we needed. 

The work paid off. Prototyping made it easy to review and head off issues before code was written. Meticulous token adherence meant many issues were fixed globally.

An example of a spec delivered to developers and embedded within the library itself. 

Embedded institutional knowledge ensured adherence to quality standards

A key feature of our work became centralizing resources in the library itself. Along the way the design system library included

• the components themselves
• specs for developers
• guides for designers 

Mid-project, Figma gave us a gift in releasing native variable functionality. In a week and a half(ish) we had wired our library so that light and dark themes lived in one file. 

An invite-only Alpha led to crucial usability improvements

Eventually we opened up the library to an limited Alpha and then an open Beta program. I was keen to make sure our team could fix any usability issues we hadn't anticipated. 

Responses from Alpha participants led to us tweaking colors, more intuitive names for variables, and adding component “slots,” among other important updates. 

We pushed our release publicly to overwhelming success

By the time we released our product manager and I had met with all the teams to discuss the upgrade effort multiple times.  We'd found the that the improvements to the library balanced the extra uptake effort we were asking for. 

Crucially

• The two largest product areas agreed to uptake the new library
• Metrics in Figma indicated our new components were rapidly being added to designs
• We regularly received public praise for our work

What happened?

• Two largest products signed on to uptake the new library
  
• Two libraries and two back ends unified into one library and one technology stack
• Massively overhauled team process and backlog
  

Seeing our system picked up and used was incredibly gratifying. Establishing a faster feedback loop meant Clarity moved closer to the design organization and VMware's end users. 

Though the team survived, most of the US based staff was laid off. It was sad to lose something I worked so hard on. However, the experience cultivated a love for design systems and the process of creating them.