У самурая нет цели, только путь: как мы создали сервис для построения образовательного маршрута
- Заказчик
- БГПУ им. М.Акмуллы
- Задача
- Как мы продумали и создали дизайн и функциональную часть для сервиса, который помогает выстроить индивидуальный образовательный маршрут
Заказчик обратился к нам с просьбой обновить дизайн существующего сервиса для оценки профессиональных дефицитов преподавателей высших и средних учебных заведений, уровня знаний студентов и школьников-абитуриентов и построения индивидуального образовательного маршрута. Он хотел видеть его более лаконичным, простым и серьезным. А поскольку мы начали делать сервисы для тестирования еще на заре автоматизации всего и вся, то сразу же взялись за дело.
Проблема: «несерьезная» публичная часть сервиса и неудобная структура главной страницы.
Решение: мы должны были переработать публичную часть сервиса и структуру главной страницы. «Освежить дизайн», если использовать термины из технического задания.
Платформа служит для выявления точек роста и дальнейшего развития педагогов и студентов. С ее помощью можно создать модель профессионального роста педагогов — выявить набор навыков пользователей (будущих и нынешних учителей), определить проблемные места и порекомендовать возможные решения.
Чтобы пользователь попал в рабочую часть платформы, ему нужно ознакомиться с той самой публичной частью. В ней находятся описание сервиса, особенности системы обучения, принципы работы платформы, календарь и контакты.
При проработке дизайна мы несколько раз проинтервьюировали заказчика и на основе его пожеланий — сделать «чище и понятнее» — создали несколько драфтов стилистики. Он выбрал наиболее подходящий.
После мы создали low-fi прототипы основных пользовательских путей, проработали небольшую дизайн-систему и её компоненты, а затем собрали макеты.
Так, публичная часть сервиса стала более светлой и свободной, без лишней информации. Пользователь может изучить главные тезисы о платформе и алгоритм работы с ней, узнать о ее возможностях. Кроме того, в этой же части сервиса расположен календарь событий, в котором можно записаться на мероприятие и узнать подробную информацию.
Мы также обновили раздел «Помощь», в котором собраны ответы на часто задаваемые вопросы и находится форма обратной связи.
Отметим, что в процессе реализации наша команда столкнулась с постоянным приростом дополнительных функций, поэтому мы стремились очень гибко настроить пользовательские пути.
Проблема: необходимо внедрить на сайт основной функционал сервиса — тестирование и построение индивидуального образовательного маршрута.
Решение: чтобы понять, как должен выглядеть основной функционал, необходимо разобраться, как работать платформа.
Итак, для составления индивидуального образовательного маршрута (ИОМ) пользователь должен:
1. Зарегистрироваться на платформе.
Помимо классической регистрации через электронную почту, мы добавили аутентификацию через Госуслуги. Для этого мы подняли микросервис на Node.js, которыи? оборачивает cli утилиту КриптоПро, она нужна для отправки запросов на сервер Госуслуг — с ее помощью выполняется шифрование.
Мы не стали встраивать функционал в основное приложение, ведь оно и так делает слишком много. Вместо этого сделали микросервис, которыи? можно переиспользовать в любои? момент.
2. Пройти тестирование — это выявит уровень подготовки и владения навыками.
На основе результатов — в соответствии с затруднениями и запросами каждого пользователя платформы — сервис выстраивает ИОМ. В него входят мероприятия, записи занятий и учебные материалы.
В ИОМ есть обязательный, вариативный и индивидуальный модули:
— обязательный — набор рекомендуемых курсов, стажировок, вебинаров, семинаров в соответствии с профдефицитами. Объем этого блока зависит от уровня компетенций;
— вариативный — возможность самостоятельного выбора формата мероприятия, обеспечивающего его профессиональный рост и развитие;
— индивидуальный — образовательные события, которые выходят за рамки предметной и психолого-педагогической подготовки. При этом они могут быть интересны пользователю платформы. Этот модуль также может быть сформирован по заказу работодателя.
Проблема: непростая технологическая часть — чужая кодовая база и внедрение новых технологий в уже существующий сервис.
Решение: архитектура платформы монолитная, сервер самостоятельно подготавливает HTML-разметку на основе шаблонов. Есть небольшие вкрапления jquery.
А поскольку перед нами в первую очередь стояла задача редизаийна, нужно было сделать красиво, лаконично и удобно. Иными словами — позаботиться о пользовательском опыте и встроить современные инструменты в работающий сервис.
Разработка велась на изначальной кодовой базе (PHP), а это не наш технологический стек. Было непросто создавать продукт на чужой кодовой базе. Нам помогло то, что было время на онбординг разработчиков. Мы подключили к работе фронтенд- и бэкенд-инженеров и освоили непривычный для нас стек.
Чтобы не нарушить работу сервиса, мы внедрили множество маленьких React-приложении?. Например, Drag-and-Drop для выполнения запроса на упорядочивание.
Мы использовали встроенный пакет laravel-mix — это обертка над Webpack, которая упростила нам разработку фронтенда.
В React-приложениях мы использовали данные через data-атрибуты.
Для динамики мы делали дополнительные запросы на сервер — это практикуют во всех современных веб-приложениях. Данные не статичны — они редактируются на сервере, чтобы пользователю не нужно было перезагружать страницу, когда ему нужно просмотреть события следующей недели.
Теперь подгрузка динамическая, без перезагрузок. Подобные механизмы улучшают пользовательский опыт и делают интерфейс более дружелюбным.
KPI
Постоянная доверительная коммуникация с командой заказчика позволила нам осознанно подойти ко всем процессам. Это помогло быстро выдать результат, максимально удобный для конечного пользователя.
Мы запустили stage-сервер, который был предназначен для тестового прогона нескольких сотен пользователей и показа результата работы. Заказчик остался доволен, а мы продолжаем поддержку сервиса.