- Заказчик
- ЕГЭ hub
- Задача
- Разработать масштабируемую и удобную онлайн-платформу, где будет проходить весь образовательный процесс: от онлайн-уроков и домашних заданий до аналитики прогресса обучения учеников.
О проекте
ЕГЭ hub — одна из крупнейших онлайн-школ для подготовки к ЕГЭ и ОГЭ. С 2019 года школа подготовила более 30 000 учеников и входит в ТОП-20 компаний на рынке онлайн-образования.
Весь процесс обучения ЕГЭ hub изначально был построен на платформе GetCourse. Но с ростом числа учеников и требований к автоматизации обучения возможностей готового решения стало не хватать. Заказчик принял решение создать собственную платформу и обратился с этим запросом к нам.
Задачи
- Разработать масштабируемую и удобную онлайн-платформу, где будет проходить весь образовательный процесс: от онлайн-уроков и домашних заданий до аналитики прогресса обучения учеников.
- Автоматизировать процессы, сэкономить время преподавателей и повысить качество сервиса для учеников.
Айдентика
Перед разработкой дизайна мы изучили фирменный стиль заказчика и предложили изменения, которые были приняты и внедрены:
- Доработали логотип: изменили цветовую гамму, сделали его ярче, заменили шрифт на более современный и читаемый
- Расширили палитру: добавили яркие цвета для гибкости в дизайне
- Выбрали шрифт: для заголовков — самобытный Ferro Grotesk, который хорошо читается, запоминается и работает паре с Formular для наборного текста.
- Создали пакет иллюстраций: с помощью нейросетей разработали набор маскотов с разными образами, предметные иконки и базовые иллюстрации.
Дизайн
После обновления айдентики и типографики, опираясь на референсы заказчика, мы разработали визуальную концепцию сайта. Нашей целью было передать через визуал приятную, тёплую и слегка игривую атмосферу, чтобы запомниться пользователю.
Создавая ЕГЭ hub, мы задались целю превратить сложные функциональные задачи в простой и вдохновляющий опыт для учеников. Системный подход, интуитивный интерфейс и визуальный язык эффективно (и эффектно!) решают эту задачу. Мы последовательно проводим пользователя по сложным сценариям, говорим с ним на одном языке и фокусируем на главном. Симбиоз функциональности и эстетики. Денис Соколов, арт-директор
Как устроена платформа ЕГЭ hub
В публичной части для неавторизованных пользователей доступны разделы:
- О нас — информация о школе, преимуществах обучения, команде
- Курсы — каталог доступных курсов с фильтром
- Преподаватели — список преподавателей с подробной информацией об образовании, результатах ЕГЭ, преподаваемых курсах и отзывами
- Банк заданий — конструктор заданий, подготовленный экспертами по ЕГЭ и ОГЭ.
Сценарий пользователя
После покупки курса и авторизации на платформе ученик получает доступ к личному кабинету с расписанием, уроками, домашними заданиями, статистикой и другими возможностями. Кураторы также имеют личный кабинет для проверки домашних заданий, отслеживания прогресса учеников и общения в чате.
Курсы
В разделе представлены все доступные к покупке курсы онлайн-школы с фильтром по предмету, классу, экзамену, преподавателю.
У каждого курса есть три тарифа с различным набором условий и услуг. Выбрать и оплатить тариф можно за текущий или следующий месяц, либо за весь период курса. Прошедшие записи уроков можно приобрести по сниженной стоимости.
Есть возможность покупки пакета из 2 или 3 курсов. При выборе одинакового временного периода на пакет действует дополнительная комбо-скидка, при этом выбранные тарифы могут отличаться. На курсы без скидки действуют промокоды.
Для оплаты пользователю необходимо зарегистрироваться на платформе стандартным способом или авторизоваться через VK ID. Оплата реализована через эквайринг Юkassa.
Мы спроектировали карточку курса со сложным интерфейсом, где показали матрицу выбора периода, условия покупки, тарифы, цены со скидкой и без, а также поле для промокода. В результате процесс выбора и оформления курсов стал удобным и понятным для пользователя.
Банк заданий
Пользователь может выбрать тестирование для ЕГЭ или ОГЭ, указать предмет, применить фильтр по разделу, теме, части предмета и форме ответа. В тестах предусмотрено несколько типов заданий (текст, текст с картинкой, поиск соответствий) и форм ответа (короткий ответ, развёрнутый ответ, соответствие, последовательность). При проектировании и реализации карточки задания мы применили системный подход для её повторного использования во внутреннихразделах платформы. Мы разработали её как конструктор, который успешно собирается под разные типы вопросов и формы ответов, как в тестах ЕГЭ.
Личный кабинет ученика
На главной странице личного кабинета ученик видит всё самое важное: Календарь с расписанием на ближайшие дни, домашние задания и доступные курсы. Всё удобно и под рукой.
Расписание
Расписание представлено в календаре на месяц, неделю и день. В нём отмечены даты и время уроков и домашних заданий.
- С помощью переключателя можно отобразить только уроки или только домашние задания.
- Для удобства у каждого события и предмета есть своя визуальная метка.
- При клике на событие появляются информеры с возможностью перейти к нему: начать урок, скачать конспект и другие действия.
Мои курсы
В этом разделе ученик видит все свои курсы — текущие и архивные. После завершения курса сохраняется доступ к записям уроков и возможность повторно проходить домашние задания без проверки куратора.
На странице курса отображается расписание ближайших занятий, информация о кураторе с возможностью перейти в чат с ним. Ученик может фильтровать занятия, домашние задания и материалы по темам, месяцу или выбрать непросмотренные уроки.
Просмотр уроков
Ученик может перейти на страницу урока с главной страницы личного кабинета, из расписания или раздела доступных курсов. Уроки в онлайн-школе проводятся через трансляции на Kinescope. Мы настроили интеграцию с сервисом, чтобы ученики смотрели уроки в личном кабинете. Можно подключиться к уроку онлайн или посмотреть его в записи.
Страница урока содержит запись или трансляцию, а также дополнительные материалы для скачивания.
Перед нами стояла масштабная задача — создать сервис, где пользователи смогут полноценно готовиться к ЕГЭ. Благодаря нашей экспертизе, опыту реализации EdTech-проектов, команде профессионалов и проактивности заказчика, нам удалось разработать в установленные сроки и бюджет образовательную платформу, которая готова к увеличению потока учеников и расширению возможностей. Ученики и кураторы отмечают удобство платформы, функциональность и дизайн. Евгений Околита, менеджер проекта
Домашние задания
После прохождения урока ученик получает доступ к домашним заданиям, сгруппированным по курсу, статусу и уровню сложности для удобства навигации. Задания имеют два уровня сложности и ограничены по времени. Если ученик не решает задания вовремя, у него сгорает «жизнь». Вернуть её можно, решив оба уровня задания.
После нажатия «Проверить» система показывает результат, решение и обновляет статистику. Некоторые задания требуют проверки куратора — например, с развёрнутым ответом или с прикреплённым файлом.
Конструктор заданий соответствует формату ЕГЭ. Мы учли вариативность баллов, разные форматы и способы проверки, адаптировав платформу под каждый тип задания. Например, в правильном ответе ученик может указать «2,5», «2.5» или «2/5» — платформа примет любой вариант.
Мы реализовали бальную систему для автопроверяемых заданий: в зависимости от количества ошибок в определённом типе задания выдаются разные баллы.
Во время выполнения задания ученик может написать куратору в онлайн-чате. У куратора создаётся отдельная ветка, и он получает уведомление о новом сообщении.
Статистика
В разделе «Статистика» ученик видит прогресс по курсам за месяц или весь период: сколько уроков пройдено и осталось, сколько домашних заданий выполнено и сколько ещё предстоит.
Дополнительные возможности для самопроверки
Помимо выполнения ДЗ ученик на платформе может самостоятельно обучаться, тренироваться и проверять свои знания. Для этого мы реализовали разделы:
- Банк заданий. Дублирует публичную часть, но авторизованные пользователи могут сохранять задания в избранное.
- Мои варианты. Ученик может создавать собственные наборы заданий для самопроверки. Конструктор позволяет выбрать параметры: ЕГЭ/ОГЭ, предмет, линия, тема. Платформа автоматически проверяет ответы без участия куратора.
- Система тестирования. Предлагает список заранее подготовленных тестов. Ученик выбирает подходящий тест, проходит его и может повторить или проработать ошибки.
- Интеллект-карты. Раздел с карточками по предметам приобретённых курсов. Доступны два формата изучения: «Вопрос-ответ», где ученик отвечает и переворачивает карточку для проверки, и «Заучивание», где система отслеживает прогресс по изученным карточкам. Карточки не содержат подсказок, а решения проверяются платформой.
Личный кабинет куратора
Домашние задания в ЕГЭ hub проверяют кураторы, которые ведут несколько групп по разным курсам одновременно.
Статистика и журнал оценок
Чтобы куратор мог оценивать прогресс выполнения заданий и объём своей работы, мы реализовали общий дашборд с наглядной статистикой. Он показывает, сколько учеников сдали задания, сколько проверено и сколько заданий просрочено.
Журнал оценок представлен в виде сводной таблицы по ученикам, темам домашних заданий, баллам и «жизням». Куратор может выбрать список учеников по курсу, группе или периоду. В журнале он просматривает успеваемость всей группы, выявляет темы, которые вызывают сложности, и определяет, каким студентам материал даётся тяжело.
Проверка д/з
Мы структурировали раздел домашних заданий по группам для удобства. Куратор может фильтровать работы по курсу, статусу и месяцу. В каждой группе видно количество сданных, проверенных и просроченных заданий, непрочитанные чаты и дедлайн проверки.
Интерфейс проверки удобен и функционален. Слева расположен список учеников, разделённых по статусам: «к проверке», «не сдано», «завершено». Индикаторы показывают сообщения в чате, просроченные задания и потерянные «жизни». Потерянные жизни сигнализируют, что ученик испытывает трудности и нуждается в помощи.
В заданиях, требующих проверки, куратор даёт развёрнутый ответ, ставит баллы, прикрепляет файлы и общается с учеником в чате. Решение ученика всегда доступно в рабочей области.
MACHAON UI KIT
Этот проект стал первым, где мы использовали собственный MACHAON UI Kit, доработанный под проект. Этот инструмент значительно ускорил процесс работы и позволил гибко разрабатывать дизайн, адаптируя его под потребности клиента. Кроме того, использование Machaon UI Kit упростило работу разработчиков, обеспечив единообразие компонентов и облегчив процесс внедрения дизайна в код.
Что в итоге
Мы оцифровали и автоматизировали все этапы образовательного процесса в онлайн-школе ЕГЭ hub, создав собственную платформу.
- Разработали интуитивно понятный интерфейс
- Создали конструктор тестов и домашних заданий
- Разработали рабочую область для выполнения и проверки ДЗ
- Внедрили инструменты для отслеживания успеваемости учеников
- Обеспечили учеников и кураторов инструментами для планирования времени
- Создали центр уведомлений о событиях и напоминаниях
- Разработали онлайн-чат с разделением по веткам
Благодаря разработке и внедрению собственной образовательной платформы обучение учеников и работа кураторов стали удобнее и проще. А для заказчика созданная платформа является гибким инструментом к масштабированию и расширению функционала.