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

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

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

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

Функциональность есть, но как теперь связать все воедино? На этом этапе мы построили диаграмму, которая описывает варианты использования сервиса. А также сформировали требования с помощью User Story, где описали намерения пользователя и что для него должен делать сервис.

Исходя из результатов конкурентного анализа и составленной диаграммы вариантов использования (Use Case Diagram), мы оставили общее для экосистемы клиента верхнее меню. Чтобы пользователь имел возможность переходить в интерфейсы других сервисов. Внутренние ссылки открываются в текущем окне браузера, а внешние — в новом.

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

На основе результатов аналитики мы принялись за разработку публичного интерфейса. Заказчик хотел, чтобы использовался React. Это универсальная и гибкая библиотека.

Реализовали возможность просмотра четырех списков курсов:

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

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

Для марафонов и интенсивов предусмотрены отдельные лендинги.

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

Рейтинг курса доступен исключительно для внутреннего пользования — его видят только администраторы.

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

Опираясь на рейтинг, администратор может скорректировать программу.

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

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