Programica Tagline Awards 2022 - GOLD

Онлайн-школа для подготовки к ЕГЭ

ООО «Програмика»
клиент
ООО «Програмика»
сотрудничество
с 2021 года
что сделали
Аудит, проектирование, UI/UX дизайн, front-end, back-end разработка, тестирование, развитие и поддержка
дата запуска
май 2022
programica.ru
О проекте

Programica — это EdTech-проект, команда которого пришла к нам с идеей создания образовательной площадки для подготовки учеников к ЕГЭ по математике. В результате мы воплотили эту идею в масштабируемую платформу для подготовки к ЕГЭ с возможностью создания неограниченного количества курсов. Уже в процессе реализации проект масштабировался до 2-х предметов: математики и русскому языку.

Сегодня это удобный инструмент, с помощью которого пользователи могут:

  • проходить групповые онлайн-уроки
  • вести переписку с преподавателем в чате видеотрансляции
  • участвовать в вебинарах в рамках платформы
  • получать и выполнять домашние задания
  • готовиться к ЕГЭ с помощью тренировок, автоматизированных на ML- алгоритмах
задача

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

Главная страница ученика
Главная страница ученика
Проектирование

Реализацию проекта мы разделили на 6 итераций. На каждую из них разработали частное техническое задание. В результате каждая итерация решала свою серию задач. Мы использовали Agile-подход: все процессы, которые можно было запустить параллельно, выполнялись параллельно — это ускорило процесс. Между релизами работа не прекращалась. По окончанию каждого спринта мы демонстрировали заказчику достигнутые результаты.

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

  • функциональные и бизнес-требования к проекту
  • описание архитектуры проекта
  • описание структуры сайта для всех ролей пользователя
  • предлагаемый план разделения проектов на этапы
дизайн

Бренд и стиль школы разработала студия Method Zero by PINKMAN. С оглядкой на айдентику мы разработали дизайн-систему в Фигме и для проектирования интерфейсов личного кабинета использовали ее компоненты. Programica — это сложная и многофункциональная платформа, поэтому основной задачей было спроектировать комфортный опыт для учеников, кураторов и преподавателей.

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

После регистрации пользователь получает любой один бесплатный урок с выполнением домашнего задания и прохождением тренировок. По окончанию пробного периода ему предлагается приобрести пакет уроков. Оплата реализована через эквайринг Юkassa.

Мы реализовали нетривиальную систему курсов:

  • в рамках одного предмета может быть несколько курсов
  • у каждого курса может быть неограниченное количество потоков, в том числе проходящих параллельно
  • для каждого потока курса можно вносить персональные изменения
Страница курса
Страница курса
класс

После оплаты ученику становится доступен раздел «Класс»: на главной странице раздела выводится статистика по выполненным ДЗ, пройденным урокам и тренировкам, расписание, ссылка на ближайший урок, доступны записи прошедших уроков и другое.

Класс ученика
Класс ученика
онлайн-уроки
  • неограниченное число пользователей
  • доступны запись, конспект, презентация урока
  • чат с преподавателем и учениками
Онлайн-урок
Онлайн-урок
Вместе с заказчиком и отделом аналитики мы спроектировали проект с нуля, ориентируясь на наш опыт и тенденции онлайн-рынка образования. Programica отлично продумана с точки зрения администрирования, имеет удобный и простой в использовании интерфейс. Как итог мы создали онлайн-платформу для подготовки к ЕГЭ с возможностью добавления неограниченного количества курсов по разным предметам и полностью закрыли поставленные цели в рамках бюджета заказчика. Евгений Околита, руководитель проекта
Евгений Околита руководитель проекта
расписание

Один из самых интересных разделов:

  • расписание выводится на 7 дней и на каждый месяц года
  • при нажатии на карточку доступны дополнительные действия
  • можно фильтровать по сущностям: уроки или вебинары
  • ближайшее событие акцентируется желтой палитрой
