Design Systems Overview
At Pinterest, I led end-to-end contributions to the Gestalt Design System, driving the creation of new components as well as enhancements and refinements to existing ones. While the system was created to ensure cohesive brand and design consistency across all touchpoints, it was still in the early stages of adoption. My work focused on strengthening system scalability, reducing reliance on custom UI solutions, and enabling product teams to ship consistent, high-quality experiences more efficiently.
We were seeing:
Teams building custom components
Visual and behavioral inconsistencies
Product teams blocked by lack of system flexibility
Extra engineering effort to maintain bespoke UI
The challenge
On the Gestalt team, I focused on evaluating incoming contributions and shaping them to work beyond a single team’s use case.
That work included:
Reviewing proposals, at times with other Gestalt designers, through office hours and various Gestalt Slack channels
Deciding if and when to accept a component request into the system
Scaling designs to support multiple teams while preserving the original use case
Partnering with engineers to build a focused first iteration, balancing immediate needs with long-term scalability.
The Solution
A cross-product audit revealed 120 instances of custom progress bars across 7 teams with roughly 6 different patterns. Clearly, there was an opportunity to unify.
The challenge was designing a single progress bar that could support the needs of several teams and their distinct use cases without creating a collection of one-off variations. We explored these use cases in parallel, identifying the common structure and behaviors while making room for the differences that were actually meaningful.
Progress Bar
By examining the progress bar, stepper, and status bar together, I identified an opportunity to unify their shared patterns into one flexible, configurable component. This approach would provide greater consistency while giving teams the flexibility to adapt the component to different contexts.
Progress bar
Stepper bar
Status bar
Key Tradeoffs Flexibility vs. consistency
The Identity team requested specific error, warning, and success colors outside Gestalt tokens.
Risk: Introducing non-system colors would fragment the visual language. In addition, the yellow against the gray bar did not pass WCAG contrast ratio at 1.06:1.
My approach
I leveraged AI to conduct a competitive audit to show that colors can vary widely
Invited cross-team members to discuss color options during office hours
Outcome: I successfully persuaded teams to adopt system colors while still meeting their UX goals. This preserved Gestalt integrity without blocking product needs.
Engineering Collaboration
To support multiple teams, I worked closely with engineers across different product areas to align on requirements and feasibility. I helped coordinate kickoffs, handoffs, and ongoing communication through Slack and Jira, ensuring the component could flex across teams without creating separate versions.
Final design and configuration
The result was one flexible, scalable component with multiple variations that could serve all three teams while bringing consistency to the experience across products.
