Smart LMS (Learning Management System) is an adaptive, multifunctional online platform for HSE students. It enables universal access to educational courses, personal documentation, assessments, and various services and provides constant communication between the participants in the educational process: students, teachers, moderators and administrators.
Smart LMS has been a part of the HSE educational process for a long time, but its inconvenient, complex, confusing structure and constant bugs were legendary. The ascetic and user-unfriendly interface made it difficult to interact with the educational service. Therefore, our main task was to modify and modernize it, to make the interface convenient and native and to develop a custom UI / UX solution. Creating a Smart LMS based on top of the Moodle Platform was one of the principal requirements of the customer.
Fortunately we had found one loophole that would help us to create our own interface and literally put it on the top of the Moodle, creating a fresh and modern look. That loophole was the API — the ability to link a mobile application to the system for displaying the data from Moodle in a custom mobile interface. This feature is not provided for web versions. Therefore, we began researching the integration tools with the mobile application, so that we could later apply it to create a desktop web version of the LMS. As it turned out, there is no big difference in the approaches, and a month later we already had a detailed study on methods for integrating data between Moodle and our web application. No one had ever done this before.
As we discovered the integration tools, we created our own manual for developing the external interface, which we actively shared with other developers of the HSE services. These scripts can also be used ready-made when developing any other Moodle-based platform.
But there was still one more problem. The Moodle service is constantly updated and we could not predict where and when new plugins would appear, so when we developed the external interface, there was a danger of always remaining in the development stage and drawing the interface for all new features.
Therefore, we combined the two versions — our interface is displayed where it is already drawn and functioning, and those services and tabs where the design is not ready yet are displayed as separate elements inside our UI in the original Moodle form.
This scheme, created in the iframe, functions as a site within a site. Navigation synchronized between the inner Moodle service and our interface. When a user clicks on the LMS part, that has been already created in our design, nothing happens. But those parts, that we haven’t created yet, are shown in the original Moodle form, but integrated in our interface (navigation, fields and surrounding elements).
After a detailed research of Moodle’s features, we began developing a new clear design. Personal Accounts have become more native and simple. The student's personal information is followed by dominant cards, which immerse the user in priority events and announcements. Card preloaders help to understand the state of the interface, make interaction more comfortable. Below the cards there is a list of recently attended courses, so the student could quickly find the last tab left.
The course tabs succinctly reflect the current course information in different visual images: assessment, tags, lecturer's photo and the list of participants with the ability to quickly navigate to more complete information. Additional animation improves the user experience.
On the Course page (as well as on the course tabs in the Personal account), an individual color pattern is reflected in the header. The image generator, which includes 10 colors and 25 textures, creates the unique image for each course, depending on the field of study. It helps to quickly find the desired tab in the sheet by visual signs. This approach creates a positive and friendly image of the service.
In addition, the Сourse page provides visually structured and detailed information about professors and participants in the form of a modal window with the ability to immediately contact them without leaving the tab. The information on the course page, as well as in the personal account, is distributed by priority: "Sections" (all information about the course), "Urgent" (information with urgent deadlines) and "Modules" (data about each individual module of the course). In these tabs and within them only the most important data is present. So, the interface ecosystem is not clogged with unnecessary and uninformative sections, which are hidden in separate pages, which, if desired, can be easily expanded. The visual details of the course and modules have the same color pattern as the course itself.
In the additional sections "Calendar", "Grades" we have retained the color identification of courses and the ability to control the detail of data on the page. It simplifies interaction and adds aesthetics and friendliness to the emotional image of the product.

Smart LMS is working in a test mode, but the first launches showed that the detailed and colorful visual design of the LMS and a significant structural simplification made the interface more attractive and native. We should also mention our improvements in the basic working conditions of Moodle. This result is especially important against the background of quarantine restrictions, the rapid development of remote learning technologies, which helps to establish weak ties between supervisors and students. The new design and improved functionality of the LMS will significantly increase the attractiveness of HSE in the eyes of applicants and expand the possibilities of distance learning, confirming the HSE's status as the most advanced university in Russia.
Login: test_student Password: Vjq123!@#