AS

AS

Leading initiatives to strengthen the PLUS design system

Component design, accessibility checks, cultural support, and brand revamp

Strengthening the PLUS design system

Leading the revamp of the PLUS design system

Role + Team

Role + Team

Design Systems Lead on a subteam of 4 designers (Yiyang Zhang, Megan Chai, and Jasmine Kim)

Design Systems Lead on a subteamteam of 4 designers

Design Systems Lead on a subteam of 4 designers (Yiyang Zhang, Megan Chai, and Jasmine Kim)

Client

Client

PLUS, a tutoring platform supporting 3k+ students and 500+ tutors with 10k+ hours of learning annually

PLUS, a tutoring platform supporting 3k+ students and 500+ tutors with 10k+ hours of learning annually

PLUS, a tutoring platform supporting 3k+ students and 500+ tutors with 10k+ hours of learning annually

Project Goal

Goal

Enhance the design system to enhance designer consistency, engineering efficiency and the PLUS brand voice

Enhance the design system to enhance designer consistency, engineering efficiency and the PLUS brand voice

Enhance the design system to enhance designer consistency, engineering efficiency and the PLUS brand voice

PLUS is a learning platform that connects 3,000 students with 500+ tutors to provide 10k+ hours of learning a year.

PLUS is a learning platform that connects 3,000 students with 500+ tutors to provide 10k+ hours of learning a year.

PLUS is a learning platform that connects 3,000 students with 500+ tutors to provide 10k+ hours of learning a year.

As the platform quickly scaled and onboarded 10+ new designers a year, its design system began to show cracks that were slowing the team down.

As the platform quickly scaled and onboarded 10+ new designers a year, its design system began to show cracks that were slowing the team down.

As the platform quickly scaled and onboarded 10+ new designers a year, its design system began to show cracks that were slowing the team down.

Components were duplicated across products

Components were duplicated across products

Components were duplicated across products

Gaps in functionality made designers feel constrained

Gaps in functionality made designers feel constrained

Gaps in functionality made designers feel constrained

Color was implemented incorrectly and inconsistently by designers

Inconsistent color implementation

Color was implemented incorrectly and inconsistently by designers

Colors didn’t reflect the platform's values and branding

Colors didn’t reflect the platform's values and branding

Colors didn’t reflect the platform's values and branding

As a Design Systems Lead, I led a series of five initiatives to unify PLUS's component library into a cohesive design system used across 4 product pillars.

As a Design Systems Lead, I led a series of five initiatives to unify PLUS's component library into a cohesive design system used across 4 product pillars.

As a Design Systems Lead, I led a series of five initiatives to unify PLUS's component library into a cohesive design system used across 4 product pillars.

1

Component Design

Setting a precedent for modular component

2

Color Palette Revamp

Updating 80% of PLUS' color palette

3

Site Accessibility Audit

Balancing inclusive design and brand identity

4

Design Systems Growth Culture

Elevating our design system’s visibility within the team

5

Documentation + Support

Investing into training and guidance

Initiative One

Initiative One

Initiative One

Component Design: Setting a precedent for modular components.

Component Design: Setting a precedent for modular components.

Component Design: Setting a precedent for modular components.

Most PLUS components were not flexible enough to adapt to varied use cases.


This meant that different teams were making slightly different version of similar components over and over again, increasing design debt and development time.

Most PLUS components were not flexible enough to adapt to varied use cases.


This meant that different teams were making slightly different version of similar components over and over again, increasing design debt and development time.

Most PLUS components were not flexible enough to adapt to varied use cases.


This meant that different teams were making slightly different version of similar components over and over again, increasing design debt and development time.

3 of 9 instances of a duplicated component

3 of 9 instances of a duplicated component

I created a modular component that leveraged variables to cover the diverse use cases of a SELECT dropdown.


This was the most modular component that PLUS had shipped, and would serve as an example for future components.

I created a modular component that leveraged variables to cover the diverse use cases of a SELECT dropdown. This was the most modular component that PLUS had shipped, and would serve as an example for future components.

I created a modular component that leveraged variables to cover the diverse use cases of a SELECT dropdown.


