There was an inconsistent implementation of front-end components even though the design team was handing off the same assets. The front end team wasn’t using a modular approach that could be used across applications.


The design system, Quaver, is used across engineering teams, marketing team and within the design team.


To resolve this, I led the design to team to do a full audit of all of the designs. I also added to our practice to the team that all new designs should pull from a shared resource to maintain consistency and I setup the process for the design team to contribute and add to the system. Quaver continues to reduce the time it takes to create new experiences. Now the design team and engineering teams are speaking from a shared language and multiple teams are contributing to quaver to improve usefulness across the organization perpetuating the saved time. 


Director of Product Design - Created a cross departmental team and worked with all managers involved to allocate time towards the design system. I worked on the initial designs and oversaw the design team as they expanded the work. I continued to contribute as needed throughout the process.

Implementation Roadmap

Collaboratively with our developers, designers, QA testers and scrum masters we created a process for implementing the design system in singular apps and across multiple apps. 

Design System Process
Quaver Library Guide
Typographic Standards

Working with the front end team, we created a consistent and consolidated list of type styles to use and update across all properties. 

Typography Feedback
Feedback and Collaboration

Working with the developers, they applied base type styles onto the exisiting app and the design team provided feedback to align the typography with our communication and brand goals. 

Empty States
Works Page - Before
02-Statements-empty copy 2
01-messages-empty copy

Previous empty states communicated as errors and didn't provide actionable ways for users to fill the content. 

Works Page - After

With the redesign all empty states follow a consistent pattern of headline, subhead, illustration and call to action. Each empty state communicates and educates next steps instead of errors. 


ASCAP.comProduct Design

Member AccessProduct Design

Advertising CampaignsWeb Design and Advertising

Sheena IyengarBranding


Chris Guimarin

Instagram: @ChrisGuimarin

Instagram: @ChrisGuimarin