Design System: Scaling through Simplification
Streamlining our design language by auditing and reducing redundant components by 40%
Role
Product Designer
Duration
June 2025 - Present
Team
Design team, Front-End Engineering team
Tools
Figma
CASE STUDY AT A GLANCE
Context
Following a change in leadership, the product shifted toward a more design-driven strategy. This required a complete refresh of our platform and a structural rebuild of our existing design system to support the new direction.
Problem
As the platform grew rapidly, our library became bloated with redundant components. This cluttered architecture and critical documentation gaps caused significant operational friction and constant back-and-forth between the design and engineering teams.
Solution
Working alongside the design team, I executed an audit to rebuild the fragmented design system. I removed duplicate elements and rebuilt the core components from scratch.
Impact
The new system reduced overall component volume by 40%, drastically improved cross-functional team velocity, and delivered a 20% faster design-to-dev handoff.
DEEP DIVE INTO THE CHALLENGE AND WHY IT MATTERED
.A bloated and fragmented design system was actively blocking our platform-wide UI refresh, severely slowing down teams and causing constant friction with engineering.
Following a change in leadership, the company shifted toward a design-driven strategy that required a platform-wide refresh. However, we couldn't execute this efficiently. Our files were cluttered with redundant UI elements, like having three conflicting versions of a tag component. This duplication, combined with a rigid architecture that forced designers to constantly detach instances and a lack of clear documentation, created massive operational delays right when we needed to move fast.
CONDUCTING COMPONENT AUDIT
I conducted a component audit and identified three main problems in the legacy design system
Together with the Design team, we conduct a component audit for 200+ components in the legacy design system and identified three core roadblocks:
Redundant components
We found that many components in the legacy system were duplicates. For example, we had four primary tag components with only minor differences in colour, font weight and icon size. One of them was only used in a single place on the entire platform.
Detached instances
Designers often had to detach components to make small changes because the legacy design system wasn't flexible enough to handle varied use cases.
Documentation gaps
Documentation was neglected by the previous management. Without clear rules, developers often had to guess how a component should behave on mobile vs. desktop, leading to constant back-and-forth and longer development times.
WHAT I CONTRIBUTED
As a core contributor to this refresh, I helped bridge the gap between our high-level vision and technical implementation by removing duplicated elements, rebuilding core components, and aligning with developers.
To turn our audit findings into an actionable system, I focused on creating a leaner, more adaptable library that would actually serve the team's daily workflows:
Building for Scalability
I recreated several complex components from scratch. By leveraging modern Figma features, I ensured that every element was highly flexible, easy for the team to use, and visually consistent across the new platform.
Developer Alignment
I co-led technical syncs with our engineering team. We discussed how to translate our new design standards into code, ensuring that the new components were technically feasible and accurately built in production.
BUSINESS IMPACT
By establishing a leaner and more reliable design system, we solved the core operational friction that slowed down our product teams.
The rebuild wasn't just about making the Figma files look cleaner. It was about fundamentally improving how our cross-functional teams operated.
Faster Handoff
Reduced design-to-dev handoff time by 20% through clearer documentation
Cleaner Code
Engineers now build with a smaller, more flexible set of core components
Better Focus
Designers can now focus on solving complex user problems instead of "UI polishing"
GOING FORWARD
We want to further reduce the total number of core components to fewer than 80.
Since a design system is a living product, the work doesn't stop after the initial rebuild. We are now actively monitoring how the team uses the components so we can spot opportunities to merge or deprecate even more of them. Our goal is to cap the core library at strictly under 80 flexible components, ensuring the system stays scalable and easy for everyone to maintain.
Other projects at Yoobic
Discover how I tackle complex enterprise challenges and scale design solutions across different product areas