Расписание
Расписание
Домашние задания
  • если необходимо, ограничиваем время выполнения
  • можно сохранить ДЗ в статусе черновика, данные пользователя превыше всего
  • в рамках ДЗ выводим запись урока, ссылку на конспект, презентацию и статистику решения заданий — у ученика всегда всё под рукой
  • после проверки задания ученик получает уведомление в чат
  • там где можно — результаты проверяются автоматически
Виды заданий
Виды заданий
Виды карточек с заданиями
Виды карточек с заданиями
Тренировки

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

  • тренировки проверяются автоматически платформой без привлечения ресурсов кураторов
  • ученик может готовиться к ЕГЭ в целом или тренировать конкретные темы
  • а также сравнивать пройденные тренировки с предыдущим месяцем
Центр тренировок
Центр тренировок
куратор

Основная задача куратора — проверять домашние задания, проводить консультации и помогать ученикам через чат платформы.

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

Основная задача учителя — проводить онлайн-уроки и вебинары.

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

Функционал видеотрансляций реализовали с помощью open-source решения Jitsi Meet:

  • все уроки автоматически записываются на стороне сервера c помощью Jibri
  • во время трансляции всем участникам доступен общий чат с разными правами
  • учитель и куратор могут «мьютить» участинков за некорректные сообщения
  • параллельно можно запускать несколько онлайн-уроков — без ограничений
Покупка уроков
Покупка уроков
Чтобы не допускать регрессий при доработках, исправлениях и в ходе приемки последующих задач, мы использовали 4 уровня тестирования: самостоятельный (с помощью code quality tools), автоматизированный (в рамках девопс-конвейера), коллегиальный код-ревью и проверка от команды тестировщиков в изолированном окружении. Для роста bus factor над каждой подсистемой работали не менее 2 человек — автор и ассистент, который в ходе работы получал все знания от автора. Александр Селюченко, руководитель команды проекта
Александр Селюченко руководитель команды проекта
Чат и центр уведомлений

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

  • чат разбит по вкладкам: уведомления, техподдержка, выбор куратора
  • кроме сообщений, можно обмениваться файлами и изображениями
  • если нужно найти что-то важное — есть поиск по переписке
  • начало урока сопровождается уведомлением
Чат
Чат
Очень долго выбирали с кем работать. Поступали разные предложения. Ключевым фактором в выборе MACHAON как подрядчика стал широкий портфель EdTech проектов, начиная с проектов для Британки, заканчивая зарубежными кейсами. Могу похвалить за гибкость мышления и умение генерировать рабочие решения для срочных спецпроектов и рекомендую компанию как надежного исполнителя. Тимур Мамедов, основатель онлайн-школы Programica
Тимур Мамедов основатель онлайн-школы Programica
  • 3000 часов
    разработки
  • 11 человек
    работали над проектом
  • 380 макетов
    спроектировали в Фигме
что в итоге

После завершения бета-тестирования, в начале нового учебного 2022 года мы осуществили полномасштабный запуск онлайн-школы.

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

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

результат programica.ru
стек технологий
Figma
Vue.js/Vuex
PHP 8.0
Laravel
PostgreSQL
Redis
Git
GitLab
SOAP
Yandex.Cloud
Nest.js
Typescript
MongoDB
Docker
Ansible
Laravel Backpack
интересные вещи

Много интересного было в этом проекте, вот один занятный факт:

  • семейство шрифтов haurora — это модификация manrope. Он хорош в крупных кеглях, а вот в интерфейсе читаемость некритично, но падает. Не смотря на это, он проник во весь проект — так и остался. В следующих релизах заменим на inter!
менеджер проекта
  • Евгений Околита
дизайнеры
  • Денис Соколов
  • Алексей Черепанов
  • Ульяна Ардзимба
фронтенд
  • Ольга Злобина
  • Артём Юрьев
бэкенд
  • Александр Селюченко
  • Роман Ердяков
  • Роман Криницын
  • Максим Тыртов
Тест качества
  • Константин Слобожанинов

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

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

Еще

Смотреть все 90+
Мы используем кукисы