case video fallback
Case Study

MegaUni:
Educational Platform

MegaUni team, in collaboration with Mad Devs, created an educational platform that is
more than a decent solution for universities that suddenly switched to online learning
because of the COVID-19 pandemic.

Owing to the COVID-19 pandemic worldwide, many offline services have stopped working. University campuses were closed, and thousands of students could not attend classes because of the pandemic. MegaUni, as a subsidiary of the widespread educational institution, came up with a modern solution not only to create an educational platform for the pandemic period but also develop digital education in Vietnam. Thus, MegaUni offers accessible online education by connecting universities with students. Its main feature and difference from other platforms are that it contains both an open content, which is available for everyone, and a paid content, which is available only for students at certain universities.

Broward Vietnam
Phu Xuan University
BK TP.HCM
Cao Dang Viet My
Truong cao kinh te ky thuat ha noi
Equest: the quest for excellence

The company collaborates with leading universities and enterprises in Vietnam, including Broward College Vietnam, Phu Xuan University, Ho Chi Minh City University of Technology (HCMUT), American Polytechnic College (Trường Cao đẳng Việt Mỹ), and EQUEST Education Group.

Achievements

With MegaUni, Mad Devs built a customized platform for Vietnamese students’ needs, allowing them to study online without leaving home. As a result of this collaboration:

  • Thirty students from one university had begun a new semester by the time the MVP was launched.
  • On May 16, the platform was implemented, and 100 students from two universities started a new semester on this platform.

Although Open edX does not provide the basic setup for e-commerce payments, our team has discovered advanced settings for payment integrations. Currently, the widespread VNPay payment system is integrated into the platform and supports payments by cards from local Vietnamese banks, international cards, and VNPay electronic wallets.

Opportunities With MegaUni

Icon

Accessibility

Using this platform, students can attend classes from anywhere. Universities, in turn, can access a more extensive network of students because geographic boundaries no longer confine them. Online learning provides students with the flexibility of time and location in their education.

Icon

Affordability

The E-learning platform allows students to save costs. Online learning reduces student transportation, lunches, and, most significantly, housing costs. Moreover, all course materials are made available online, resulting in an environmentally and economically friendly paperless learning environment.

Icon

Easy navigation

Through the login page, students can quickly access their accounts. They can view the course content and continue their studies on their already started course. The platform allows them to keep track of their progress and assess their growth on their own.

Opportunities with MegaUni Course Interface MegaUni

Efficiency

Online learning makes it easier for teachers to provide lessons to students. MegaUni provides teachers or staff managers a Studio tool for creating content. As part of lesson preparation, teachers can utilize various online learning tools, including videos, PDFs, and podcasts.

Opportunities with MegaUni Studio view MegaUni

Image from studio view

Variety

Using the MegaUni platform, universities may offer programs for various levels and disciplines, unique educational experiences, and learning styles. With MegaUni platform, students can attend live classes, study existing courses, and listen to podcasts as well as earn their diploma, degree, or certificate online without setting foot on a university campus.

Main Stages of Development

The development process was divided into several stages:

  • [object Object]

    Setting up basic Open edX features according to the client's specification.

  • [object Object]

    Integrating with micro-frontend service.

  • [object Object]

    Integrating Zoom live class, Richer HTML5 Content as H5P.

  • [object Object]

    VNPay payment system integration.

  • [object Object]

    Creating and implementing features: organization management, trial period for a course, notification module, favourite courses section, and user support.

The work was divided into three milestones to launch the MVP. Each milestone lasted 1 month, including specified features the team must deploy to the platform. After the launch of the MVP, the team completed the features (within two months) that the client demanded but Open edX does not provide.

Both teams did their best to release the product by mid-March to allow the first group of students to begin using MegaUni courses.

MegaUni’s Platform Architecture

Open edX is the open-source platform co-founded by Harvard University and the Massachusetts Institute of Technology. According to the Boston Globe, Open edX technology is adopted by universities such as UC Berkeley, Georgetown, and Stanford, and companies such as Partners HealthCare and Microsoft.

Students and teachers can engage with this software platform in an interactive, modular manner. It promotes active learning with video snippets, interactive components, and game-like experiences.

The MegaUni platform is based on the open-source Open edX Lilac project. The team decided to develop on this platform because of its flexible engine.

Below, we will briefly explain the platform’s architecture simply as possible.

The key components of the Open edX architecture include the Learning Management System (LMS), front end, course browsing, course structure, studio, discussions, analytics, and search. We relied on the most important Open edX software applications in our work process: the LMS and Content Management System (CMS) called Studio.

The MegaUni platform was built on the Open edX version Lilac, released in June 2021, and includes several new features for learners, course teams, and developers. Lilac was orchestrated by the Build, Test, Release working group of the Open edX community. For the first time, it is recommended as an installation method that is entirely developed and maintained outside of edX by the Tutor. In addition to the existing native installation method, Tutor provides a simplified and easier-to-maintain installation method. It is open as the Open edX platform and licensed under the AGPL v3.

