Разработчик должен думать о потенциальном развитии продукта и закладывать инструменты “на вырост”, но по факту так работать получается далеко не всегда. Нам в Purrweb удалось сделать такой продукт, который можно будет легко развивать и масштабировать за счет правильно выбранного стека. Рассказываем, как мы это сделали.
Время чтения: 9 минут
Ищете слаженную команду разработки?
Поможем с дизайном и разработкой приложений для бизнеса и стартапов
Благодаря онлайн-обучению доступность образования возросла. Теперь, чтобы получить знания, не придётся переезжать в другой город, тратить время на дорогу до университета и подстраиваться под расписание курсов. Всё что нужно, это устройство с выходом в интернет, и ты получишь доступ к знаниям из любой точки мира.
Есть три вида систем удаленного обучения:
Для онлайн-школ. Это платформы, которые предлагают курсы для дополнительного образования, например, подготовка к экзаменам или изучение интересующей дисциплины. Для закрепления знаний на платформах используются интерактивные уроки и материалы, а успеваемость можно легко отследить в личном кабинете.
Для учебных заведений. Такие системы используются как дополнение для традиционных образовательных учреждений. Учащиеся могут просматривать расписание занятий, выполнять онлайн-задания на оценку и общаться с преподавателями.
Для компаний. Эти платформы предназначены для корпоративного обучения сотрудников, чтобы развивать профессиональные навыки и повышать эффективность работы. Управляющие могут отслеживать успеваемость сотрудников и составлять персонализированные планы развития.
Чем больше компания, тем важнее роль онбординга — системы адаптации и обучения новичков. У нашего заказчика — директора сети салонов сотовой связи и интернет-магазина iZюм Алексея Платонова — он работал не идеально. Это был простой сервис для онлайн-курсов с примитивными дизайном и функциональностью.
Алексей обратился к нам летом 2020 года с просьбой разработать платформу для онлайн-курсов, например, по работе в Excel, созданию презентаций, личной эффективности, ментальному здоровью и т.д. На платформе должно было быть несколько ролей:
Выбрали нас, потому что заказчик — в хорошем смысле дизайнерский гик, а мы специализируемся на UI/UX дизайне. Геопозиция тоже сыграла за нас. Головной офис iZюма в Омске, и заказчику было важно работать с “соседями” — мы, как омская компания, идеально подходили.
Независимо от типа системы электронного обучения, можно выделить 6 фич, которые она должна включать.
После регистрации каждому пользователю дается краткая инструкция о том, как пользоваться платформой. Онбординг делают в виде интерактивных подсказок или видео. С этой функцией пользователи быстрее адаптируются и приступят к обучению.
Среди базовых функций профиля — редактирование личной информации, обновление фотографии профиля и выбор предпочтений. Также стоит добавить раздел с курсами, чтобы пользователи имели необходимую информацию в быстром доступе. Например, включите туда длительность курса, количество уроков и статус выполнения заданий.
Поиск с фильтрами поможет пользователям быстро находить нужные курсы и учебные материалы. Например, сделайте поиск по темам, уровням сложности, рейтингу и длительности программ. Также добавьте алгоритмы рекомендаций на основе предпочтений и истории обучения.
Оценка проверяет знания студентов и дает обратную связь. Это важная часть образовательного процесса, которая помогает определить уровень усвоения материала.
Чтобы не отправлять домашнее задание по почте, разработайте функцию загрузки файлов. Преподавателям не придется тратить время на поиск писем, и они смогут оставлять обратную связь на платформе. А с помощью конструктора тестов наставники автоматизируют процесс оценки знаний.
Раздел с успеваемостью нужен для того, чтобы учащиеся наглядно видели прогресс — оценки, процент выполнения курса и количество проведенных учебных часов. Преподаватели, в свою очередь, могут просматривать успеваемость как групп, так и отдельных студентов.
Онлайн-обучение лишено физического взаимодействия, из-за чего студенты могут чувствовать себя изолированно и потерять мотивацию. Если перейти на сторонние мессенджеры или электронную почту, то переписки и материалы потеряются или даже будут удалены со временем.
Во время разработки онлайн платформы для обучения убедитесь, чтобы общение происходило в одном месте. С помощью встроенного чата ученики смогут обмениваться информацией с сокурсниками и задать вопросы наставникам, не выходя из платформы.
Первое время с системой будут работать только сотрудники, а позже проект может выйти в “мир” — заказчик планирует создать платформу для онлайн школы и продавать систему другим компаниям. Поэтому мы сразу смотрели на конкурентов: Coursera, Skillbox и Skillshare. Что общего было у нас с этими платформами для онлайн-обучения? Во всех есть:
В качестве отстройки сконцентрировались на UGC (пользовательский контент) — сотрудники сами могут создавать курсы для адаптации и развития новых сотрудников. Но это курсы не только о работе: можно делиться своим опытом по, например, рефинансированию ипотеки или инвестициям.
Страница курса с уроками
Также на площадке любой может стать ассистентом и проверять домашки. Чтобы создать такой курс, сотруднику нужно обозначить: что за курс, чему можно научиться и в какой сфере. Курс может быть публичным или частным, с общением на форуме и без него.
Здесь можно создать свой курс — добавить описание, материалы, указать стоимость
Мы начали с MVP, поэтому в скоуп вошли дизайн и разработка альфа-версии для внутреннего пользования.
С базовой функциональностью платформа для онлайн-школы станет удобным инструментом обучения. Однако по мере развития проекта продумайте новые функции, которые сделают процесс получения знаний увлекательнее.
Видеоконференции. Функция видеозвонков позволит учителям использовать новые методы демонстрации информации — презентации и онлайн-доски — что поможет детально рассказать о теме. Также ученики смогут задавать уточняющие вопросы во время занятия.
Варианты оплаты. Если на платформе для онлайн-обучения планируется монетизация через покупку курсов или подписки, предложите пользователям разные варианты оплаты — по карте, СБП, онлайн-кошельки и счет телефона. Чтобы сделать обучение доступнее, для дорогих курсов сделайте возможным оформление рассрочки.
Геймификация. Элементы геймификации повышают вовлеченность и мотивацию студентов. Они могут быть в виде баллов с лидербордом, достижений или наград. А чтобы накопить очки, студенты будут выполнять домашние задания, отвечать на видеоуроках и участвовать в викторинах.
Мобильное приложение. Приложение, адаптированное под смартфоны и планшеты, сделает платформу доступной для широкой аудитории. Также обучение станет гибким — студенты, которые часто перемещаются, смогут участвовать в учебном процессе на ходу.
Ниже мы покажем, какие инструменты и фреймворки стоит использовать во время разработки платформы для дистанционного обучения.
Продакт-менеджер рассказал, что заказчик планирует развивать и расширять площадку, чтобы предлагать другим компаниям размещать на ней свои курсы.
Надо было правильно подобрать тех-стек. Мы могли бы использовать старый добрый React. В интернетах говорят, что поисковые боты (Google, Yandex и т.д.) умеют индексировать приложения на React, но на одном из прошлых проектов мы сильно облажались поняли, что это не так.
Взяли Next.js для фронта. Мы обычно не используем его в корпоративных проектах (внутренних, закрытых от всех желающих). Но мы знали, что вскоре проект станет публичным, поэтому Next.js был хорошим выбором.
А для бэкэнда использовали Nest.js. В итоге, команду собрали из двух дизайнеров, четырех разработчиков, тестировщика и проектного менеджера.
В качестве референсов для дизайна заказчик ориентировался на Airbnb. Основной акцентный цвет — оранжевый с неоновыми подсветками на активных элементах, кнопках, чтобы перекликаться с Airbnb, но не дублировать.
Обычно мы работаем спринтами. Логично было за один спринт делать одну роль. Но из-за того, что они тесно связаны и включают одна другую, пришлось разбить спринты по-другому. В итоге работали от общего к частному:
Как это обычно бывает, на каждом созвоне заказчик генерировал новые идеи, которые выходили далеко за пределы MVP. Мы фиксировали все пожелания, но настаивали на работе в рамках изначального плана.
Например, в MVP не вошла возможность для админа просматривать календари пользователей, потому что это выходило за пределы дедлайна.
Наставники добавляют события в календари учеников
А вот система ачивок, которые мотивируют учиться и проверять домашки, в MVP не вошла, потому что их логика была непростой, на ее проработку у заказчика времени не было. Задачу временно убрали в бэклог, но в дизайне ачивки есть, поэтому в дальнейшем эту фичу можно реализовать без проблем.
Платформа должна быть готова к увеличению количества пользователей, особенно во время пиковых нагрузок. Выбор неправильных технологий приведёт к просадке производительности, что будет мешать комфортному использованию. Тогда придется перерабатывать платформу, а это лишние финансовые затраты и потраченное время.
Также важно обеспечить безопасность платформы для онлайн-школы, поскольку там хранится личная и финансовая информация пользователей. Если уделить мало внимания безопасности, это приведет к утечкам и юридическим проблемам, которые нанесут урон репутации.
Мы ожидали проблему с разработкой системы ролей, и-таки столкнулись с ней. Если бы роли не взаимодействовали друг с другом и “жили” в отдельных аккаунтах, было бы проще. Но аккаунт у каждого человека один, и он может переключаться между профилями. При этом у наставника, ученика, супервайзера разные возможности и уровни доступа.
Роли выстраивались в иерархию: у админа права всех ролей, у наставника — права ученика и так далее. Получается, роли складывались как матрешка: каждая следующая включала полномочия предыдущей.
Между ролями можно переключаться прямо в настройках профиля: нужно просто нажать кнопку и выбрать роль из списка
Трудности с дизайном подтолкнули нас к реорганизации своей дизайн-системы.
На предыдущих проектах дизайнеры работали над проектом сами по себе, и скорость не могла быть выше 40 рабочих часов одного дизайнера в неделю. Мы начинали работу с концепта и макет для разработки — готовили лишь верхнеуровнево, потому что так было эффективно и удобно. До момента, пока мы не решили попробовать новое и посмотреть, какой эффект могут давать иначе построенные процессы.
Сейчас на проектах работает команда дизайнеров, они делятся экспертизой и наработками друг с другом. Проекты двигаются быстрее, людей-то больше:) Теперь мы стартуем с майндмапа и концепта, готовим макет для разработки, сокращаем количество “дизайн-дыр” и уделяем еще больше внимания презентации визуала.
Кадровые неурядицы преследовали нас с самого начала проекта. Дизайнер, который начал работать над проектом, ушел в отпуск и не до конца проговорил требования к проекту. Так новый дизайнер выполнил концепт в зеленых тонах.
Но, как вы помните, в качестве референсов заказчик указывал Airbnb, в котором сложно найти зеленые оттенки. Мы передали проект другому дизайнеру, она вернула концепт в гамму Airbnb. Уже в нем мы силами еще нескольких дизайнеров доделывали UI-киты и респонсивы, поправляли мелкие баги.
Команда разработки вместе с менеджером в разгар работы свалилась с ковидом. В итоге мы отставали от спринтов на две недели. Чтобы нагнать их, когда все вернулись в строй, в команду добавили еще двух разработчиков.
Так как создать свою платформу для обучения? Сейчас расскажем.
На этом этапе важно понять, какие приложения популярны в нише образования сейчас. Изучите их функции и недостатки. Исследуйте целевую аудиторию и определите боли, которые ваше приложение будет решать.
На этапе планирования собираются требования проекта и определяется объем работ.
Определите цели, бюджет, а также риски, которые могут повлиять на разработку. Это поможет заранее продумать стратегии по снижению рисков на стадии разработки — когда цена ошибки высока.
Детальное планирование облегчит дальнейшую работу и позволит команде сосредоточиться на выполнении поставленных задач.
Дизайн платформы для онлайн-обучения начинается со сбора референсов и мудбордов для создания визуального стиля. Соберите примеры удачных и неудачных дизайнов, чтобы обсудить их с командой дизайнеров.
Элементы, которые помогут составить дизайн-концепт проекта
После согласования концептов дизайнеры создают майндмэпы, вайрфреймы и кликабельные прототипы. Они позволяют визуализировать интерфейс.
Команда разработчиков приступает к реализации функций, используя соответствующие языки программирования и инструменты.
Если вы планируете выпускать еще и мобильное приложение, разработчики выберут React Native. С помощью этого фреймворка создают кросс-платформенные приложения. Также получится сократить время на разработку и сэкономить до 30% бюджета.
Готовая платформа для онлайн-школы проходит тщательное тестирование, чтобы как можно меньше ошибок попали в релиз. Этот этап включает разные виды проверок, например, интеграционное, системное и приемочное тестирование.
После завершения разработки и тестирования наступает время запуска платформы.
Разработчики публикуют десктопное приложение в сторы или оставляют на сайте ссылку для скачивания, а мобильные приложения — в App Store и Google Play. Если приложение разрабатывалось для внутреннего использования, происходит внедрение в корпоративные системы бизнеса.
Несмотря на ковид, мы сработали быстро. Уже в январе, через шесть месяцев после старта, мы выкатили первую версию платформы для внутреннего пользования. Сотрудники уже могут создавать и проходить курсы, делать домашние задания и обсуждать задачи на форуме.
При этом мы не просто отдали MVP, а подготовили проект, который можно легко масштабировать без рефакторинга.
Мы доделали небольшие баги, которые всегда появляются после релиза и обсудили следующую итерацию работ. Заказчик протестировал сервис внутри команды и собирал фидбек.
После релиза планы были такие:
Насколько публикация полезна?
Оцени эту статью!
17 оценок, среднее 4.7 out of 5.
Оценок пока нет. Поставьте оценку первым.
Так как вы нашли эту публикацию полезной...
Подписывайтесь на нас в соцсетях!
Читать
Ваша заявка уже у нас :) Обычно ответ занимает от 12 до 24 рабочих часов.
Извините, что-то пошло не так при отправке запроса.
Попробуйте позже.