Онлайн-школа №1: Редизайн UX и UI интерфейса образовательного портала

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

Онлайн-школа №1 – это онлайн-школа для детей с 1 по 11 класс, насчитывающая более 12 тысяч учеников из 77 стран по всему миру. После 11 класса ученикам выдают аттестаты государственного образца. В школе преподают и подготавливают материалы к занятиям более 400 учителей и методистов.

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

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

Как проект изменил жизнь пользователей

Обновление дизайна сайта сделало платформу более современной и функциональной.

На основе фидбека пользователей мы обновили и реорганизовали главную страницу личного кабинета. Каталог предметов был перемещен с главной страницы в левое боковое меню, чтобы ученики могли легко и быстро перемещаться между дисциплинами.

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

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

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

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

Мы настроили интеграцию сайта с Zoom, и записи уроков стали автоматически подгружаться в карточку занятия. Также благодаря интеграции в систему школы приходят отчеты о посещаемости занятий: страницы учеников онлайн-школы привязаны к Zoom-аккаунтам.

Чтобы быстро находить учебные материалы, мы создали специальную структуру управления, напоминающую Яндекс или Google Диск. Методисты загружают файлы в облако или создают задания прямо на сайте. Затем они выбирают необходимые файлы и объединяют их друг с другом в один урок. Наполнение занятия можно корректировать как в конструкторе.

Мы расширили модераторам возможность управления календарями учеников. В них появились мастер-инструменты, с помощью которых в повторяющихся событиях можно менять отдельные пункты, к примеру, названия.

Мы настроили гибкую систему тестирования. Ранее карточка вопроса была сама по себе небольшого размера, в ней было много лишней информации и элементов интерфейса. Мы сделали изменили ее структуру и добавили 14 форматов вопросов в тесте: найти соответствия, выбрать один вариант ответа или несколько, ответить на вопрос по картинке и т.д.

На проекте мы реализовали виджетную систему и гибкую систему ролей для масштабирования. Сайт онлайн-школы предполагает множество видов аккаунтов: ученики, учителя, родители, модераторы, кураторы, координаторы и т.д. Нововведения позволили добавить на платформу 18 ролей с разным уровнем доступа. А новые профили можно создавать всего за 15-20 минут. Простота и скорость добавления пользователей экономит ресурсы команд при масштабировании.

Мы встроили на сайт тренажеры для подготовки в ОГЭ и ЕГЭ. Для учеников созданы условия, максимально приближенные к экзамену: ограничение по времени и режим фокусировки. После завершения прохождения система автоматически проверяет тестовую часть экзамена, а вторую часть с развернутыми ответами отправляет учителям.

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

Редизайн платформы и обновление функционала упростили пользователям работу с сайтом: ученикам стало удобнее смотреть расписание, выполнять тесты и посещать уроки в Zoom.

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

Благодаря усовершенствованию платформы число учеников выросло в 12 раз за последний год.

Крафт (мастерство), реализация, технические детали

Для разработки проекта использовались технологии на JavaScript: TypeORM, Nodejs, Nestjs, Nuxtjs, PostgreSQL, Redis, Microservices, Rabbitmq, Rest API. Сочетание этих технологий позволило большой команде разработчиков быстро и удобно выполнять задачи.

При управлении проектом мы использовали гибридный Scrum. Над редизайном онлайн-школы работало порядка 14 человек, поэтому было необходимо четко выстроить процессы. Это правильно расставить приоритет и последовательность задач, контролировать ход выполнения работ и проводить периодически мини-ретроспективы в конце спринтов, чтобы подвести итоги и свериться с вектором работ.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Работа над проектом строилась по следующему принципу: согласовали с клиентом работы → пообщались на дейлике с командой, обсудили лучшие варианты решения → определили новые задачи и продолжили разработку.

Мы постоянно взаимодействовали с клиентом: показывали, что реализовали, а он, в свою очередь, сразу подхватывал и просматривал нововведения. Для нас это было большим плюсом, так как мы сразу минимизировали недочеты.

Скриншоты