Open edX courses are organized into three levels: sections, subsections, and units. Thus, lessons are composed of units called Xblocks, which can be written by anyone, allowing educators and technologists to extend the set of components for their classes.

Opportunities with MegaUni Personal Account MegaUni

Image from a personal account

In addition to XBlocks, there are a few ways to extend a course behaviour:

  • The LMS is an LTI tool consumer. Course authors can embed LTI tools to integrate other learning tools into an Open edX course.
  • Problems can use embedded Python codes to either present the problem or assess the learner’s response. Instructor-written Python codes are executed in a secure environment called CodeJail.
  • JS Input can be used to integrate JavaScript components.
  • The OLX (open learning XML) format for courses can be exported and imported.

General Project Features

From the very beginning, it was clear that the MegaUni project required the development of several features:

1. Micro frontends

In this project, we decided to use a micro-frontend pattern where web application UIs are composed of semi-independent fragments. All fragments are developed, deployed, and tested independently.

MegaUni Site Video

2. Users’ support

To address issues, concerns, and suggestions, our team has integrated Freshworks services to the platform. It allows users to use live support and a handy FAQ section in one place.

MegaUni Mobile View

3. Live classes

We used the LTI Pro app to integrate Zoom video conferencing into the MegaUni platform to provide a new, engaging way to educate students through live lessons.

Opportunities with MegaUni Live Class MegaUni

4. Notifications

By using the SendGrid tool, university staff can send three types of notifications via the Django administration panel:

  • Custom notifications (mass mailing if necessary).
  • Live class notifications (sent before live classes begin).
  • Notifications to attract inactive users (with which staff can notify students that they have not logged into the platform for a long time).
Opportunities with MegaUni Email notifications MegaUni

5. Free trial

Anyone interested in online education, whether universities or students, have an opportunity to work with MegaUni platform for free and see if it is convenient enough. The trial period includes access to the course for seven days and the first two sub-sections of each course section. During this time, users can explore the platform’s primary functionality and learn how easy it is to use the platform.

Opportunities with MegaUni Start Screen website MegaUni

6. Organization management

During the project development, we encountered the following problems: We have universities, majors, and courses but have no clear relationship between them. We set up an organizational management structure where we established a certain structural understanding between the main entities.

7. Payment Integration

MegaUni supports an online payment method: the VNPay payment system. Users can use three outstanding payment methods: scanning QR codes by a mobile banking app, payment by domestic cards or accounts, and payment by international credit cards.

8. Integration H5P videos

The H5P functionality is integrated into the MegaUni platform. After creating an HTML5-based interactive video and adding it to the lesson, students can interact with images, text, links, and quizzes while watching the video.

From Challenge to Solution: Implementing the Features of Open edX

Challenge 1

Developing a flexible platform that can easily change over time makes it more attractive for stakeholders, as they are interested in further development. The decision was to build an interactive and modular platform on the Open edX. The Mad Devs team set up an instance of the Open edX product and customized it according to client requirements. However, a good, user-friendly educational platform requires much more. According to the plan, the platform should offer the following features: user support, live chat, notifications, H5P videos, and live classes. To implement the necessary features, the team encountered several challenges. Thus, we contributed our own code to the previously written code by the Open edX team and adapted it to the final product.

Solution

As the project was based on the Open edX open-source code, we understood that most features required by the client are not part of the Open edX basic setup. For this purpose, we have engaged two Open edX consultants to provide help when needed. In addition, we solve our problems with the help of the Open edX community and detailed Open edX documentation, so we find solutions and easily integrate the needed features into the platform.

Open edX

Challenge 2

To make the platform fully functional and easy to use, it was necessary to connect it to an online payment system to make online purchases. To do this, we needed to use a system that works in Vietnam, so that local students can also use it to make payments.

Challenge 2 Icon
Solution

Previously, Mad Devs worked with Vietnamese projects, where the team integrated the VNPay payment system. Therefore, Mad Devs proposed to stakeholders to integrate VNPay into the MegaUni platform and received a positive response. VNPay is a financial service company that provides electronic payment solutions in Vietnam. For students, it became possible to pay by scanning a QR code via mobile banking with domestic and international credit cards.

Project Development Workflow

MegaUni and Mad Devs teams used a simple, efficient Agile development workflow to build this platform. We used various tools to track teamwork, such as Jira, Confluence and Slack, making it was easier for team members to communicate, monitor the development process, and prepare technical and user guides. For project managers, it was simpler to prioritize tasks and get feedback from the clients’ team.

An organized project management workflow helps projects run more efficiently. It increases collaboration, saves time, and helps to get desired results. Not to be a stickler for details, but in brief, tasks were assigned a priority by the client team, or after discussion by managers with the client and based on the priority, tasks were pulled from the backlog and transferred to the 'TO DO' status. From this moment, the team can see the task on the Kanban board.

The image above clearly shows that the task goes through several stages, moving along the Kanban board. When its functionality is ready, it is sent for review, where it must be approved and tested on staging. As throughout the whole development and testing processes, the project managers are also actively engaged with the team and constantly support stakeholders in reviewing and accepting the work. It is worth noting the significant contribution of the stakeholders and clients’ team in the work process. They always kept in touch and timely reviewed and tested new features as soon as they were ready.

