Разработка корпоративного сайта и учебного портала для Фонда содействия развитию науки «Институт «Вега»

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

В результате работы был создан полноценный учебный портал, корпоративный сайт с информацией о курсах и личный кабинет студента. Проект разработан на русском и английском языках, адаптирован под мобильные устройства и различные браузеры. Выполнен полный спектр работ от прототипирования и разработки дизайна до программирования и внедрения.

As a result, a full-fledged educational portal was created, which includes a corporate website with information about courses and a student's personal account. The project was developed in Russian and English, adapted for mobile devices and various browsers. A full range of work was performed from prototyping and design development to programming and implementation.

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

- Создание мультиязычного проекта «под ключ» для размещения информации о Фонде, курсах и лекторах, а также для записи на занятия.
- Разработка полноценного учебного портала
- Разработка личного кабинета студента

Основные работы:

- Разработка проекта с нуля
- Прототипирование
- Проектирование UI/UX
- Мультиязычная версия (ru/en)
- Адаптивные версии
- Кроссбраузерность
- Верстка
- Внедрение коробочного Битрикс24
- Организация ведения проектов
- Интеграция с CRM
- Настройка сервера, DevOps
- Функционал учебной части
- Интерактивные карты и другие работы

Корпоративный сайт стал первым этапом в создании закрытого образовательного портала с обширными правами доступа. После окончания всех работ студентам, преподавателям и научным сотрудникам станет доступна площадка, где они смогут обучаться и проводить исследования. Там они найдут записи лекций, базу знаний, домашние задания, тестирования и многое другое.

Проект построен на платформе Битрикс24 корпоративный портал, так как в перспективе планируется запуск учебного портала (личного кабинета) и интранет для проектной работы. Реализация проекта выполняется без кастомизаций штатных компонентов, с использованием Rest Api, что позволит в будущем оперативно проводить процедуру обновления платформы. Подготовили и настроили Битрикс-окружение и сервер. В результате сайт выдерживает высокие нагрузки и позволяет принять большой поток пользователей.

Дизайн полностью оригинален, в его разработке использовались только новые приемы веб-дизайна UX/UI. Заказчик предоставил брендбук, на который мы опирались при проработке макетов. В итоге проект получился лаконичным и функциональным, выполненным в фирменном стиле клиента. Его особенностью стали блоки, которые отображают большое количество информации о курсах, но при этом сохраняют визуальную легкость, а также изменение вида слайдера в зависимости от того, какой тип информации введен.

Для дополнительного удобства разработано три типа меню: в шапке при прокрутке экрана вниз, боковое меню при нажатии на кнопку в левом верхнем углу, третье меню расположено в футере.

Чтобы записаться на курс, пользователям необходимо подать заявку. Для этого создана многофункциональная форма, где каждой группе (студентам, аспирантам, преподавателям, научным сотрудникам и т.д.) открываются соответствующие поля для заполнения. Для некоторых категорий разворачивается дополнительное меню с вариантами выбора. Внедрена визуальная валидация для полей, которые выделяются синим, если информация введена корректно, и красным – если поле осталось пустым или заполнено неверно. После заполнения формы администрация Института проверяет данные на достоверность и только после этого одобряет заявку.

Курсы проводятся на русском и английском языках, поэтому сайт необходимо было сделать мультиязычным, в связи с чем была разработана версия на английском. При этом контент отдельно контролируется для разных локаций. Если обязательные свойства (название, ФИО) не заполнены на одном из языков, их вывод будет происходить только в той локации, где информация внесена.

Так как пользователи, и особенно студенты, часто просматривают страницы на смартфоне, сайт был адаптирован под мобильные устройства и все виды браузеров.

- Creation of a turnkey multilingual project which is aimed to inform the audience about the Foundation, courses and lecturers, as well as to register for classes
- Training portal development
- Student's personal account development

Main works:
- Project development from scratch
- Prototyping
- UI/UX design
- Multilingual version (ru/en)
- Adaptive versions
- Cross-browser compatibility
- Layout
- Boxed Bitrix24 implementation
- Arranging project management
- Integration with CRM
- Server setup, DevOps
- Functionality of the educational part
- Interactive maps and other works

The corporate website was the first step in the development of a private educational portal with extensive access rights. After all work is completed, students, teachers and researchers will have access to a platform where they can study and conduct research. There they will find lecture recordings, a knowledge base, homework assignments, tests, and more.

The project is built on the Bitrix24 corporate portal platform, since in the future it is planned to launch a learning portal (personal account) and an intranet for project work. The project implementation is carried out without customizing the standard components, using Rest Api, which will allow the customer to quickly update the platform in the future. We have completely prepared and configured the Bitrix environment and server. As a result, the website withstands high loads and a large flow of users.

The design is completely original, only new UX/UI web design techniques were used in its development. The customer provided the brand book, which we used when creating the layout. As a result, the project turned out to be simple and functional, executed in the client's corporate style. Its feature is the blocks that display a large amount of information about the courses, but at the same time retain visual lightness. The appearance of the slider is also changed depending on the type of information entered.

For additional convenience, three types of menus were developed: in the header when scrolling down the screen, a side menu when the button in the upper left corner is pressed, and the third menu is located in the footer.

To enroll in a course, users need to apply. For this, a multifunctional form was created, where each group (students, graduate students, teachers, researchers, etc.) sees the appropriate fields to fill out. For some categories, an additional menu expands with extra fields. We implemented visual validation for fields: they are highlighted in blue if the information is entered correctly, and in red if the field is left empty or filled in incorrectly. After the form is filled out, the administration of the Institute manually check the data for accuracy and then approve the application.

The courses are held in Russian and English, so the website had to be multilingual, and therefore a version in English was developed. At the same time, the content is separately controlled for different locations. If the required properties (name, full name) are not filled in in one of the languages, they will appear only in the location where the information is entered.

Since users, and especially students, often use smartphones, the website was adapted for mobile devices and all types of browsers.

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

МГУ и банк ВТБ запустили совместный проект, направленный на поддержку и развитие в России школы финансовой математики, а также подготовку высококвалифицированных специалистов финансовой индустрии. Мы создали платформу для Института, где студенты найдут подробную информацию о предстоящих курсах, лекторах и спикерах, а также разработали учебный портал и личный кабинет учащегося. Ознакомиться с этим кейсом можно у нас на сайте: https://vis.center/~IcUWz

Moscow State University and VTB Bank launched a joint project aimed at supporting and developing a school of financial mathematics in Russia, as well as training highly qualified specialists in the financial industry. We created a platform for the Institute where students will find detailed information about upcoming courses, lecturers and speakers, and also developed an educational portal and student's personal account.

Скриншоты