WorkSpan
Building & Managing a Component Library for a SaaS Solution
My Role
As the product design lead of this project, I developed a scalable design system MVP for WorkSpan’s SaaS solution with a tight-knit collaboration across design, engineering, and product management teams.
My Team
Product Design Intern (Self), Project management Intern,
2 product mentors
Timeframe
12 Weeks (2022)
Platform
Web
Project Overview
Issues I discerned in the original component library
1.
It followed different naming conventions
2.
There were many variants and styles of the same component
3.
Component usage guides were scattered, incomplete, or absent
How have the 3 issues impacted the product team?
Difficulty tracking components by name
Miscommunication among team members
Lack of consistency in design, hence undermining product’s professional presence
Difficulty onboarding new designers and engineers
Decreasing production efficiency
Objective - Improve 4 aspects
Clarity
Minimize design misalignments among components
Unity
Have a source of truth for all designers
Congruence
Improve collaboration efficiency for design & engineering teams
Reusability
Make components reusable and easy to retrieve
Outcomes
70+
Components
Managed
20+
User Guides
Created
100%
Stakeholder Endorsement
Received
The final delivery (MVP version) of the design system was formally adopted as the company’s official guidebook, establishing a foundational framework for its future expansion.
The success of this project prompted the design team to devote 20% more time to managing the design system every week.
It raised awareness among the leadership team about design system, encouraging the company to distribute more resources to the design and engineering team to create a more sophisticated brand image.
Step 1. Auditing
Auditing - Thorough overview of - all components and their variants present in the original design system in order to get a comprehensive understanding of the current state of the design system.
States
Naming
Consistency
Variants
Coherance
Storage Location
Step 2. Identifying
-
Identify opportunities of improvements among the component while consulting other established design system, such as Carbon Design System, Material Design System & Lightning Design System.
-
Prioritize components based on a two-factor metrics.
Accessing a component’s updating priority based on its impact and complexity
High Impact: a component that has a high usage in the product
High Complexity: A component would likely take more time to improve based on its number of states and variants
In this case, the Notification Component is prioritized as one of the first components to be improved in this project based on the metric.
Step 3. Executing
Work on improving the consistency and coherence of the Notification Component. Focus on pixel details, visual hierarchies, Legibility, and accessibility while referencing other established design systems. Moreover, ensuring all metrics are clear to an average reader.
Step 4. Evaluating
Discuss with the design team about the updates of the Notification Components.
-
Ensure all team members are closely engaged in the improvements of the design system.
-
Ensure the improvements align with the company’s brand image.
Step 5. Documenting
-
Create component summaries and usage guides.
-
Keep record of any updates on the Notification Component to ensure that archive versions are accessible
if needed.
Final Delivery of the Notification Component
Personal Challenge
One of the key challenges I faced in this project was navigating a broad goal—improving the design system—and defining a clear, actionable scope for my 12-week timeline. After a thorough assessment, I broke the project into manageable milestones, strategically allocating time to ensure steady progress. By setting clear, smaller objectives and relying on my expertise in product design, along with the support from a collaborative project team, I exceeded the leadership's expectations with exceptional product delivery. This experience taught me the critical importance of effective project management and adaptability when handling ambiguity— skills that will continue to drive my success in future projects.
Overcoming the Challenge & Outcomes
My approach to design system management is by establishing structures - A structures that helps guide users through the entire component life cycle, showing them how to handle different scenarios efficiently and effectively.
​
Given the amount of flexibility, I had the opportunity to self-direct this project by defining scope and
setting my own deadline and deliverables based on available resources.
Week 1-4
Onboarding & Project Planning
Comprehensive assessment and thorough observation of the original component library
Constructed a 10-page project proposal
Proposed a tentative component update schedule to my mentor
Selected 5 components to update based on assessment & timeline
Crafted a Component Assessment chart in Excel based on various factors, such as number of variants, states, etc.
Week 5-12
Project Execution
Full immersion of component library updating and managing based on my project proposal
Completed updates for 5 components
Established design system framework
MVP structure
Created component library user manual guides
-
Introduction Guide
-
Creating-New Guide
-
Updating Guide
-
Archiving Guide
-
Naming Convention Chart
Other Improvements...