This was the most modular component that PLUS had shipped, and would serve as an example for future components.

A peek into the component's structure

A peek into the component's structure

With the new SELECT component, we reduced design debt of the select component use from 9 instances to 1, saving engineers hours in component development.

With the new SELECT component, we reduced design debt of the select component use from 9 instances to 1, saving engineers hours in component development.

With the new SELECT component, we reduced design debt of the select component use from 9 instances to 1, saving engineers hours in component development.

Initiative Two

Initiative Two

Initiative Two

Color Palette Revamp: Revamping 80% of PLUS' color palette.

Color Palette Revamp: Revamping 80% of PLUS' color palette.

Color Palette Revamp: Revamping 80% of PLUS' color palette.

One of the most critical gaps for the design system was its color palette. After a thorough audit of how color was being applied across products, I noted three recurring challenges:


  • There was no clear hierarchy between primary and secondary colors

  • Colors were not used according to their intended function

  • Some colors were assigned too many functions, confusing designers

One of the most critical gaps for the design system was its color palette. After a thorough audit of how color was being applied across products, I noted three recurring challenges:


  • There was no clear hierarchy between primary and secondary colors

  • Colors were not used according to their intended function

  • Some colors were assigned too many functions, confusing designers

One of the most critical gaps for the design system was its color palette. After a thorough audit of how color was being applied across products, I noted three recurring challenges:


  • There was no clear hierarchy between primary and secondary colors

  • Colors were not used according to their intended function

  • Some colors were assigned too many functions, confusing designers

Colors were competing for hierarchy

Colors were competing for hierarchy

Colors were competing for hierarchy

Colors were not used according to their intended function

Colors were not used according to their intended function

Colors were not used according to their intended function

Colors were duplicated in the palette, causing confusion

Colors were duplicated in the palette, causing confusion

Colors were duplicated in the palette, causing confusion

To begin solving these pain points, we started with a palette update. I brainstormed a variety of color palettes leveraging AI tools, which enabled me to output a wide set of options quickly.


Then, I evaluated options across key UI screens for brand alignment, accessibility, and designer buy-in.

To begin solving these pain points, we started with a palette update. I brainstormed a variety of color palettes leveraging AI tools, which enabled me to output a wide set of options quickly.


Then, I evaluated options across key UI screens for brand alignment, accessibility, and designer buy-in.

To begin solving these pain points, we started with a palette update. I brainstormed a variety of color palettes leveraging AI tools, which enabled me to output a wide set of options quickly.


Then, I evaluated options across key UI screens for brand alignment, accessibility, and designer buy-in.

After collaborating with the design team to evaluate our options and reach alignment, I updated 80% of our color palette.


This simplification cascaded down to our atomic-level components, allowing us to eliminate over 200 redundant component, significantly reducing design inconsistencies and cutting wasted development time.

After collaborating with the design team to evaluate our options and reach alignment, I updated 80% of our color palette.


This simplification cascaded down to our atomic-level components, allowing us to eliminate over 200 redundant component, significantly reducing design inconsistencies and cutting wasted development time.

After collaborating with the design team to evaluate our options and reach alignment, I updated 80% of our color palette.


This simplification cascaded down to our atomic-level components, allowing us to eliminate over 200 redundant component, significantly reducing design inconsistencies and cutting wasted development time.

Simplifying our palette meant simplifying our components at the atomic level, cutting over 200 components to reduce design errors and redundant development time.

Initiative Three

Initiative Three

Initiative Three

Accessibility Audits: Balancing inclusive design and our young brand identity.

Accessibility Audits: Balancing inclusive design and our young brand identity.

Accessibility Audits: Balancing inclusive design and our young brand identity.

During a comprehensive audit of our design system and new color palette, I discovered we were failing to consistently meet AA accessibility standards. The challenge was that palettes meeting AA compliance required sacrificing our lighter color options.


To solve this, I introduced a new variable called 'Text' for each color in our palette—enabling us to refresh our visual identity while maintaining full AA accessibility compliance.

During a comprehensive audit of our design system and new color palette, I discovered we were failing to consistently meet AA accessibility standards. The challenge was that palettes meeting AA compliance required sacrificing our lighter color options.


