Made on Collabza

Разработка образовательной платформы

Онлайн-школы

Заказчик:

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

Задача:

Наша совместная работа направлена на создание дизайна и разработке кастомной образовательной платформы.
  • Сбор данных, информации и лучших трендов по смежным проектам на рынке;
  • Проработка сценариев поведения пользователя на платформе;
  • Отрисовка дизайн-проекта платформы и отдельных страниц сайта;
  • Разработка клиентской и серверной части платформы: настройка базы данных, верстка личного кабинета, работа с адаптацией, интеграция сервисов для обмена данными и тестирование функционала;
Изначально заказчик пришел с задачей — сделать образовательную платформу для его онлайн-школы, однако позже идея расширилась до того, чтобы сделать маркетплейс курсов. Эксперты могут приходить со своим продуктом и за % размещаться на его платформе, а также могут проводить обучение и проверять домашние задания студентов. Также есть эксклюзивный контент, который заказчик хочет показывать по подписке. Поэтому на платформе будет разделение на платные курсы и те, что доступны по подписке
У заказчика есть идея — реализовать масштабный образовательный марктелпейс курсов, но он не хочет вкладывать огромные деньги на разработку, поэтому захотел сделать no-code прототип своей идеи, чтобы проверить жизнеспособность продукта. Его идея на коде стоила бы более 5 миллионов рублей, однако на no-code разработку уйдет 200-400 тысяч, что намного выгоднее
Мы предложили заказчику разделить работу на 2 логических этапа, где реализуем сначала самый главный функционал, а после дополнительный.

Результат:

Мы разработали дизайн и фирменный стиль образовательной платформы по вкусу закачика и представили наше видение. Дизайн нашей платформы полностью кастомный, поэтому было написано 2000+ строк кода html,css и js кода.
В личном кабинете пользователей был внедрен следующий функционал:

Маркетплейс:

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

Мои курсы:

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

Домашка:

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

Профиль:

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

Что сделали:

Мы разработали план производства работ на 1,5 месяца, поделили их на этапы. Мы начали двигаться по 1 этапу нашего плана и сейчас разрабатываем этот функционал Вот как мы построили нашу работу:
  1. Поиск и исследование референсов, идей
  2. Анализ референсов конкурентов: лучшие идеи и тренды
  3. Файл Figma с подборкой референсов сильных дизайн-концепций конкурентов
  4. Исследование опыта Целевой Аудиотрии
  5. Ниже мы подготовили список идей, который поможет улушчить пользовательский опыт уже сейчас и в будущем
  6. User Flow платформы
  7. Отрисовка эскиза прототипа
  8. Разработка UX/UI Дизайна интерфейсов
  9. Разработка образовательной платформы на Tilda
Была разработана структура базы данных AirTable, включающая в себя возможность взаимодействие куратора со студентов при сдаче домашних заданий через отдельный личный кабинет куратора
Мы предложили заказчику разделить работу на 2 логических этапа, где разработаем сначала самый главный функционал, а затем дополнительный. После окончания «Этапа 1» команда будет тестировать платформу на реальных студентах и в DEMO-режиме давать доступ экспертам к нашей LMS системе.

Этап 1. Образовательный модуль + Подписка

Так выглядит наш план сотрудничества по проекту 👇🏻

Этап 2. Дополнительные фичи

Мы поделили работу на 5 этапов и поставили дедлайн по каждому:

Разработка UX/UI дизайна:

  • Проанализировали сайты и платформы конкурентов, выписали лучшие тренды и идеи;
  • Нашли и сохранили в мудборд интерфейсы конкурентов, чтобы продумать свою дизайн-концепцию.
  • Собрали User Flow - визуальное представление пути пользователя по платформе;
  • Отрисовали эскизы прототипа в Figma;
  • Разработали интерактивный UX/UI Дизайн интерфейса в Figma;
  • Подготовили дизайн-проект для передачи в вёрстку;
  • Сверстали 28 страниц интерфейсов на Tilda с адаптацией (320-480px, 480-960px, 960-1200px, 1200-1920px);
  • Подключили 10+ модификаций и написали 6 000+ строк HTML, CSS, JS код для стилизации элементов и увеличения функциональности платформы;
  • Подключили систему аналитики (Яндекс Вебмастер) и настроили цели;
  • Описали и настроили структуру баз данных в AirTable, что позволило нам эффективно и структурированно хранить информацию по студентам, кураторам, курсам;
  • Разработали бизнес-логику и автоматизацию событий в Make при передаче данных из Tilda в нашу базу данных;

Подключение интеграций:

  • Настроили почтовый клиент через SMTP-сервис для отправки писем пользователям при триггерных событиях (регистрация, покупка курса / подписки, окончание доступа);
  • Подключили плавную передачу динамических данных из AirTable в личный кабинет пользователя с помощью 38 интеграций в сервисе Collabza;

Тестирование и передача проекта:

  • Провели тестирование всех форм приема данных более 300 раз;
  • Проверили корректность отображения динамического контента из базы данных;
  • Составили техническую документацию по работе платформы (инструкции + скринкасты).
Видео по кейсу можно посмотреть здесь https://kinescope.io/h2CHZoPUFmjNYjFwtpoyms

Контакты: