I led a team to build Zoom’s first Design System, designed to standardize web components and streamline content management. This effort ultimately included the migration of over 2,000 pages, drastically improving our speed to market for product launches and site updates.
The goal was to create a scalable, flexible design system on a new CMS that would streamline content management, enabling faster, more consistent web experiences while supporting Zoom's rapid growth and evolving needs.
As the lead designer, I spearheaded the creation of the design system, from defining foundational principles to implementing a modular framework. I worked closely with cross-functional teams, including engineering, brand, and product, to bridge design and development — ultimately transforming how we built and launched web experiences at Zoom.
When I joined Zoom in 2020 — at a time when the website was among the top 5 most visited in the world — each page was custom-designed and hardcoded. This lack of a design system or CMS made scaling difficult, especially for global product marketing launches, which often depended on our team's speed to market.
To make matters worse, the lack of documentation combined with the rapid pace of updates meant that we were sitting on thousands of one-off pages, each looking different from the next and with no way to make universal updates.
To address these challenges, in 2021, we launched a pair of ambitious initiatives: Build Zoom’s first design system and use it to rebuild and migrate 2,000+ pages to a new CMS.
When I joined Zoom in 2020 — at a time when the website was among the top 5 most visited in the world — each page was custom-designed and hardcoded. This lack of a design system or CMS made scaling difficult, especially for global product marketing launches, which often depended on our team's speed to market.
To make matters worse, the lack of documentation combined with the rapid pace of updates meant that we were sitting on thousands of one-off pages, each looking different from the next and with no way to make universal updates.
To address these challenges, in 2021, we launched a pair of ambitious initiatives: Build Zoom’s first design system and use it to rebuild and migrate 2,000+ pages to a new CMS.
Building a design system from scratch is no small task, so I started by defining a set of principles that my team and I could align to as we went. Our vision was to create a system that allowed the team to quickly handle repeatable tasks while leaving room for creative problem-solving.
Keep only what's necessary—each component must prove its value. A lean system is faster to design, easier to maintain, and ensures consistency from end to end.
Balance flexibility with repeatability, enabling designers to solve problems creatively, quickly, and confidently.
Design components that meet past, present, and future needs, supporting both legacy pages and new content.
Stay current with evolving methodologies and tools. A design system is never done—it's a living document and shouldn't gather dust.
We structured the Web Design System using an atomic design framework of tokens., atoms, molecules, and organisms. Colors, text styles, and a grid system were defined first, followed by fundamental components such as buttons, text fields, image containers, and icons.
We then used the latest Figma features—variants, instance swap properties, and slots—to build a modular system of interchangeable building blocks that a designer could use to quickly assemble unique modules, sections, and complete pages.
Prioritizing ease of use, all components were fully adaptive, responsive, and prototyped to expedite design, authoring, and development workflows.
We structured the Web Design System using an atomic design framework of tokens., atoms, molecules, and organisms. Colors, text styles, and a grid system were defined first, followed by fundamental components such as buttons, text fields, image containers, and icons.
We then used the latest Figma features—variants, instance swap properties, and slots—to build a modular system of interchangeable building blocks that a designer could use to quickly assemble unique modules, sections, and complete pages.
Prioritizing ease of use, all components were fully adaptive, responsive, and prototyped to expedite design, authoring, and development workflows.
Our WDS 1.0 was tested in the summer of 2022 when we had just three months to redesign Zoom’s brand and website. We split the task and team into two: one half mapping disparate page content to new components and the other applying the new visual identity we had created.
Within a matter of weeks, we flipped the switch on the redesigned pages and proudly watched the new brand identity reflect across the site.
With the new design system in place, a designer could assemble, author, customize, and confidently handoff new pages in a matter of hours where it used to take days or weeks. Similar efficiencies were seen by the development team and our time to market ultimately decreased by 70% — our small team could finally keep up with the breakneck pace of Zoom.
Our WDS 1.0 was tested in the summer of 2022 when we had just three months to redesign Zoom’s brand and website. We split the task and team into two: one half mapping disparate page content to new components and the other applying the new visual identity we had created.
Within a matter of weeks, we flipped the switch on the redesigned pages and proudly watched the new brand identity reflect across the site.
With the new design system in place, a designer could assemble, author, customize, and confidently handoff new pages in a matter of hours where it used to take days or weeks. Similar efficiencies were seen by the development team and our time to market ultimately decreased by 70% — our small team could finally keep up with the breakneck pace of Zoom.
In 2023, we were tasked with migrating CMSs (again) and used this opportunity to rebuilt and expand the design system with lessons learned from the first go-around. I worked closely with the Engineering lead to architect this new CMS, contributing to the development and content-authoring strategy in addition to design.
The newest addition was a robust and interactive documentation library which allowed to designers, developers,, and stakeholders alike to dive into the detail of all 165 components and 2,200+ variants housed in the WDS.
In 2023, we were tasked with migrating CMSs (again) and used this opportunity to rebuilt and expand the design system with lessons learned from the first go-around. I worked closely with the Engineering lead to architect this new CMS, contributing to the development and content-authoring strategy in addition to design.
The newest addition was a robust and interactive documentation library which allowed to designers, developers,, and stakeholders alike to dive into the detail of all 165 components and 2,200+ variants housed in the WDS.
Since its launch, WDS has been adopted by multiple teams across Zoom, streamlining how we build consistent, on-brand web experiences. It continues to evolve as the foundation for Zoom’s web experiences, helping us move faster and with greater consistency.
.webp)
.webp)
