Design System:
Learning Management System

Design System:
Learning Management System

Design System:
Learning Management System

Ready Training Online (8/2024 - 2/2025)

Situation

I had the opportunity to join the design system project for trainingGrid, an employee training platform developed by RTO, a leading provider of learning management systems (LMS). The platform helps employees across various industries stay up-to-date with their training and certification requirements. However, the platform was facing several challenges that needed to be addressed:

Inconsistent Design: As the platform grew, various design elements became fragmented and lacked coherence across different screens.

Inefficient Development Cycles: There was a disconnect between design and development teams, causing delays in feature rollouts and inconsistent implementation of UI elements.

Scalability Issues: With the growing feature set, the platform’s design was becoming harder to maintain, making it difficult to implement new features without disrupting the user experience.

The Users

RTO Product Team

Designers and developers are the primary users who directly interact with the components to create solutions. The components should be intuitive, flexible, and well-documented to streamline their workflow and support creativity.

External

Employees using the trainingGrid platform for training. The design system needed to enhance the experience for these users by offering a more intuitive, accessible, and cohesive interface.

Tools Used

Our design team uses Figma to store our design system.

Task

My Role

My role was to help shape the visual direction of the designs by creating, editing and modifying components for the design system. I played a large part in crafting complex components for accessibility, ease of use, and visual clarity.

As the platform grew, inconsistent designs and inefficient workflows led to a fragmented user experience and longer development cycles. To address these issues, the team developed a design system to improve scalability, consistency, and accessibility.

Challenges and Goals

The main challenge was to help design and implement a comprehensive design system that would resolve the platform’s visual inconsistencies, improve scalability, and streamline the development process. The goal was to:

  • Establish a Unified Visual Language:

    • Create a cohesive UI that could be applied across the entire platform, ensuring consistency and clarity.

  • Improve Efficiency:

    • Provide designers and developers with reusable components and clear guidelines to reduce friction and speed up development cycles.

  • Ensure Accessibility:

    • Make the platform more accessible for users with varying abilities, meeting WCAG standards for contrast, keyboard navigation, and more.

Action

Process

Research and Analysis: To kick off the project, the team conducted research to gather insights from key stakeholders, including designers, developers, and product managers. We also analyzed user data to identify pain points and areas where consistency and usability could be improved. As we reviewed existing UI components, I identified components that did not align with our visual direction.

The UI has outdated visuals, poor accessibility (no ARIA labels, keyboard navigation, or hover states), limited assistance, inaccessible training data, inefficient grids (no column resizing, reordering, or filtering), bulky data filters, critical data below the fold on the hubs dashboard, and unused features on the myGrid dashboard, failing to prioritize key content like training.

Previous Design

Component Creation: Built reusable modules like course cards, progress indicators, menus, and more complex components. After getting the initial designs approved, added multiple states for accessibility and prototyping. I was asked to complete several components and add them to the Figma Design System Library.

It was important that these complex components are created in Figma for re-use and easy changes to the variables that change a lot.

Using Boolean, Text, and Instance Swap Properties, the components will enable designers to modify everything nested inside it by simply looking to their right sidebar.

It was important that these complex components are created in Figma for re-use and easy changes to the variables that change a lot.

Using Boolean, Text, and Instance Swap Properties, the components will enable designers to modify everything nested inside it by simply looking to their right sidebar.

After crafting the design of the primary components comes the variants. For all of our components, we included a hover, active, selected, focused and disabled state.

Collaboration and Review: Gathered input and feedback from head of product, developers, and other designers during the design process, allowing me to make quick updates as needed.

Documentation: Used Figma to document and prototype components for live interactive testing.

Result

Live Components

Try hovering or clicking on these components to get an idea of how they work.

Components were designed, prototyped and tested so they function correctly in our Figma prototype. View this section on a larger device to interact with some of them!

10%

10%

ONBOARDING

Merchandising Fundamentals

0% (0/5)

Flexible Order

Video

Card Title

15 minutes

Video

Card Title

15 minutes

Video

Card Title

15 minutes

Video

Card Title

15 minutes

Video

Card Title

15 minutes

ONBOARDING

Merchandising Fundamentals

0% (0/5)

Flexible Order

Video

Card Title

15 minutes

Video

Card Title

15 minutes

Video

Card Title

15 minutes

Video

Card Title

15 minutes

Video

Card Title

15 minutes

Card Title

VIDEO: 15 minutes

START: [ 12/25/2024 2:41 PM ]

0%

Card Title

VIDEO: 15 minutes

START: [ 12/25/2024 2:41 PM ]

0%

Explain why, but don’t ever apologize.

Explain why, but don’t ever apologize.

Outcomes

  • Faster Development: Reportedly reduced feature delivery time greatly.

  • Consistency: Standardized UI across the LMS.

  • Accessibility: Achieved WCAG 2.1 AA compliance.

  • Scalability: Simplified integration of new features like gamification and analytics.

Lessons Learned

  • Start with high-impact components and scale iteratively.

  • Involve stakeholders early to ensure alignment.

  • Prioritize accessibility from the beginning.

Conclusion

The design system transformed trainingGrid by improving efficiency, accessibility, and user experience. Future plans include expanding component library for Admin experience, adding dark mode color styles, and refining the components as necessary.

Ethan Bartucca

UX/Product Designer

Ethan Bartucca is a passionate UX/Product Designer with a solid understanding of UX principles and a knack for creative problem-solving. He has practical experience through multiple internships and sponsored projects, developing skills in user research, ideation, UX design, prototyping, and more. Proficient in various design tools, Ethan is eager to join a design team to deliver high-quality user experiences.