Project Overview

Eduku Indonesia is a leading Education Technology startup based in Jakarta, Indonesia, dedicated to revolutionizing the way teachers and students engage in hybrid learning. As a UI/UX Designer at Eduku, I was tasked with leading the creation of a Design System for our Learning Management System (LMS). This project aimed to streamline the user experience, ensure consistency across platforms, and empower teachers and students to access academic progress and resources seamlessly, anytime and anywhere. This project focuses on developing a comprehensive design framework that includes a consistent visual identity, a robust component library, and clear design guidelines.

The LMS is a core product of Eduku, enabling teachers to take attendance, distribute assignments, share lesson plans, administer quizzes, grade students, and more. With a growing user base and increasing complexity in features, the need for a scalable and cohesive design system became critical to maintain usability and efficiency.

Problem Statement

Before the implementation of the Design System, Eduku LMS faced several challenges:

1. Inconsistent UI Elements: Different components (buttons, forms, modals) had varying styles, leading to a disjointed user experience.

2. Lack of Scalability: As new features were added, the absence of a unified design framework resulted in inefficiencies for both designers and developers.

3. Poor Accessibility: The platform lacked a standardized approach to accessibility, making it difficult for users with disabilities to navigate the system.

4. Time-Consuming Development: Without reusable components, developers spent excessive time recreating elements, slowing down the product iteration process.

These issues hindered the overall user experience and impacted the efficiency of both the design and development teams.

Objectives

The primary goal of this project was to create a comprehensive Design System that would:

1. Establish a consistent and cohesive visual language across the LMS.

2. Improve scalability and efficiency in design and development workflows.

3. Enhance accessibility to ensure inclusivity for all users.

4. Provide a library of reusable components to accelerate future feature development.

Design Process

The project was executed in five key phases:

1. Research & Analysis

   • Competitive Analysis: Studied design systems from leading EdTech platforms to identify best practices and industry standards.

   • Audit of Existing UI: Reviewed the current LMS interface to identify inconsistencies and areas for improvement.
     
     

2. Defining Design Principles

   To guide the Design System, we established core principles:

   • Consistency: Ensure uniformity across all components and platforms.

   • Accessibility: Prioritize inclusivity by adhering to WCAG 2.1 standards.

   • Scalability: Create a flexible system that can adapt to future feature additions.

   • User-Centricity: Focus on the needs of teachers and students to enhance usability.
     
     

3. Creating the Design System

   The Design System for Eduku’s LMS was built with a focus on Foundations and Component Library. These two pillars ensured consistency, scalability, and usability across the platform. Below is a detailed breakdown of each:

   • Foundations are the core visual elements that define the overall look and feel of the LMS. They serve as the building blocks for all components and layouts.

     

   • The Component Library consists of reusable UI elements that form the functional parts of the LMS. These components were designed to be modular, scalable, and easy to implement. Here is the component library of the Eduku Design System:

     

     
     
     

4. Accessibility and Testing

   Ensuring accessibility and testing are critical phases in the development of the Design System for Eduku LMS. These steps are taken to ensure that the platform is inclusive, easy to use, and meets the highest usability standards for all users, including those with disabilities. Here is our approach to this phase:

   • Accessibility Implementation

     Accessibility was a core principle guiding the Design System. We aimed to create an inclusive platform that could be used by everyone, regardless of their abilities. Key steps included: WCAG Compliance, Typography and Readability, Interactive Components.

   • Usability Testing

     To validate the effectiveness of the Design System, we conducted extensive usability testing with real users, including teachers and students. The goal was to identify pain points, gather feedback, and ensure the platform was intuitive and easy to use. The usability testing we conducted consisted of Participant Selection, Test Scenario Creation, Feedback Collection, and Iterative Improvement.
     
     

5. Documentation and Implementation

   The final phase of the Eduku Design System for LMS focuses on Documentation and Implementation. This phase was crucial to ensure that the Design System could be effectively adopted by the design and development teams, enabling seamless collaboration and consistent application across the platform. Here's how we approached this phase:

   • Comprehensive Documentation

   • Collaboration Tools

   • Implementation Process

   • Outcomes

   The Documentation and Implementation phase was the culmination of the Design System project, transforming abstract design principles into a tangible, functional system. By creating comprehensive documentation, leveraging collaboration tools, and fostering teamwork, we ensured the Design System was not only implemented effectively but also embraced by the entire team. This phase reinforced the importance of clear communication, collaboration, and adaptability in creating a scalable and user-centric product.

Outcome

The implementation of the Design System yielded significant results:

1. Improved Consistency: The LMS now has a unified visual language, enhancing the overall user experience.

2. Increased Efficiency: Design and development timelines were reduced by 30% due to reusable components.

3. Enhanced Accessibility: The platform became more inclusive, with a 25% improvement in accessibility scores.

4. Positive User Feedback: Teachers and students reported a more intuitive and seamless experience while using the LMS.

5. Scalability: The Design System laid a solid foundation for future feature additions, allowing for quick adaptations without compromising design quality.

Key Learning

• Collaboration is Crucial: Close collaboration between designers, developers, and stakeholders was essential for the success of this project.

• Iterative Process: Regular testing and feedback loops helped refine the Design System to better meet user needs.

• Future-Proofing: Building a scalable system ensures that Eduku can continue to innovate without compromising usability.

  
  

Conclusion

The Design System for Eduku’s LMS has not only addressed existing challenges but also laid a strong foundation for future growth. By prioritizing consistency, accessibility, and scalability, this project has significantly enhanced the user experience for teachers and students, aligning with Eduku’s mission to improve the quality of learning for the younger generation. As a UI/UX Designer, this project has been a rewarding opportunity to contribute to a product that empowers education and fosters innovation.