Chorus’s design system, rebuilt around the product’s features

Call review in Chorus. Every panel on this screen uses the rebuilt components, grid, and tokens.

Chorus’s design system stopped at atoms and molecules, which caused constant back-and-forth between design and engineering.

I scoped a rebuild with PMs that could land without pausing feature work, then rebuilt the library with variants, tokens, and a consistent grid.

Teams were moving feature work onto it when ZoomInfo acquired Chorus in July 2021.

The library had buttons, but the product was built from panels.

There were no templates, cards, or complex components. The grid was applied inconsistently, and nothing used Auto Layout or variants.

Three limits shaped the rebuild: first, no feature freeze; second, a small design team; and third, a fast-moving AI product.

Design and engineering argued over CSS values every sprint.

The gaps caused constant back-and-forth over exact values, visible inconsistency across the product, and hard sprint planning for PMs. The product was changing fast, so the rebuild had to land without pausing feature work.

I agreed the scope with PMs before changing the library.

  1. Agree on must-haves first

    With PMs, I split the work into four jobs: modernize components, split large molecules by feature, build a grid and templates, and redesign the right sidebar.

    Instead of Rewrite the whole library in one pass.

    Trade-off Some nice-to-have components waited for later cycles.

    Audit of the existing Chorus component library
    The audit showed plenty of atoms and almost nothing a feature team could use as-is.
  2. Organize the library by product feature

    Recordings, Inbox, Meetings, Deals, Coaching, Analytics, and Playlists each got a page, so designers and engineers found components under the feature they worked on.

    Instead of A strict atoms → molecules → organisms hierarchy only.

    Trade-off Some components appear under more than one feature, so each needs a clear owner.

    Chorus design system organized by product feature
    One Figma page per product feature. Atomic Design still sits underneath, but people browse by the feature they build.
  3. Redesign the most reused panel first

    The right sidebar appears on every call review. I rebuilt it in place across Comments, Snippets, and Scorecards, so every team picked up the new version at once.

    Instead of Start with the simplest components to show quick progress.

    Trade-off The first release took longer and touched more teams.

    Chorus dashboard built from the rebuilt system
    Dashboards and the sidebar use the same grid, so new features line up without custom CSS.

Design and engineering shared one set of components going into the acquisition.

Design and engineering worked from the same components, grid, and tokens. ZoomInfo announced its acquisition of Chorus on July 13, 2021, while teams were moving feature work onto the system.

I would have tracked how many screens used the system.

I tracked which components existed. Counting the product screens built from them would have shown the impact much sooner.