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.




Goals

Reduce Time

Reduce time to implement improvements so it is easier for testing and presenting ideas in front of members.

Standards

Create a shared standardized language across design and development

Accessibility

Integrate accessibility into all parts of applications and use it consistently for our members

Mobile

Create an adaptive mobile experience to allow for member to access their content on the go

Stages of Quaver Development

Up Next

Components, tokens and patterns identified by either team for future work

Can be generated by either team and the deliverable is a proposed component to align.

Alpha

Version of components, patterns, tokens created to support a business need

Aligned achieved between teams and the item is implemented in a single app

Quaver

Launched across all apps used and ready for teams to adopt on new projects, apps and concepts.

Quaver

Typography

Quaver

Colors

Blue

#002D5B
#004183
#175DA7
#1178CE
#489CEF
#4DBDFF
#89D3FF
#EEF9FF

Purple

#7D287E
#B43AB5
#002D5B

Red

#CE3535
#EB6363
#F89595

Green

#288837
#55B149
#F4CA08
#FBE16B
#FEF59B
#80D462
#BFE9B0

Yellow

Grey

#000000
0D0D0D
#373737
#6D6D6D
#A7A7A7
#FFFFFF
#FAFAFA
#EDEDED
#CECECE

Neutral

#4A4A4A
#85868C
#A9ABB6
#D8DBE2
#D8DBE2
#F7F9FB

Gradients

Carnegie
Gershwin
Beacon
Quaver Alpha

Cards

Quaver Alpha

Page Layout

The Cornerstone

Page Layout is one of the foundational structures of the Quaver front end as sets up the spacing for the navigation, headers, footers, content and modules. Previously this was scaffolding was slightly different in each application and this works to solidify it.

Quaver Alpha

Empty States

Quaver Alpha

Tables

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

Onboarding

Increased ease of onboarding new designers and developers

A/B  Tests

Decreased implementation time to create new features and run A/B tests