Quaver

Problem

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.

Audience

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

Solution

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. 

Thumbnail_Quaver
Design System 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. 

Typography
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. 

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

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

Works Page - After
02-statements-empty
01-messages-empty
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. 

Projects

ASCAP.comWeb Design

Member AccessProduct Design

Sheena IyengarBranding

IllustrationsIllustration

Chris Guimarin

Instagram: @ChrisGuimarin

Instagram: @ChrisGuimarin