ЕГЭ hub

Онлайн-школа подготовки к экзаменам

ЕГЭ hub
клиент
ЕГЭ hub
что сделали
Аналитика, проектирование, айдентика, UI/UX дизайн, frontend, backend-разработка, тестирование
дата запуска
сентябрь 2024
о проекте

ЕГЭ hub — одна из крупнейших онлайн-школ для подготовки к ЕГЭ и ОГЭ. С 2019 года школа подготовила более 30 000 учеников и входит в ТОП-20 компаний на рынке онлайн-образования.

Весь процесс обучения ЕГЭ hub изначально был построен на платформе GetCourse. Но с ростом числа учеников и требований к автоматизации обучения возможностей готового решения стало не хватать. Заказчик принял решение создать собственную платформу и обратился с этим запросом к нам.

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

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

  • Доработали логотип: изменили цветовую гамму, сделали его ярче, заменили шрифт на более современный и читаемый
  • Расширили палитру: добавили яркие цвета для гибкости в дизайне
  • Выбрали шрифт: для заголовков — самобытный Ferro Grotesk, который хорошо читается, запоминается и работает паре с Formular для наборного текста.
  • Создали пакет иллюстраций: с помощью нейросетей разработали набор маскотов с разными образами, предметные иконки и базовые иллюстрации.
Пак иллюстраций
Пак иллюстраций
Фавиконки
Фавиконки
Дизайн

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

Создавая ЕГЭ hub, мы задались целю превратить сложные функциональные задачи в простой и вдохновляющий опыт для учеников. Системный подход, интуитивный интерфейс и визуальный язык эффективно (и эффектно!) решают эту задачу. Мы последовательно проводим пользователя по сложным сценариям, говорим с ним на одном языке и фокусируем на главном. Симбиоз функциональности и эстетики. Денис Соколов, арт-директор
Денис Соколов арт-директор
Как устроена платформа ЕГЭ hub

В публичной части для неавторизованных пользователей доступны разделы:

  1. О нас — информация о школе, преимуществах обучения, команде
  2. Курсы — каталог доступных курсов с фильтром
  3. Преподаватели — список преподавателей с подробной информацией об образовании, результатах ЕГЭ, преподаваемых курсах и отзывами
  4. Банк заданий — конструктор заданий, подготовленный экспертами по ЕГЭ и ОГЭ.
сценарий юзера

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

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

Главная страница
Главная страница
курсы

В разделе представлены все доступные к покупке курсы онлайн-школы с фильтром по предмету, классу, экзамену, преподавателю.

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

Есть возможность покупки пакета из 2 или 3 курсов. При выборе одинакового временного периода на пакет действует дополнительная комбо-скидка, при этом выбранные тарифы могут отличаться. На курсы без скидки действуют промокоды.

Для оплаты пользователю необходимо зарегистрироваться на платформе стандартным способом или авторизоваться через VK ID. Оплата реализована через эквайринг Юkassa.

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

Курсы
Курсы
Корзина
Корзина
банк заданий

Пользователь может выбрать тестирование для ЕГЭ или ОГЭ, указать предмет, применить фильтр по разделу, теме, части предмета и форме ответа.

В тестах предусмотрено несколько типов заданий (текст, текст с картинкой, поиск соответствий) и форм ответа (короткий ответ, развёрнутый ответ, соответствие, последовательность).

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

Публичный банк заданий
Публичный банк заданий
Личный кабинет ученика

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

Всё удобно и под рукой.

Главная ученика
Главная ученика
расписание

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

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

В этом разделе ученик видит все свои курсы — текущие и архивные. После завершения курса сохраняется доступ к записям уроков и возможность повторно проходить домашние задания без проверки куратора.

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

Список курсов
Список курсов
просмотр уроков

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

Страница урока содержит запись или трансляцию, а также дополнительные материалы для скачивания.

Страница урока
Страница урока
Перед нами стояла масштабная задача — создать сервис, где пользователи смогут полноценно готовиться к ЕГЭ. Благодаря нашей экспертизе, опыту реализации EdTech-проектов, команде профессионалов и проактивности заказчика, нам удалось разработать в установленные сроки и бюджет образовательную платформу, которая готова к увеличению потока учеников и расширению возможностей. Ученики и кураторы отмечают удобство платформы, функциональность и дизайн. Евгений Околита, менеджер проекта
Евгений Околита менеджер проекта
домашние задания

После прохождения урока ученик получает доступ к домашним заданиям, сгруппированным по курсу, статусу и уровню сложности для удобства навигации. Задания имеют два уровня сложности и ограничены по времени. Если ученик не решает задания вовремя, у него сгорает «жизнь». Вернуть её можно, решив оба уровня задания.

После нажатия «Проверить» система показывает результат, решение и обновляет статистику. Некоторые задания требуют проверки куратора — например, с развёрнутым ответом или с прикреплённым файлом.

Конструктор заданий соответствует формату ЕГЭ. Мы учли вариативность баллов, разные форматы и способы проверки, адаптировав платформу под каждый тип задания. Например, в правильном ответе ученик может указать «2,5», «2.5» или «2/5» — платформа примет любой вариант.

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

