Aspect Design System

Project Summary: Over the last couple of years, PayScale has expanded into more markets and provided more products. The current design system no longer serves the need of our team. As a result, the product experience started to get inconsistent. There’s a solid need to align our UI components across all products.

My role: Project lead

Screen Shot 2021-03-27 at 8.29.07 PM.png

goal

  • Unify payScale experience and visual design across all products

  • Build a design system that could scale across multiple products and use cases

  • Refresh the visual design to align with PayScale vision and branding

Process

Project kick-off

I have invited multiple stakeholders to the kick-off meeting, including the VP of product, designers, product managers, and engineering leads. During the meeting, we communicated the goal project goals, and they were well-received. I also let each stakeholder express their hopes and concerns from their perspectives. After having these conversations, we realized that we need to have a shared understanding of what value this new design system will provide and what success looks like for it. These will also help the stakeholders make critical decisions. Thus we concluded that we need to establish our design principles.

Design Principles

I worked with the VP of product to draft out the design principles. To make the design principle effective and memorable, we decided to keep it within 5 principles and give each one a short headline. When we were brainstorming about the principles, we agreed that it needs to start with our customers. The design should be intuitive; The brand impression should be reliable and trustworthy because we build compensation management products; We should have a high bar for b2b product user experience; The brand message should feel human and understandable. After a few iterations based on the team's feedback, we are pretty satisfied with what we have landed.

Screen Shot 2021-03-27 at 9.59.49 PM.png

Audit Existing components

In order to prioritize the components we want to work on for the new design system, we audited all the existing components in our 3 products. We did a side-by-side comparison to identify the most common components and their use cases.

Audit existing components

Audit existing components

DEFINE USAGE GUIDELINES

Then we met on a weekly basis to go through each component to create usage guidelines and decide on the final design. For each meeting, I took a stab at the design and usage guidelines based on current and potential use cases and brought them to the team for discussion.

SAMPLES OF nEW coMPONENTS