Design System Upgrade
Timeline
4 Months
Role
Design System Lead, Design Operations
Tools
Figma, Notion
Skills
Cross-Team Collaboration, Leadership, Analytical Thinking, Roadmapping
Overview
Problem
PLUS had been using a design system created two years ago. Over time, as the design team added more styles and components, it became inconsistent and hard to use for both designers and developers. We needed to upgrade it!
Outcome
We identified areas for improvement with designers and developers and successfully transitioned to a new design system. As the Design System team leader, I improved the component setup for consistency, created helpful documentation, led communication with developers, and delegated tasks effectively.
End Result
Final Solution Showcase
We built a design system using best practices. It includes detailed documentation for designers and is set up to make implementation easier for developers.
1. Component Levels
On a macro level, we implemented a modularized component organization: atoms, molecules, and organisms. This makes managing component levels more efficient and ensures that designers can find any component they need.
2. Optimized usage of properties
On a micro level, we studied the Primer Web component to use properties wisely. Local variables help us scale a growing design system, while uniformed naming ensures consistency across components.
3. Detailed Documentation
We created one-page documentation for each component, inspired by Bootstrap and Primer Web, to help designers and developers understand the setup and usage of each component.
4. Dev-friendly!
Our new components reference Bootstrap pages and CSS classes, making them easier for developers to implement. We also implemented line heights in percentages for easier font style implementation.
5. Adoption
To ensure adoption of the upgraded design system among designers, we created an App Facelift task to help them get familiar with the new design system components. For developers, we scheduled sprint plans and weekly meetings to ensure a smooth handoff.
Preparation
Timeline & Fundamental Learning
When I first saw the "Design System Upgrade" project, it felt overwhelming. But our initial preparations kept the work organized and manageable.
Setting Up Timeline
I worked with the design lead to outline key actions and draft timelines for each phase. We ended up investing much more time in setting up components, but that paid off significantly.
Learning Best Practices
None of the designers on the team were familiar with setting up a design system. To enrich our understanding of industry standards, I curated and shared my notes filled with insights gathered from Figma, Google's Material Design, Primer's Web, and Bootstrap.
Research
Discovering Pain Points
From this point on, I started collaborating with another designer, Cassie! This time, the user research is not for app users but for design system users. We used multiple research methods to gain a clear understanding of pain points for designers and developers.
Quantitative Data
To get an overall understanding of how designers and developers use the design system, we used Google surveys to collect quantitative data on frequency, usefulness ratings, ease of use, etc.
Qualitative Questions
In the surveys, we added brief, short-answer questions about the most helpful parts of the design system and the biggest challenges faced when using it. This helped us develop more in-depth questions for the interview sessions later.
Designer Interviews
After summarizing the survey results, we developed questions to gain further insights. During a design team meeting, we held a workshop where designers shared their thoughts using stickers. It was an efficient way to gather responses quickly.
Developer Interviews
We asked a developer to record a think-aloud session of their workflow when implementing components. After analyzing the survey and video, we organized an interview session with our front-end development team to understand how they incorporate the design system into the codebase.
Actionable Improvements
Result Analysis & Ideation
Once we received all the data, we organized it into themes and brainstormed solutions for each pain point.
We turned all the survey data and interview responses into stickers on a jam board and color-coded them to separate designers' responses from developers' responses.
After that, we utilized thematic analysis to organize all responses into themes, which helped us see which part of the design system has the most issues and which part has issues from both designers and developers. These were the areas we focused on.
Based on the pain points we discovered, we each brainstormed solutions to tackle each problem. Later, we came together to review the solutions and vote for the best ones to implement.
To track progress easier, Cassie and I set up a notion table to list out the stakeholders, priorities, and difficulties and place them into different groups. We started with the ones with high priority and low difficulty.
Revamping
Overhaul the Design System
I split the to-do list with Cassie, and we each take half of the tasks. My main job was to optimize component settings and set up one-page documentation for each component.
New designers joined the design system upgrade project in the summer semester, so I became the leader for the Design System Squad and guided new designers to facilitate design system documentation.
Besides assigning tasks, I hosted the Design System Squad meeting with Cassie to plan our next steps. Later on, we also set up and led meetings with developers to discuss the handoff progress.
Implementation
Ensuring the Adoption
As one Figma article said, "Building a design system is only half the battle; the real challenge is getting it adopted by both designers and developers." We ensured that the new design system was correctly used by everyone on the team.
Dev-side implementation
With the development team, we ensured close collaboration by setting up weekly meetings and co-designing the sprint plans. This proactive approach ensured that the design system implementation was not pushed to the bottom of their stack.
I also provided guidance to new Design System team members on how to set up the notion cards for the developers. We made sure it was clear how to implement the design system for the developers and easy for them to track the task.
Design-side implementation
We designed a task for both new and old designers to learn how to use the design system by doing. All designers practiced replicating the current app design and replacing old design elements with new components and variables.
No one is left behind on this task. Cassie and I provided tutorials for each step, and designers are paired with Design System Squad members to support their progress and address any challenges.
Reflection
I was glad that I challenged myself to delve deep into the design system, which had seemed mysterious and a bit intimidating. Now, I am confident in calling myself a design system expert. Seeing a once messy design system become organized and aligned with industry standards is incredibly rewarding.
I also enjoyed guiding new members onboard and taking a leadership role in planning and facilitating meetings. It was great to have more opportunities to communicate with developers, which helped me understand their workflow better. A shout out to my dear design lead, who provided me with lots of positive feedback and encouragement during this project.
