In late 2020, it was decided that we needed to create a more formal design system to handle the increased size of our team and the multiple products we were working on. Until that point, we had been using a rough Figma library with documentation scattered across spreadsheets, Figma files, and Word documents.

It has been a little over two years since we started working on Dimension, and despite facing many challenges along the way, we have made a lot of progress.

Challenges

Team of (Mostly) One

For the most part, I was the only full-time person on the design system team. It was a regular occurrence that support from content, development, and other designers was temporary, as they were needed on other projects.

Nevertheless, Dimension wouldn't be what it is without everyone who contributed to it over the last couple of years.

Limited Development

Development support was very limited. There were no developers available to work on the design system during 2022. This led to the design system deviating quite a bit from what was coded.

Navigating Silos

Silos are everywhere at SVB. They exist within a product, between products, and between departments like design and marketing. It was a challenge to work around these silos to get alignment across teams.

If you want to see how I successfully led an effort to break down some of these silos, you can read about it here.

Building Dimension

Early on, I was primarily responsible for creating assets for the design system. To flesh out Dimension, I sourced assets, components, patterns, and brand elements from the products that were currently being built. I would then collaborate with designers, developers, and content strategists to make sure I had a full understanding of each element that would be added to the system.

Over time, my role evolved into leading the design system team, where I took on more responsibilities for growing and evangelizing the system.

Highlights

• Built out the component library utilizing all of Figma’s design system features including variants, component properties, slots etc.

• Created color, type and other style systems in accordance with SVB’s brand guidelines.

• Fostered an open community around Dimension by holding office hours, 1:1 meetings and surveys to make sure the system was solving problems for the team and discover what could be improved.

• Presented to stakeholders and executives on the benefits of designs systems, our progress and why teams should adopt Dimension.

• Created contribution and governance models for Dimension.

Documenting Dimension

By the spring of 2021, Dimension was just a Figma library, and nothing had been documented. The lack of documentation was starting to cause problems, as our team had continued to grow, and the number of new projects spinning up wasn’t slowing down.

Since then, I’ve worked with designers and content strategists to document everything from colors, components, patterns, and UX writing guidelines.

The goal for the documentation was to:

• Answer usage and implementation questions

• Educate designers, developers, and product on the benefits of the system

• Explain how to use the design system

• Standardize design at SVB to promote a consistent experience for our clients

The site has been a huge success, receiving over 15k page views over the last 2 years.

"Had an issue with a dialog, where it was being used improperly and not adhering to content guidelines. The doc site section on dialogs made it super easy to figure out a temporary and long term fix for this design. 5 Stars." Claire J.

Outcomes

Despite the challenges we encountered, we've made significant progress over the past two years. Specifically, we have:

• Established a collaborative culture around the design system where designers are excited to contribute.

• Successfully worked to get stakeholder alignment on the vision for the system across design, product and tech.

• I’ve partnered with designers, developers and product managers across the SVB to onboard, educate and integrate the design system into new products.

• Built a comprehensive Figma component library that serves multiple SVB products and, at one point, 20+ designers.

• Created an internal reference site that covers everything from color, type, components, patterns, and UX writing. The site averages a few hundred page views a month.

• Increased the speed and efficiency of product teams by providing a baseline for them to work from.