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.
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
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.