Overview

Vanguard's Personal Investors secure site web experience relies on a family Figma library that is branched from the enterprise design system, Constellation. This library was built quickly and without formal planning to meet immediate product needs. This led to inconsistencies, bloat and lack of documentation. This library needed overhaul and maintenance since It supports 44 teams across the organization.

Challenge

As Design System Librarian for Vanguard's Personal Investors secure site , I owned the Figma design library that serves the secure site product family. This library would be used internally by design, product and engineering.

Responsibilities:

• Maintain a healthy, well-structured library that designers could rely on day to day.

• Build a governance model that designers can follow when building, refactoring or deprecating components.

• Ensure that the family library stayed in alignment with Constellation (Vanguard's enterprise design system).

• Audit inconsistencies and systematically close the gap through proposals, reviews and documentation.

AI representation of the designer persona who would use the library

Key activities

1. Audit

The secure site Figma library was audited by reviewing every component, variant, property set, and naming convention. The goal was to understand the library's current state and how it deviated from Constellation standards. A comparative analysis and a set of recommendations were formulated for team alignment.

Component audit, comparison and findings

2. Governance

I created an actionable checklist that was reviewed by 2 teams to establish a clear contribution, change management and documentation guidelines for the secure site library. It included:

• Documenting types of components

• Step by step instructions to build a component

• Naming guidelines that align with Constellation

• Documentation guidelines for development

• Deprecation steps

• Preparing a component for publishing

• Testing components

• Reviewing components

• Publishing components

Checklists for designers

3. Storybook alignment

Co-ordinated regular meetings with Storybook owners and developers to ensure that the Storybook components followed Constellation guidelines while supporting unique use cases for Secure Site. It included

• Reviewing Storybook organization, content and styling based on Constellation principles.

• Component audit and gap analysis between Figma design artifacts and Storybook code components.

• Discuss and prioritize items from the component delivery roadmap.

Storybook components audit and suggestions

4.Component refactor

I conducted a full audit and review of every component in the Secure Site Figma library. They were evaluated against Constellation's guidelines to inform the refactor strategy.

• Remove bloat to strip out duplicate properties and redundant variants.

• Aligned component names to Constellations's taxonomy for consistency.

• Leveraging Figma features like modes, slots and booleans to build efficiency.

• Replacing raw values with Constellation semantic tokens throughout the library.

Component analysis and refactor

5. Documentation

• Providing component specifications and breakpoints for development.

• Documenting available component properties and guidelines for use.

Component documentation for developers

6. Metrics

• Measuring the Figma library impact through reviewing analytics.

• Regular meetings with designers and developers to discuss ways to optimize the library.

Figma library usage analytics

Impact

• 126 components refactored.

• 2000+ inserts per week for over 51 teams.

• Comprehensive documentation.

• Aligning the design library with development artifacts.