To solve this, I introduced a new variable called 'Text' for each color in our palette—enabling us to refresh our visual identity while maintaining full AA accessibility compliance.

During a comprehensive audit of our design system and new color palette, I discovered we were failing to consistently meet AA accessibility standards. The challenge was that palettes meeting AA compliance required sacrificing our lighter color options.


To solve this, I introduced a new variable called 'Text' for each color in our palette—enabling us to refresh our visual identity while maintaining full AA accessibility compliance.

🆕

🆕

🆕

The new 'Text' variants ensure all typography meets WCAG AA standards while preserving our vibrant brand colors for backgrounds and UI elements.

The new 'Text' variants ensure all typography meets WCAG AA standards while preserving our vibrant brand colors for backgrounds and UI elements.

The new 'Text' variants ensure all typography meets WCAG AA standards while preserving our vibrant brand colors for backgrounds and UI elements.

Initiative Four

Initiative Four

Initiative Four

Design Systems Growth Culture: Elevating our design system’s visibility.

Design Systems Growth Culture: Elevating our design system’s visibility.

Design Systems Growth Culture: Elevating our design system’s visibility.

One way to ensure designers were on board with our updates was to include them in the decision process. I led two share-outs with the design team and facilitated a workshop where all designers helped choose our new palette.

One way to ensure designers were on board with our updates was to include them in the decision process. I led two share-outs with the design team and facilitated a workshop where all designers helped choose our new palette.

One way to ensure designers were on board with our updates was to include them in the decision process. I led two share-outs with the design team and facilitated a workshop where all designers helped choose our new palette.

Initiative Five

Initiative Five

Initiative Five

Documentation + Support: Investing into training and guidance.

Documentation + Support: Investing into training and guidance.

Documentation + Support: Investing into training and guidance.

With new components, a refined color system, and improved accessibility in place, the final step was ensuring the work could scale across teams and ship smoothly.


I achieved this through comprehensive documentation that bridged the gap between design and development, explaining each update in language relevant to both teams.

With new components, a refined color system, and improved accessibility in place, the final step was ensuring the work could scale across teams and ship smoothly.


I achieved this through comprehensive documentation that bridged the gap between design and development, explaining each update in language relevant to both teams.

With new components, a refined color system, and improved accessibility in place, the final step was ensuring the work could scale across teams and ship smoothly.


I achieved this through comprehensive documentation that bridged the gap between design and development, explaining each update in language relevant to both teams.

Impact: Designing for scalability, accessibility, and efficiency.

Impact: Designing for scalability, accessibility, and efficiency.

Impact: Designing for scalability, accessibility, and efficiency.

Through the five projects, I was able to make a valuable impact on the entire platform, demonstrating the importance of system’s thinking and cultural support for design.

Through the five projects, I was able to make a valuable impact on the entire platform, demonstrating the importance of system’s thinking and cultural support for design.

Through the five projects, I was able to make a valuable impact on the entire platform, demonstrating the importance of system’s thinking and cultural support for design.

redeuced duplicated component usage from 9 instances to 1

redeuced duplicated component usage from 9 instances to 1

20% improvement in AA text compliance

20% improvement in AA text compliance

2 teammates mentored on design systems

2 teammates mentored on design systems

reduction in component bloat through clear color guidelines

reduction in component bloat through clear color guidelines

reduced designer onboarding times and errors through defined token scopes

reduced designer onboarding times and errors through defined token scopes

increased designer engagement in design systems growth and maintenance

increased designer engagement in design systems growth and maintenance

redeuced duplicated component usage from 9 instances to 1

20% improvement in AA text compliance

2 teammates mentored on design systems

reduction in component bloat through clear color guidelines

reduced designer onboarding times and errors through defined token scopes

increased designer engagement in design systems growth and maintenance

Thanks for stopping by!

linkedin ↗

email ↗

resume ↗

Thanks for stopping by!

Let's connect?

linkedin ↗

email ↗

resume ↗

Thanks for stopping by!

Let's connect?

linkedin ↗

email ↗

resume ↗