Auditing, organizing, and modernizing components to support product growth and team efficiency
Role
Director of Design and Product designer
Team
Product design, Engineering
Tools
Figma, Notion
The Challenge
With a small design team and a rapidly growing product, we needed a design system that could scale efficiently—supporting fast feature development while maintaining design quality and consistency across platforms. At the same time, many older components were built before Figma’s Auto Layout and variants even existed. A big part of the work involved auditing and updating those legacy components to modern standards so the system could truly support fast iteration and collaboration.
Auditing and Updating the System
We already had a basic design system, but it required a full audit. I reorganized the structure, cleaned up outdated component, and updated everything to use Figma's latest features like auto layout, component properties, and variants to improve scalability and usability.
Designing for Specific User Needs
Teachers and students primarily use the desktop web platform with small devices, but students can also access through the mobile app. The system needed to address these needs—offering a robust interface for educators and a simplified, focused experience for students.
Component Design & Reusability
The platform was growing fast, new features were constantly added, which resulted in increasingly complex components. I developed a flexible, modular system of components that could be easily reused and adapted to accommodate new requirements. This included not only basic elements like buttons and form fields but also more complex components. Each component was designed to be responsive, accessible, and easy to implement, ensuring consistency even as the product evolved.
Collaboration with Engineers
I worked closely with tech leads and engineers to validate components, gather feedback, and ensure the system aligned with technical realities. Their input helped shape how components were structured, named, and documented for seamless handoff and implementation.
Accessibility as a Core Principle
Accessibility wasn’t an afterthought—it was a foundation. Given the diversity of students in the classroom, I ensured all components followed WCAG guidelines and provided sufficient contrast. This was important to creating inclusive experiences that work for all teachers and students.
Documentation & Adoption
I updated and expanded the documentation to reflect new components. I created clear, detailed guidelines in Notion, and also embedded documentation links directly within Figma components. By having documentation available within the Figma environment, designers could reference the guidelines as they worked.
A Living System
The design system continues to evolve as the product grows. We regularly review components, gather team feedback, and adapt the system to support new needs while maintaining scalability and flexibility.
Thank you for reading!
