Design System Revamp
PLUS - Personalized Learning2
2024
Lead Product Designer — User Research, Qualitative Analysis, Prototyping, Project Management, Training
My role
Jade Wang, Bill Guo (Design)
Max Benson, Joe Kopko (Development)
Shiv Gupta (Product)
Team
Jan 2024 - Aug 2024
Timeline
PLUS is an Ed-tech startup focused on providing online tutoring to underserved middle school students.
I led the revamp of the company's design system to make design workflows more simplified, efficient, and consistent; meanwhile supporting smoother handoffs and collaboration between design and dev teams.
The new design system was successfully adopted by all designers and engineers, and became a part of the onboarding process for new team members.
Overview
CONTEXT
What is PLUS?
PLUS, 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 currently supports over 3000 students, 500 tutors, completing more than 10k hours of tutoring every month.
Problem
Current design system was not fully utilized and hard to navigate
Our team has 15 part-time designers working on various design aspects. Our design lead noted that not all designers are familiar with the design system, and even regular users find it challenging to find the components they need, often leading to either long search or the creation of duplicate components.
Therefore, we have the urgent need to upgrade our design system to boost design productivity and have all designers adopt the design system to ensure the consistency of future work.
Research
Before bridging the gap, pinpoint the gap: identify pain points and needs
What we learned
We triangulated data across multiple sources and synthesized all the data in Figjam. Figjam AI really helped us accelerate the preliminary process of sorting and summarizing data. From there, we uncovered some major issues:
01
Designers sometimes struggle to locate and use the appropriate components
Except the structure of the design system being unclear which makes it hard to navigate, there is little guidance on how and when to use and customize the components. New designers are especially confused.
02
Designers lack full visibility into existing local components, leading them to create repetitive copies
We have design works done in a great many of Figma files. When designers are not aware of existing works, they create repetitive local versions which cause inconsistency and inefficiency.
03
Variables naming isn’t always clear to developers
Our dev team primarily uses Bootstrap for implementation. However, the component and style names in the design system sometimes conflict with programming languages.
04
There is insufficient guidelines for responsive design
Our dev team felt that 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.
Ideation
Mapping tailored solutions to address every user pain point.
After synthesis, it became clear that our two user groups have distinct pain points when working with design system. To tackle each point, I collaborated with my partner and our design lead to brainstorm potential solutions. We had a table of ideas where we drew inspiration from existing design systems, our user’s quote, and figma articles.
Then we prioritized solutions based on 3 criteria: feasibility to implement, relevancy to user needs, and potential impact.
Feasibility
Possible to design and implement?
Relevancy
Relevant to user pain points and needs?
Potential Impact
Time saving? Less redundant work?
Final Design
Powering productivity and collaboration through an upgraded design system
The followings are some key features that I primarily contributed to.
01
Atomic organization improves component findability
The previous organization lack of clarity and it’s hard to navigate, as indicated by designers. 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.
02
Centralized local components for easy access
I organized all scattered local components based on where they have been used (i.e. webpage > sections). Users can easily reference and reuse, or build upon existing components, which streamlines future design work.
03
Standardized naming and description improve clarity for dev team
To ensure clarity for dev team, I adopted Bootstrap's naming conventions to standardize property and value naming. In addition, I have added CSS descriptions and relevant resources to each component set.
04
Local variables leverage scalability and responsiveness
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.
adoption & implementation
Building a design system is only half the battle—the real challenge is getting it adopted by both designers and developers
Onboard designers to the new design system
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.
Replicate / Audit
Facelift
The facelift project contains 3 steps: 1) replicate the current web interface 2) annotate outdated components and inconsistencies 3) recreate using the new components.
A snapshot of one of the tutorials I crafted to onboard the design team to the facelift process.
Coordinate with dev team for implementation
To bring our new design to life, I coordinated with design manager and dev team to break tasks into 2-week sprint plan and created QA-able tickets to facilitate development. We scheduled weekly 30-minute stand-ups to ensure cross-team alignment and review implementation progress.
Our sprint plan detailed each team's objectives, responsibilities, and corresponding deliverables from start to finish.
We broke down implementation into easy-to-track tasks and added exported CSS files for each task to save developers’ time.
I guided engineers to explore Figma dev mode features, which helped to improve productivity and accuracy on implementation side.
impact
Enhancement of design consistency, productivity and cross-team collaboration
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.
100% Onboarding rate
All designers and devs successfully onboarded the new design system
40% Perceived time saved creating prototypes
Organized and well-documented components improved productivity
30% Less inquiries on component usage
Our design lead spent less time explaining and guiding designers on how to find or use components
My takeaways
A deep dive into design system
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 design productivity. I’m now more proficient in using new features like local variables to build scalable designs.
Design, coordination, leadership
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.