PLUS - Personalized Learning2, where I interned as a product designer, is a tutoring platform that connects human tutors with AI-driven software to boost learning gains for middle school students from historically underserved communities. The platform supports over 3000 students, 500 tutors, completing more than 10k hours of tutoring every month.
Our team has 15 designers and 5 developers who are responsible for maintaining the online learning platform to ensure high-quality tutoring sessions. With a large design team and the high turnover from semester works, upgrading the current design system is essential to maintain design consistency and improve work efficiency, while supporting smoother handoffs to devs.
We triangulated data across multiple sources and synthesized all the data in Figjam. Figjam AI really played a crucial role here which helped us accelerate the preliminary process of sorting and summarizing data. From there, we uncovered some major issues:
The organization of design system is unclear, making it difficult for designers to navigate and find the components they need. Some components are missing so they have to create ad-hoc solutions.
There is little documentation and guidance on how and when to use the design system and components. New designers who are not adequately onboarded are unsure about the best practices.
Designers sometimes create repetitive local components when they are unaware of existing work. This leads to multiple copies of similar components, causing inconsistency and inefficiency.
Component and style names in the design system can be confusing and sometimes conflict with programming languages.
Handoff documents often lack critical information about supported screen sizes and how the UI should adapt to different devices. They need to frequently reach out for clarification.
Our two stakeholders have different workflows and challenges. When ideating, we used divergent thinking to explore their needs, then converged ideas to address both individually while connecting their responsibilities.
The followings are some key features that I primarily contributed to.
Using Atomic Design Methodology, we modularized components into Atoms, Molecules, and Organisms. Each component set now has its own page with documentation of variants, properties and guidance on usage.
I organized all scattered local components based on where they have been used. Users can easily reference and reuse, or build upon existing components, which streamlines future design work.
To ensure clarity for dev team, I adopted Bootstrap's naming conventions to standardize property and value naming. In addition, each component set has included CSS descriptions and relevant resources.
By establishing collections of local variables for spacing, layout and colors, I leveraged designers’ ability to apply reusable values, ensuring consistent design and paving the way for responsive design.
To facilitate adoption of the new design system, we paired new designers with experienced ones and initiated a facelift project to revamp our web interface design using updated components. I created detailed tutorials for onboarding and provided weekly feedback to track progress.
To bring our new design to life, we broke tasks into 2-week sprints and created QA-able tickets in Notion to facilitate development. We scheduled weekly 30-minute stand-ups to ensure cross-team alignment and review implementation progress.
The new design system bridges the gap between cross-functional teams and establishes a standardized, efficient workflow for consistent design and implementation in future projects.
All designers and devs successfully onboarded the new design system
Organized and well-documented components improved productivity
Our design lead spent less time explaining and guiding designers on how to find or use components
This is my very first design system project, and through the process I gained a systematic understanding of what makes a good design system. I learned how a well-organized design system can reduce friction and boost designer productivity. I’m now more proficient in using new features like local variables to build scalable designs.
Working with a small team of talented designers, I had the chance to take initiative in design decisions and collaborate to maximize project outcomes. Coordinating with PM and engineers sharpened my cross-functional skills and taught me how to hand off deliverables in a way that works best for engineers.
