About this Post

With the Tesla Design System, Tesla increases collaboration, people experience and saves millions of dollars and engineering hours every quarter.

Earlier this summer, I briefly highlighted the impact of the Tesla Design System (TDS) and the small, but mighty team responsible for it, some of whom are unfortunately no longer with us. During the last quarter, TDS adoption has continued to grow, resulting in increased collaboration and reduced costs, and I wanted to share a few of the latest developments with y'all, notably the performance measures.

First off, some context. TDS is our acronym for both, the team and the product (or design system), which stands for Tesla Design System.

Tesla Design System (TDS)

As a core systems team, TDS consists of a designer, a few engineers, including QA and me (on the product side who also wrangles pixels and code with the team). Additionally, we have an increasing number of contributors across the company, and an awesome intern joined us during the last two quarters. One of our top priorities is to help the TDS community consume and contribute to TDS easily, especially as we expand into new areas across the company (e.g. manufacturing systems, the vehicle platform, etc.).

Great team. Great system. Love em

TDS has historically been a distributed team (aka: remote). I consider the extended team to include, but is not limited to: leadership partners, cross-functional partners, and of course, our contributors, all of whom are global.

TDS as a product (or system) consists of components, design patterns, guidelines, and documentation that we develop, maintain and constantly update to meet evolving needs; effectively, TDS is built to provide visual consistency to Tesla’s digital products, enabling users to spend more time innovating and solving the big problems.

The TDS website is currently being redesigned with updated documentation and an improved personalized, user experience to help make it easier for people to learn, consume and contribute to. We're making it a point to use as much of TDS for this website rebuild to help illustrate its potential — we're super jazzed about it.

More than 650 community contributions to the Tesla Design System since 2018

TDS is based on HTML, CSS, JavaScript and Accessibility (we love the foundations of the Web). This foundation lets us scale and build components and patterns for the most people possible, various libraries, like React, and platforms. We also use a lot of homegrown and open source tools and utilities to build and maintain TDS.

TDS is used across the company, and we are constantly expanding our reach. Here's a glimpse of where TDS is currently used both internally and externally.

Some of the flagship products that use TDS are the Tesla website, the Tesla Energy product line, the Investor Relations website, Tesla's retail store apps, the world-class Tesla configurator, and, as of recent, the Tesla Native App.

Q2 2022 Earnings Call →

We also have a growing number of internal apps and products that use TDS, like our Tesla infrastructure systems, Tesla manufacturing systems, and the Tesla vehicle UI (e.g. those spiffy icons - those come from TDS!)

We are a team that is passionate about the Web, accessibility, collaboration, community, and design systems and the impact they can have.

Manny has always proven to be a competent leader. He's well-organized and efficient in delegating tasks and has always impressed me with the amount of work he accomplishes in a given timeframe.

Eric Ritchey, Design Systems & People @ Indeed | Ex-Tesla
Design Systems & People @ Indeed | Ex-Tesla

The TDS team has been working hard to improve accessibility and ease of use, which has resulted in an increase in adoption and usage. This has enabled us to save the company millions of dollars every quarter and a considerable amount of time (in hours).

The following is a high-level overview of the impact the TDS team and product helped to achieve in Q3-2022 alone:

  • Over $4.3M USD was saved (154% QoQ Increase)
  • 67k+ engineering hours were also saved (137% QoQ Increase)

In light of the fact that TDS is a small, core team, this is quite significant. By building and maintaining an effective design system, we are able to support teams scale their product lines, and save the company millions of dollars and thousands of engineering hours every quarter. In addition, we are able to simultaneously propel the company's mission forward.

TDS will continue to grow and scale with the company, so I expect these numbers - savings! — to continue to grow as well.

0Dollars Saved150+ products • Q3-2022

In a future post, I'll detail the makeup of our performance measures (what exactly we're measuring, the frequency, etc.), in the hopes it can help others explore ways to highlight their design system and team's impact both quantitatively and qualitatively. Sneak peek on that piece: your design system's impact is not just about the numbers, but also about the people and the culture.

The People in your community make it all worthwhile and make it all possible.

Manny Becerra, People & Product Engineering Leader
People & Product Engineering Leader

In the meantime, I would like to extend my appreciation and congratulations to my teammates and the entire Tesla Design System community for their continued commitment and success, especially during these challenging times.

A chart is always nice, so here's one that shows the adoption growth of TDS over the last 18-months.

TDS Performance Measures' adoption growth over during the last 18-months beginning January 2021 through July 2022

Even among other PM's, Manny's head and shoulders above, and kept more plates in the air with grace and skill than I would have ever thought possible. Tons of the Design System wouldn't be still standing if it weren't for Manny's hard work and dedication through the chaos.

Matthew Gross, Sr. Software Engineer (Front End) @ Tesla
Sr. Software Engineer (Front End) @ Tesla