Leading the modernization of the PLUS design system
From atoms to components to a collaborative culture around design systems
Role
Design Systems Lead on a team of 4 designers
Duration
January - August 2025
Platform
PLUS, a tutoring platform supporting 5k+ students with 10k+ hours of learning
PLUS is a learning platform that connects 3,000 students with 200+ 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.
As a Design Systems Lead, I led a series of five projects to update to the system holistically.
1-Componentization: Setting a precedent for modular component design.
Most of PLUS components were not built in a modular manner. Because of this, components were not flexible and able to adapt to various use cases. This meant that different teams were making slightly different version of similar components over and over again, increasing design debt and engineering time.
3 of 9 instances of a duplicated component
I created a component that leveraged variables to cover all of the use cases of a select dropdown. The new component allowed for 4 conditions: single-select, multi-select, select-multiple, and ‘add new value’. This was the most complex component that PLUS had ever implemented, and would serve as a north star when creating future components.
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.
2-Color System: Revamping 80% of PLUS color palette.
One of the most critical visual gaps for the design system was the color palette. Primary and secondary colors weren’t supporting each other, some colors had too many functions, and the line between brand colors and neutrals was unclear. Designers often used colors interchangeably for the same task, or even worse, colors for the wrong function, leading to inconsistent designs across the platform.
Over the course of 8 weeks, I brainstormed a variety of color palettes leveraging AI tools and me and my manager’s brand vision. Then, I involved both the design and wider team to make a decision on our new color palette.
Palette One
#5D9BAF
#869398
#8E8FA5
The result was a revamp of 80% of the PLUS color palette to reflect their function and the PLUS brand I also introduced semantic-based guidelines for designers to aid them in navigating color implementation and system controls to decrease errors.
3-Accessibility audits: Balancing inclusive design and our young brand identity.
In the process of doing a holistic audit of our design system and our new color palette, I realized that we were not meeting AA accessibility in some cases. To ensure we did, I tried to adjust our colors, but that left us in square one – with a more serious and professional set of brand colors.
As such, I introduced a new variable, called ‘Text’ for each color in our palette. This ensure that we were always meeting AA accessibility standards for text, and even AAA.
🆕
4-Design Systems Growth Culture: Elevating our design system’s visibility.
One way to ensure that all designers were on board with our updates was to include them in the decision process. Over my months at PLUS, I led two share-outs with the design team to increase the visibility of our system. All of our 12-person team engaged in our co-selection workshop for our new palette.
For the rest of my time at PLUS, I became a go-to resource for the team when they had questions around our design system’s state and ideas for updates. I also became a resource for the design system team, when they sought support for structuring new components.
5-Design systems support: Investing into documentation and training.
With new components and color system and elevated visibility, the final step was to ensure that the work was scalable, replicable, and shippable. The way to do this was through detailed documentation explaining how each update worked in language that was relevant to designers and to developers.
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.
Reduction in 90% of a duplicated component, from 9 variants to 1 central component
From mostly meeting AA compliance to 100% AA text compliance
100% team involvement in a key decision, 2 teammates mentored on design systems, and 2 workshops held
Component bloat reduced by 20% through clear color guidelines
Component bloat reduced by 20% through clear color guidelines
Reduced designer onboarding times and errors through defined token scopes
Ashley Sánchez
Thanks for stopping by!
