Project Overview
This case study covers four key areas:
Paragon Design System, Proctoring,
Content Library, MFE Studio.
Each section demonstrates how Raccoon Gang, in partnership with 2U, has worked to improve the ease of use, the range of features, and the overall experience on the Open edX platform.
About 2U
2U, Inc. is a global leader in education technology that partners with prestigious universities and corporations to offer online education. Their involvement ensures that Open edX remains at the cutting edge of educational technology, offering scalable and flexible solutions that meet the diverse needs of learners worldwide.
Projects 1: Paragon Design System
The Paragon Design System is a foundation for making the Open edX platform look and work consistently across different parts. This includes the online learning system (LMS), the content management system (CMS), and other connected features.
Objectives
Add new components and standardize existing
ones to ensure a cohesive and intuitive user
experience.
Enhance the usability of the Paragon library
within the Open edX interface for greater
intuitiveness and accessibility.
Review and integrate contributions from the Open
edX community to enhance platform capabilities.
Maintain the documentation site to effectively support developers in using the updated components.
Challenges Overcome
- The ongoing challenge for edX lies in the continuous development and maintenance of the Paragon Library. To fully use its benefits across the platform, it is significant that its usage within the micro-frontends architecture needs to be popularized.
Key Implementations and Innovations
by Raccoon Gang
Language
Users can now choose languages, making the platform more accessible globally.
PLAYGROUND FOR CODE VISUALIZATION.
A new playground feature was added to allow developers to see code changes visually.
REAL-TIME THEME CHANGES.
Implementing the capability for real-time theme changes between edX and Open edX.
BEST PRACTICES IN ACCESSIBILITY.
Accessibility best practices were incorporated into the Paragon components, improving the platform's usability.
Impact and Future Opportunities
Through Raccoon Gang’s contributions to the Paragon Design System, the community now enjoys a more cohesive, accessible, and flexible Open edX ecosystem. The project addresses immediate usability improvements and establishes a framework for future innovation.
Projects 2: Proctoring
This project focused on adding a feature to the Open edX platform that lets people monitor exams online (proctoring). This is becoming important as the Open edX platform migrates from Django templates to micro-frontend applications (MFEs).
The project took roughly 2.5 months to complete. Now, the system can handle various exam formats, including Timed Exams, Practice Exams, and Proctored Exams.
Objectives
Collaborate with the edX proctoring team to establish a robust project architecture and address initial concerns.
Integrate special exam functionalities into the MFE application learning to enhance the proctoring experience.
Develop a React library to manage the flow of special exams and ensure a seamless user interface within the MFE.
Modify the existing proctoring API to support the new React library and facilitate integration with various proctoring providers.
Prepare to support multiple proctoring providers simultaneously, ensuring adaptability and broad applicability.
Challenges Overcome
- While the core objectives have been successfully implemented, the project acknowledges the ongoing need to generalize support for various proctoring providers. Future developments may include refining API interactions and expanding provider support, based on evolving requirements and feedback from the educational community.
Key Implementations and Innovations
by Raccoon Gang
ALL-IN-ONE PROCTORING REACT COMPONENT
Adopting a unified approach, the proctoring functionality is encapsulated within a single React library, embedded as a dependency in the MFE-AL.
SPECIAL EXAM COMPONENTS
These components render instructions, and status messages, and integrate the exam sequence within the learning app.
EXAM TIMER INTEGRATION
Moving the timer functionality from the LMS into the MFE-AL allows for a seamless exam experience across various types of exams. The timer is capable of triggering updates during an exam attempt.
PROCTORING INSTRUCTIONS CUSTOMIZATION
The system retrieves specific instructions from the proctoring providers via API, offering customized guidance to users based on the provider or default settings if provider-specific instructions are unavailable.
Impact and Future Opportunities
Adding these features to the online monitoring system (MFE-AL) provides secure and reliable exams on the Open edX platform. It also makes the system more flexible and easier to adapt to future updates.
Projects 3: Content Library
This project upgrades the existing content library by adding a new video editor and other tools. This will make it much easier for course creators to use the platform and create even better learning materials.
Provide updated UI components for the problem and video editing to enhance the authoring experience for educators and course teams.
Provide updated UI components for the problem and video editing to enhance the authoring experience for educators and course teams.
Provide updated UI components for the problem and video editing to enhance the authoring experience for educators and course teams.
Challenges Overcome
- The primary challenge in this initiative has been aligning with the concept of solution during the early stages of project development. Additionally, transitioning the new functionalities from beta to a full release involves navigating complex technical enhancements and ensuring robust community support and adoption.
Key Implementations and Innovations
by Raccoon Gang
NEW PROBLEM AND VIDEO EDITOR
These tools have been revamped to enhance user interaction and lift technical limitations that previously hindered unstructured content authoring.
REACT-BASED UI FOR CONTENT BROWSING.
This new UI is a significant step forward, introducing a prototype for a React-based XBlock editing experience, which is expected to set a precedent for future developments in the platform's interface design.
BETA TESTING AND COMMUNITY FEEDBACK.
The updated Content Library functionality is currently in beta testing, allowing for extensive community engagement and feedback before a full release is planned.
Impact and Future Opportunities
This project revamps the Open edX Content Library with a new video editor, improved creation tools, and a user-friendly interface. Educators gain more control over content, including easily referencing and modifying specific pieces within courses.
Projects 4: MFE Studio
This project, led by Raccoon Gang with the 2U team, updates the user interface for edX Studio. The goal is to create a user-friendly experience with all the existing features, while also making improvements where possible. This is a major step forward in modernizing the entire Studio platform.
Objectives
Ensure all the essential features from the legacy edX Studio system are carried over to the new React-based pages.
Evaluate existing features and simplify the user experience by removing outdated functionalities within the new system.
Foster collaboration between Raccoon Gang, the 2U Teaching & Learning team, and the 2U UX team to provide successful redevelopment of core Studio pages within the MFE (Micro-Frontend) course authoring environment.
Provide the new React-based components that feel familiar and intuitive while offering an improved experience.
Challenges Overcome
- Making sure all the old features worked just as well, or even better, in the new system.
- Coordinating smoothly between teams (Raccoon Gang, T&L, and 2U>UX) to complete everything.
- Figuring out creative ways to adapt the user interface elements, like the progress bar on the import/export pages, to fit the new design and features.
Key Implementations and Innovations
by Raccoon Gang
BUILDING NEW PAGES
Raccoon Gang's team successfully built most of the 13 new pages for the course creation system. These pages work seamlessly within the existing framework, showcasing the team's ability to handle complex projects while maintaining high performance.
KEEPING THINGS SIMPLE
The new pages were integrated into the existing course creation system, improving the overall architecture without needing a complete overhaul. The approach maximized efficiency and minimized disruption for current users.
FAMILIAR LOOK, BETTER EXPERIENCE
The team adjusted the design and user experience (UI/UX) to utilize existing components. This makes the new pages easier to maintain and consistent with the rest of the platform and helps users feel comfortable using them.
Impact and Future Opportunities
This project makes it easier for teachers to create and manage courses on the platform by improving the design and user experience (UI/UX) and making the system run more efficiently.
Results
Raccoon Gang's contributions to the Open edX platform, spanning the Paragon Design System, Proctoring, Content Library, and MFE Studio, showcase deep expertise of successful implementations in the Open edX ecosystem.
Paragon Design System:
Raccoon Gang improved interface consistency and accessibility by standardizing UI components and integrating new features, fostering a more inclusive learning environment.
1Proctoring:
The team developed advanced proctoring solutions that seamlessly integrate with modern micro-frontend environments, ensuring integrity and security in online assessments.
2Content Library:
Updates to the Content Library have revolutionized the way course content is created and managed, enabling educators to efficiently curate and customize educational materials.
3MFE Studio:
The transformation of the legacy edX Studio UI into a React-based framework streamlined the course authoring process, aligning it with contemporary technological standards and enhancing operational efficiency.
4Contact Us
Let Raccoon Gang unleash the full potential of Open edX for your organization!
Partner with us to transform and optimize your Open edX experience.
Book a call