Во время выполнения задания ученик может написать куратору в онлайн-чате. У куратора создаётся отдельная ветка, и он получает уведомление о новом сообщении.

статистика

В разделе «Статистика» ученик видит прогресс по курсам за месяц или весь период: сколько уроков пройдено и осталось, сколько домашних заданий выполнено и сколько ещё предстоит.

Д/З
Д/З
Общий раздел
Общий раздел
Статистика
Статистика
Дополнительные возможности для самопроверки

Помимо выполнения ДЗ ученик на платформе может самостоятельно обучаться, тренироваться и проверять свои знания. Для этого мы реализовали разделы:

  1. Банк заданий. Дублирует публичную часть, но авторизованные пользователи могут сохранять задания в избранное.
  2. Мои варианты. Ученик может создавать собственные наборы заданий для самопроверки. Конструктор позволяет выбрать параметры: ЕГЭ/ОГЭ, предмет, линия, тема. Платформа автоматически проверяет ответы без участия куратора.
  3. Система тестирования. Предлагает список заранее подготовленных тестов. Ученик выбирает подходящий тест, проходит его и может повторить или проработать ошибки.
  4. Интеллект-карты. Раздел с карточками по предметам приобретённых курсов. Доступны два формата изучения: «Вопрос-ответ», где ученик отвечает и переворачивает карточку для проверки, и «Заучивание», где система отслеживает прогресс по изученным карточкам. Карточки не содержат подсказок, а решения проверяются платформой.
Общая тестирования
Общая тестирования
Интеллект-карты
Интеллект-карты
Настройка варианта
Настройка варианта
Личный кабинет куратора

Домашние задания в ЕГЭ hub проверяют кураторы, которые ведут несколько групп по разным курсам одновременно.

Статистика и журнал оценок

Чтобы куратор мог оценивать прогресс выполнения заданий и объём своей работы, мы реализовали общий дашборд с наглядной статистикой. Он показывает, сколько учеников сдали задания, сколько проверено и сколько заданий просрочено.

Журнал оценок представлен в виде сводной таблицы по ученикам, темам домашних заданий, баллам и «жизням». Куратор может выбрать список учеников по курсу, группе или периоду. В журнале он просматривает успеваемость всей группы, выявляет темы, которые вызывают сложности, и определяет, каким студентам материал даётся тяжело.

Журнал оценок
Журнал оценок
проверка д/з

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

Интерфейс проверки удобен и функционален. Слева расположен список учеников, разделённых по статусам: «к проверке», «не сдано», «завершено». Индикаторы показывают сообщения в чате, просроченные задания и потерянные «жизни». Потерянные жизни сигнализируют, что ученик испытывает трудности и нуждается в помощи.

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

Проверка Д/З
Проверка Д/З
Статистика Д/З
Статистика Д/З
machaon Ui KIT

Этот проект стал первым, где мы использовали собственный MACHAON UI Kit, доработанный под проект. Этот инструмент значительно ускорил процесс работы и позволил гибко разрабатывать дизайн, адаптируя его под потребности клиента.

Кроме того, использование Machaon UI Kit упростило работу разработчиков, обеспечив единообразие компонентов и облегчив процесс внедрения дизайна в код.

что в итоге

Мы оцифровали и автоматизировали все этапы образовательного процесса в онлайн-школе ЕГЭ hub, создав собственную платформу.

  • Разработали интуитивно понятный интерфейс
  • Создали конструктор тестов и домашних заданий
  • Разработали рабочую область для выполнения и проверки ДЗ
  • Внедрили инструменты для отслеживания успеваемости учеников.
  • Обеспечили учеников и кураторов инструментами для планирования времени
  • Создали центр уведомлений о событиях и напоминаниях.
  • Разработали онлайн-чат с разделением по веткам.

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

результат ege-hub.ru
стек технологий
Figma
MACHAON UI Kit
Recraft
ChatGPT
React
NextJS
Laravel
Backpack
Redis
PostgreSQL
Nest JS
Vue
Mongodb
Swagger
Docker
интересные вещи

Пара занятных фактов:

  • использовали MACHAON UI Kit, что ускорило разработку дизайна на 25%
  • доработку айдентики изначально не обсуждали и не планировали
  • сгенерировали более 200 высококачественных иллюстраций через нейросеть
менеджер проекта
  • Евгений Околита
арт-директор
  • Денис Соколов
дизайнер
  • Денис Соколов
  • Марк Новак
фронтенд
  • Елена Вараксина
  • Ирина Пушкарева
бэкенд
  • Даниил Шумских
  • Роман Бызов
  • Федор Кладовщиков
Тест качества
  • Полина Махмутова
  • Илья Пономарев

Хотите также?

или свяжитесь напрямую telegram
можно почтой info@machaon.ru
москва
Дмитровское 100, стр. 2
+7 499 755 62 98
киров
Московская 25г
+7 8332 35 18 86

Еще

Фон
Фон
Фон
Фон
Смотреть все 90+