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

Зачем нужна платформа для онлайн-обучения

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

Виды платформ дистанционного обучения

Есть три вида систем удаленного обучения:

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

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

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

Почему заказчик обратился к нам

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

Алексей обратился к нам летом 2020 года с просьбой разработать платформу для онлайн-курсов, например, по работе в Excel, созданию презентаций, личной эффективности, ментальному здоровью и т.д. На платформе должно было быть несколько ролей:

Выбрали нас, потому что заказчик — в хорошем смысле дизайнерский гик, а мы специализируемся на UI/UX дизайне. Геопозиция тоже сыграла за нас. Головной офис iZюма в Омске, и заказчику было важно работать с “соседями” — мы, как омская компания, идеально подходили. 

Ключевые функции платформы для дистанционного обучения

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

Онбординг

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

Личный кабинет

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

Поиск курсов

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

Оценка и тестирование

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

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

Отслеживание успеваемости

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

Коммуникации

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

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

Какие функции мы запланировали в MVP

Первое время с системой будут работать только сотрудники, а позже проект может выйти в “мир” — заказчик планирует создать платформу для онлайн школы и продавать систему другим компаниям. Поэтому мы сразу смотрели на конкурентов: Coursera, Skillbox и Skillshare. Что общего было у нас с этими платформами для онлайн-обучения? Во всех есть:

• • аудио; 
  • видео;
  • тексты; 
  • проверка ДЗ
  • форум, где обсуждают задания.

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

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

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

Дополнительные функции

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

Видеоконференции. Функция видеозвонков позволит учителям использовать новые методы демонстрации информации — презентации и онлайн-доски — что поможет детально рассказать о теме. Также ученики смогут задавать уточняющие вопросы во время занятия.

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

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

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

Технологический стек для разработки 

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

Компонент	Технологии и инструменты	Описание
Фронтенд	React.js	Используется для создания интерактивного интерфейса пользователя. Подходит для Single Page Applications.
	Next.js	Фреймворк на основе React для серверного рендеринга и SEO-оптимизации.
	Vue.js	Альтернативный фреймворк с простой архитектурой.
Бэкенд	Node.js + Express	Подходит для высоконагруженных приложений, обеспечивает быстрый отклик сервера.
	Django	Фреймворк с готовыми инструментами для быстрой разработки веб-приложений.
	Ruby on Rails	Подходит для быстрого прототипирования и масштабируемых решений.
База данных	PostgreSQL	База данных с поддержкой сложных запросов.
	MongoDB	Документоориентированная база данных, для гибкой работы с ними.
	Firebase	Облачное решение от Google с возможностью масштабирования.
Платежная система	Stripe	Гибкий инструмент для приема платежей по всему миру.
	ЮKassa	Популярная система от Яндекса. Поддерживает банковские карты, СБП, Apple Pay, Google Pay, онлайн-кошельки и платежи по QR-коду.
Дополнительные технологии	WebRTC	Используется для организации видеозвонков и вебинаров.
	Moodle	Открытая Learning Management System для управления курсами.

Организация рабочих процессов в iZюматоре

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

Надо было правильно подобрать тех-стек. Мы могли бы использовать старый добрый React. В интернетах говорят, что поисковые боты (Google, Yandex и т.д.) умеют индексировать приложения на React, но на одном из прошлых проектов мы сильно облажались поняли, что это не так.

Взяли Next.js для фронта. Мы обычно не используем его в корпоративных проектах (внутренних, закрытых от всех желающих). Но мы знали, что вскоре проект станет публичным, поэтому Next.js был хорошим выбором.

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

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

Обычно мы работаем спринтами. Логично было за один спринт делать одну роль. Но из-за того, что они тесно связаны и включают одна другую, пришлось разбить спринты по-другому. В итоге работали от общего к частному:

1. Авторизация.
2. Уроки.
3. Страницы для ученика: курсы, уроки, календари, личный профиль.
4. Страницы для наставника: создание уроков, курсов, календарь.
5. Страницы для админа: профиль, курсы, форум, календарь.
6. Роль ассистента.
7. Роль супервайзера.

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

Например, в MVP не вошла возможность для админа просматривать календари пользователей, потому что это выходило за пределы дедлайна.

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

Сложности разработки платформ для дистанционного обучения

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

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

Трудности с разработкой ролей

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

Роли выстраивались в иерархию: у админа права всех ролей, у наставника — права ученика и так далее. Получается, роли складывались как матрешка: каждая следующая включала полномочия предыдущей.

Проблемы на стадии дизайна

Трудности с дизайном подтолкнули нас к реорганизации своей дизайн-системы. 

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

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

Как организовать рабочие процессы

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

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

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

Этапы разработки платформы для обучения 

Так как создать свою платформу для обучения? Сейчас расскажем.

Анализ и исследование рынка

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

Планирование проекта

На этапе планирования собираются требования проекта и определяется объем работ. 

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

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

UI/UX-дизайн

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

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

Разработка

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

Если вы планируете выпускать еще и мобильное приложение, разработчики выберут React Native. С помощью этого фреймворка создают кросс-платформенные приложения. Также получится сократить время на разработку и сэкономить до 30% бюджета.

Тестирование

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

Релиз

После завершения разработки и тестирования наступает время запуска платформы. 

Разработчики публикуют десктопное приложение в сторы или оставляют на сайте ссылку для скачивания, а мобильные приложения — в App Store и Google Play. Если приложение разрабатывалось для внутреннего использования, происходит внедрение в корпоративные системы бизнеса.

Итоги

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

При этом мы не просто отдали MVP, а подготовили проект, который можно легко масштабировать без рефакторинга. 

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

После релиза планы были такие:

1. Обучить сотрудников внутри компании.
2. Предоставить платформу другим компания для их курсов.
3. Создать P2P-платформу (открытая платформа с платными курсами).

[wpim]