Quaver

Director of Product Design
-
2018 - 2020
Project Overview
The design system, Quaver, created for ASCAP is used across engineering teams, marketing team and within the design team. 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, created for ASCAP is used across engineering teams, marketing team and within the design team.
My Contributions
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. 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.




Typography

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.

Feedback and Collaboration

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

Cards

Before
After

Empty States

Before

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

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.

Metrics

20% Faster

“With quaver typography each front-end ticket is 20% faster than without” – A Front End Engineer

Increased Productivity

Design and development teams require fewer meetings as each ticket required fewer assumptions