Logo
  • Home
  • About Me
  • AI Experiments
  • Leadership
Logo

Steve Arrington, Product Design Leader

Carina Design System

Scaling a design system for 75 development teams and 50 designers

image

The Challenge

Cvent's web applications were built by dozens of independent teams, each solving similar problems differently. As the company prepared for major growth—and eventually a pandemic requiring rapid pivots—we needed a unified foundation that could scale.

As Principal Designer, I led the team that built Carina, our design system. Named after both the constellation and the keel of a boat, it set our course into the future.

💡 Carina is one of three design systems I’ve built. Reach out if you’d like to see more!

My Role

  • Establish governance processes, DesignOps
  • System design and architecture
  • Continuous education
  • Coordinate planning with product teams

The Team

  • Me
  • Product manager
  • 2 Senior product designers
  • 1 Visual designer
  • 4 developers
  • 11 ambassadors

Users

  • ~500 Developers
  • 50 Designers
  • 30,000 Cvent users

Impact

  • Critical for $100M+ virtual conference launch during COVID (built in 1 month using Carina)
  • Adopted by 75+ development teams and 50 designers
  • 100+ coded components
  • Full platform migration from Sketch to Figma with quality intact

Alex Atienza | Principal Product Designer @New Relic

image
“From pattern creation, review, and design library implementation, Steve always made design a conversation. Always aware, balancing, and encouraging creative freedom in a project that naturally restricts it. “

Building the Foundation

Created comprehensive documentation

Each component required considerations for usability, responsiveness, accessibility, and localization. I created templates to ensure accurate and standard documentation across 40+ Confluence pages and an internal resource site.

Each component was meticulously design and documented. Designer and dev feedback through Slack and office hours helped us to iterate.
Each component was meticulously design and documented. Designer and dev feedback through Slack and office hours helped us to iterate.
Token definition
Token definition
Oh my. I’m so glad that Figma buttons aren’t this complex anymore, but we didn’t shy away from the task. Each component had light, dark, and low-fi versions.
Oh my. I’m so glad that Figma buttons aren’t this complex anymore, but we didn’t shy away from the task. Each component had light, dark, and low-fi versions.

Established governance processes

I worked with the team to define processes for contribution, enhancement requests, and component definition. We encouraged creative use and established clear paths for teams to contribute back.

We actively encouraged devs and designers to think of creative ways to use the design system. When they did, we established ways for them to contribute back.
We actively encouraged devs and designers to think of creative ways to use the design system. When they did, we established ways for them to contribute back.

Built for theming

Defined tokens for color, typography, and animations. The dev team built it so users could provide primary and secondary colors—or just point to their corporate website—and the palette would apply to their event site or branded Cvent UI.

Theming in action (light, dark, and wireframe)
Theming in action (light, dark, and wireframe)

Scaling Through People

The Ambassador Program

When we migrated from Sketch to Figma, I created a program where designers throughout Cvent could contribute to polishing components. At one point, I coordinated over 11 designers, plus copywriters and developers, dividing work on 90 components over 3 months. This made adoption, contribution, and appreciation for the system stronger.

image
Originally, we built the system in Sketch, then transferred and iterated in Figma.
Originally, we built the system in Sketch, then transferred and iterated in Figma.

Making Education Continuous

I created training videos, led design org presentations, held office hours, detailed releases in documentation and Slack. For new patterns, I reached out to the entire design organization to contribute ideas, running collaborative workshops to gather input.

image
Workshopping the pattern for Insights
Workshopping the pattern for Insights

Measuring Success

Following Carina's launch, I surveyed users to see how well we aligned with our design goals. Carina scored significantly higher than our previous "Visual Refresh" on multiple brand values—particularly on feeling modern and innovative while maintaining professionalism.

image

The COVID Test

In Spring 2020, when COVID hit, Cvent lost its revenue source overnight. Product Management decided to add a virtual conference option. Using Carina components, we launched in one month. Within one year, this product earned over $100M. The design system's maturity made this speed possible.

Key Patterns

I led design for our most commonly used patterns:

  • Save patterns with clear feedback states
  • Dashboard with drag-and-drop widget arrangement
  • Search page with filtering and bulk actions
  • Calendar view with responsive breakpoints
  • Site and Email builder

Each component had light, dark, and low-fidelity wireframe versions. Each pattern included interactive states, flows, use cases, and dos and don'ts.

Drag and drop functionality for dashboards
Drag and drop functionality for dashboards
An example of the pattern for saving page content.
An example of the pattern for saving page content.
Calendar pattern
Calendar pattern
More of a macro pattern, the site and email builders allowed users to quickly build media rich responsive attendees sites and emails. Users could theme them automatically by providing us a URL or just two colors.
More of a macro pattern, the site and email builders allowed users to quickly build media rich responsive attendees sites and emails. Users could theme them automatically by providing us a URL or just two colors.

What I Learned

Scale through people, not just components

The Ambassador Program created ownership across the organization. When people contribute, they advocate.

Education is continuous, not a launch event

Training videos, office hours, Slack channels, workshops—multiple formats for different learning styles.

Document everything, even the obvious

What seems obvious to the creator is not obvious to the 75th team adopting the system.

Build for the crisis you don't see coming

We couldn't have launched virtual conferences in one month without the foundation we'd already built.