To set up a smooth cooperation between our team and the external testing team from MegaUni, Mad Devs created a separate Jira board where we could interact with each other and monitor the testing process. It became possible to see what is being tested and what issues need to be fixed. Moreover, project managers could review issues there and accordingly assign them to the development team. Thus, the workflow became more flexible and transparent, and the process became simpler and collaborative.

safari top bar Google Meet MegaUni

MegaUni with Mad Devs divided the development process into three milestones for the MVP version, each consisting a specific set of features that must be delivered on time. For convenient tracking of this task by milestones, the Mad Devs team used a Jiras functions: Releases. One benefit of using Releases is that it provides a clear picture of where we are, where we are going, and what to expect. As a transparency-providing feature, it helps the client and the development team see the bigger picture. In this way, it becomes possible to wrap tasks in one scope, check task statuses, and track when the milestone starts and ends. It was also possible to convert release notes and send them to the client to inform them about project changes and precise adjustments likely to affect their major and minor experiences.

Throughout the project development process, teams always communicated via Slack. We had daily calls with the team and asynchronous daily standups in Slack. The Mad Devs team in Slack connected the Enji.ai bot. Generally, Enji.ai is a product that automates the work processes of software development teams and has the ability to plan the company’s finances. The system collects data from Jira, Slack, and the code repository and then provides a comprehensive project overview. This system allowed our teamwork to become more organized.

safari top bar Stand Up MD

Besides those activities, Mad Devs also practised daily calls with the MegaUni product team. During these calls, we not only discussed priority tasks, feature implementations, and timelines but also demonstrated features according to their readiness. At the end of each milestone, the team held retrospective meetings that let us pause and think about what we had done well, what went wrong, and how to improve future performances.

In the Confluence work process, we practised two types of documentation. First is technical documentation prepared by the developers, which describes technical nuances of how the required feature was deployed with standard Open edX tools. It is necessary because Open edX is an open-source platform that represents only the essential functions, which were not enough for the client project. The second type is user guides that describe how to configure and use the features.

Cooperation Results

MegaUni is a product of EdTech, a subsidiary of Vietnam's largest private company in the education sector. MegaUni has previously worked with Mad Devs on other projects, knows that Mad Devs is capable of building complex projects. For Mad Devs, it was an excellent chance to create a project in the EdTech sphere.

It was a fruitful collaboration for both teams, which resulted in the development and launching of a functional educational platform. It provides users with an enjoyable educational experience and a user-friendly interface with features that make it easier to work with the platform. Implementing a payment integration for students made it possible to pay and study from home. Thus, MegaUni is a complete project with fully functioning LMS and e-commerce environment.

Furthermore, MegaUni plans to engage more educational organizations and universities, and offer them a platform for online classes, with excellent tools to help them make good courses. MegaUni plans to partner with more educational organizations and universities, and provide opportunities for online education by expanding the base of certified online courses. For interested universities, it can also serve as an internal study platform.

By attracting more investments, stakeholders plan to enhance the platform and release new advanced features for a better study environment.

Technologies We Used

  • Open edX

    Open edX

  • Python

    Python

  • Django

    Django

  • JavaScript

    JavaScript

  • React

    React

  • HTML

    HTML

  • CSS

    CSS

  • Sentry

    Sentry

  • Grafana

    Grafana

  • MongoDB

    MongoDB

  • SendGrid

    SendGrid

  • AWS

    AWS

  • Celery

    Celery

  • Docker

    Docker

  • Elasticsearch

    Elasticsearch

  • Jira Software

    Jira Software

  • Enji.ai

    Enji.ai

Meet the team

Mad Devs:

  • Tony Fedorenko

    Tony Fedorenko

    Delivery Manager

  • Ruslan Kasymov

    Ruslan Kasymov

    Project Manager

  • Cholpon Dobulbekova

    Cholpon Dobulbekova

    Project Manager

  • Tologon Omurzakov

    Tologon Omurzakov

    Backend Developer

  • Belek Abylov

    Belek Abylov

    Tech Lead

  • Baktybek Baiserkeev

    Baktybek Baiserkeev

    Backend Developer

  • Aitmyrza Omuraliev

    Aitmyrza Omuraliev

    Backend Developer

  • Emir Sabyrkulov

    Emir Sabyrkulov

    Frontend Developer

  • Anton Grushkin

    Anton Grushkin

    Frontend Developer

  • Vitaly Vagin

    Vitaly Vagin

    DevOps Engineer

  • Sergey Shturkin

    Sergey Shturkin

    Tech Lead

  • Alexander Sobolev

    Alexander Sobolev

    Open edX Backend Consultant

  • Dmitrii Khalezin

    Dmitrii Khalezin

    DevOps Engineer

MegaUni:

  • Dung Vũ Thị Thuỳ

    Dung Vũ Thị Thuỳ

    Head of Product

  • Ngọc Ngô Thái Minh

    Ngọc Ngô Thái Minh

    Business Analyst

  • Lê Ngọc Ngà

    Lê Ngọc Ngà

    Tech Lead