CLIENT:

Grommet

EXPERIENCE:

Design

TOOLS:

FIGMA

Cover
Cover
Cover

Design System

about.

To improve efficiency and consistency across teams, I built out a Design System that served as the single source of truth for both designers and developers. The system housed the latest approved components, patterns, and assets — helping the entire team move faster and more confidently.

I used Figma to build out the Design System and paired it with Storybook for live UI components, allowing both design and engineering to stay aligned throughout the process. The system supported everything from internal tools and our client-facing website to physical print materials like marketing mailers.

This cross-functional effort involved close collaboration with developers and other designers to ensure that every touchpoint through digital and print—was visually and structurally consistent.

the challenge.

Reworking the foundation of a live product came with its share of complexities:

  • System-wide updates: We had to make foundational changes, like updating the grid system and adjusting line spacing, across the entire site without disrupting the current user experience.

  • Asset audit: Every existing component had to be audited, labeled, and evaluated to determine what needed to be redesigned or rebuilt from scratch.

  • Cross-platform consistency: The design system had to support both digital and print outputs, which meant creating patterns flexible enough to span screen and paper formats.

  • Engineering coordination: We partnered closely with developers to deploy changes in a sandbox environment for thorough testing before rolling anything out to a controlled test group.

Showcase image
Showcase image
Showcase image
Showcase image
results.

The launch of the Design System created a shared language between design and development, streamlining how new features were built and how existing ones were maintained.

  • It improved communication and collaboration across teams by giving everyone access to the same up-to-date resources.

  • It helped maintain visual and structural consistency during a major brand refresh, reducing inconsistencies and duplication.

  • The system also became a starting point for future design work, making it easier for other designers to quickly spin up new ideas and stay aligned with established patterns.

Showcase image
Showcase image
Showcase image

Turn “what if” into “look what we did.”
Let’s build something awesome!

Available For Work


vanessa@madebyva.com



ALVARADO ©2025

Turn “what if” into “look what we did.”
Let’s build something awesome!

Available For Work




ALVARADO ©2025

Turn “what if” into “look what we did.”
Let’s build something awesome!

Available For Work


ALVARADO ©2025