Gopinath

Creating a Design System for an E-Learning Platform

At Skill-Lync, I played a key role in developing a design system** to standardize UI components across multiple products, including student CRM systems, assessment platforms, and learning portals.

Challenges :

• Inconsistent UI elements across products.
• Lack of reusability, leading to redundant design efforts.
• Ensuring accessibility and responsiveness for diverse users.

Steps Taken :

1. Component Library Development

• Built a centralized UI component library using Figma and Storybook
• Standardized typography, colors, buttons, forms, and cards for consistency.

2. Scalability & Modularity

• Used atomic design principles, creating reusable design tokens and components.
• Ensured flexibility so new components could be easily integrated into future products.

3. Collaboration & Documentation:

• Worked closely with developers to create a React-based component library
• Documented design patterns and usage guidelines for easy adoption by teams.

4. Ensuring Consistency:

• Set up design reviews and UI audits to maintain consistency across platforms.
• Integrated the design system with FigmaVariants and Auto Layout for efficiency.

Impact & Results:

• ✔ Reduced UI development time by 30%due to reusable components.
• ✔ Improved design consistency across 4+ Skill-Lync products.
• ✔ Enhanced accessibility, ensuring WCAG compliance.