Smart LMS

Главное о кейсе

Smart LMS пока работает в тестовом режиме, но первые запуски показали, что детально продуманное и красочное визуальное оформление LMS и значительное структурное упрощение сделали интерфейс более привлекательным. Отдельно стоит отметить наши улучшения базовых условий работы Moodle. Такой результат особенно важен на фоне карантинных ограничений, стремительного развития технологий удаленного обучения, помогающий наладить ослабленные связи преподавателей и студентов. Новый дизайн и улучшенный функционал LMS значительно увеличит привлекательность Вышки в глазах абитуриентов и расширит возможности дистанционного обучения, подтверждая статус ВШЭ как самого продвинутого вуза России.
Smart LMS is working in 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.

Бизнес-задача и ее решение

Smart LMS является частью вышкинского учебного процесса уже давно, но о неудобстве, сложной и запутанной структуре и постоянных багах сервиса ходили целые легенды. Аскетичный и не ориентированный на пользователя интерфейс затруднял взаимодействие. Поэтому нашей главной задачей стала его модернизация, переосмысление интерфейса в пользу удобства и нативности, проработка кастомного UI/UX решения. Создание Smart LMS на основе API Moodle было одним из принципиальных требований заказчика.
Скоро мы нашли одну лазейку, которая помогла бы нам создать собственный интерфейс и буквально «надеть» его сверху на Moodle, создать сайт внутри сайта. Такой лазейкой стал API — возможность привязать мобильное приложение к системе для отображения данных из Moodle в кастомном мобильном интерфейсе. Для веб версий такой возможности не предусмотрено. Поэтому мы стали подробно изучать инструменты интеграции с мобильным приложением, чтобы позже применить их к созданию десктопной версии LMS. Как оказалось, большой разницы в подходах нет, и через месяц мы уже имели развернутое исследование по методам интеграции данных из Moodle на веб приложение. До нас этого еще никто не делал.
По мере изучения инструментов интеграции мы создали почти что отдельный мануал по разработке внешнего интерфейса, которым активно делились с другими разработчиками вышкинских сервисов.Также эти скрипты можно будет использовать в готовом виде при разработке любой другой платформы на основе Moodle.
Но осталась еще одна проблема. Сервис Moodle постоянно обновляется и мы никак не могли предугадать, где и когда появится новые плагины, так что при разработке внешнего интерфейса была велика опасность быть догоняющими, всегда оставаться в стадии разработки и отрисовки интерфейса для все новых фичей.
Поэтому мы совместили две версии — наш интерфейс отображается там, где он уже отрисован и функционирует, а те сервисы и вкладки, где дизайн еще не готов, отображаются отдельными элементами внутри нашего UI в оригинальном мудловском виде.
Такая хитрая схема, созданная в iFrame, функционирует как сайт внутри сайта — навигация синхронизирована между внутренним мудловским сервисом и нашим интерфейсом, при переходе на отрисованную готовую часть LMS мы перехватываем пользователя и перекидываем на нашу версию, а то, что еще не готово, показано юзеру в подлинном виде, но врезанном в наш интерфейс (например, навигация, поля и окружающие элементы).
После решения проблемы с Moodle, мы приступили к разработке нового дизайна. Личный кабинет стал более нативным и простым. После персональной информации студента следуют доминирующие карточки, которые с ходу погружают пользователя в приоритетные события и объявления. Прелоудеры карточек помогают понимать юзеру состояние интерфейса, делают взаимодействие более комфортным. За карточками идет лист недавно посещенных курсов, позволяющий студенту быстро найти последнюю покинутую вкладку.
Окна курсов емко отражают актуальную информацию в разных визуальных образах: оценка, теги, фото преподавателя и лист участников с возможностью быстрого перехода к более полной информации. Дополнительная анимация улучшает пользовательский опыт.
На странице курса (как и в личном кабинете) в шапке отражается индивидуальный цветовой паттерн. Генератор изображений, включающий 10 цветов и 25 текстур, создает для каждого курса собственную картинку в зависимости от профиля и направления обучения, помогая пользователю быстро находить нужную вкладку в листе по визуальным признакам. Такой подход помогает создать позитивный и дружелюбный образ сервиса.
Кроме того, страница курса снабжена визуально структурированной и подробной информацией о преподавателях и участниках в форме модального окна с возможностью сразу же связаться с однокурсником или руководителем, не выходя за пределы вкладки. Информация на странице курса, также, как и в личном кабинете, распределена по приоритетности: «Разделы» (все о курсе), «Срочное» (информация с горящими дедлайнами) и «Модули» (данные о каждом отдельном модуле курса). В этих вкладках и внутри них присутствуют только самые главные данные, более подробно обо всем можно узнать отдельно. Так, экосистема интерфейса не засоряется ненужными и неинформативными разделами, которые скрыты в отдельных страницах, которые, при желании, можно легко развернуть. Отдельно отметим, что визуальные детали курса и модулей имеют тот же цветовой паттерн, что и весь курс.
В дополнительных разделах «Календарь», «Оценки» мы сохранили цветовую идентификацию курсов и возможностью управления детализированностью данных на странице. Это упрощает взаимодействие и добавляет эстетичности и дружелюбности в эмоциональный образ продукта.

Smart LMS has been a part of the HSE educational process for a long time, but inconvenience, 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, rethink the interface in favor of convenience and nativity, and develop a custom UI / UX solution. Creating a Smart LMS based on the Moodle API was one of the principal requirements of the customer.
Soon we found one loophole that would help us to create our own interface and literally " put " it into Moodle creating a site inside the site. Such a loophole was the API — the ability to link a mobile application to the system for displaying data from Moodle into a custom mobile interface. This feature is not provided for web versions. Therefore, we began unveiling the integration tools with the mobile application, so that we could later apply them to creating a desktop 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 from Moodle to a web application. No one has ever done this before.
As we discovered the integration tools, we created almost a separate 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 is still one more problem. The Moodle service is constantly updated and we could not predict where and when new plugins would appear, so when developing the external interface, there was a great 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 yet ready 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 service and our interface, when you click on rendered ready part of the LMS we intercept user and toss in our version, but that still isn't ready and shown to the user in the original form, but embedded 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 flashcards, which immediately immerse the user in priority events and announcements. Card preloaders help him to understand the state of the interface, make interaction more comfortable. Behind the cards is a list of recently attended courses, allowing the student to find quickly 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 its own image for each course, depending on the field of study, helping the user to quickly find the desired tab in the sheet by visual signs. This approach helps to create a positive and friendly image of the service.
In addition, the Сourse page is provided with visually structured and detailed information about profs 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 about the course), "Urgent" (information with burning deadlines) and "Modules" (data about each individual module of the course). In these tabs and within them, only the most important data is present, you can learn more about everything separately. 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 entire course.
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. This simplifies interaction and adds aesthetics and friendliness to the emotional image of the product.

Прочая информация о кейсе

Smart LMS (Learning Management System) это адаптивная многофункциональная онлайн-платформа для студентов Вышки. Она не только предоставляет повсеместный доступ к образовательным курсам, личной документации, оценкам и разным сервисам, но и обеспечивает постоянную связь между участниками учебного процесса: студентами, преподавателями, модераторами и администраторами.
Smart LMS (Learning Management System) is an adaptive, multifunctional online platform for HSE students. Not only does it enable universal access to educational courses, personal documentation, assessments, and various services, but also provides constant communication between the participants in the educational process: students, teachers, moderators and administrators.

Скриншоты