LMS Platform Design System
The learning management platform for employee training and customer education, offering tools for course creation, delivery, tracking, and reporting.
My Role
Product Designer
Tools
Figma, Miro, Storybook
Project Overview
When I joined the company as a Product Designer, the product faced some inconsistency challenges. There was no unified design language, which made the experience feel fragmented and hard to navigate. Without a shared system, design and development often got out of sync, slowing down production and causing frustration on both sides. Key features didn't meet basic standards, making the platform less inclusive. We needed a more solid foundation—a system that could bring clarity, consistency, and scalability to both the product and the teams behind it.
Goal
The primary goal of the Design System initiative was to create a scalable design library that would:
- 01Serve as a single source of truth for design and development teams.
- 02Standardize UI components to improve efficiency and consistency.
- 03Enhance accessibility and elevate the overall user experience.
Scope and Approach
To address the challenges and support the product's growth, I took a structured, collaborative approach:
1. Audit & Analysis
I began with a comprehensive audit of existing designs and components to identify inconsistencies, usability issues, and areas needing immediate attention.
2. Defining Priorities
Working closely with the Product Design Manager and Front-End Engineers, we aligned on short- and long-term priorities—focusing first on high-impact, frequently used components.
3. System Development
Following Atomic Design principles, I built a flexible, scalable component library, which included:
- Establishing clear naming conventions and an intuitive structure for designers and developers
- Creating a mirrored version in Storybook to ensure alignment across design and development
4. Documentation
I developed thorough documentation outlining usage guidelines, design principles, and best practices to support consistent adoption across teams. To provide visibility on the evolution of the Design System, I created a dashboard as a single source of truth with all components.
5. Continuous Feedback
Regular syncs with cross-functional teams ensured we gathered feedback early and often—allowing the system to evolve with the product's needs.
Challenges
Rapid Scaling Across Projects
With multiple projects in development, the system needed to scale quickly while maintaining quality and flexibility. I tackled this by prioritizing modular, reusable components and adapting as new use cases emerged.
Cross-Team Alignment
Bridging the gap between design and engineering teams required significant effort, as workflows and priorities often differed. Through workshops, collaborative tools, and clear communication, I ensured alignment across teams.
Balancing Responsibilities
One of my biggest challenges was balancing the creation of the Design System with ongoing UX project responsibilities. Limited time and competing priorities required careful planning.
Results
The Design System delivered the following outcomes:
Unified look and feel across the product.
Streamlined design process and faster development cycles.
Shared language and structure for design and engineering teams.
Foundation of reusable components and patterns to support future growth.
Conclusion
This project taught me how to balance speed with scalability in design systems, communicate effectively across teams with differing priorities, and manage accessibility standards while delivering delightful user experiences.