Как перенести образовательный продукт на GetCourse и улучшить пользовательский опыт

GetCourse провёл конкурс на лучший дизайн среди онлайн-школ, чтобы показать, какими стильными и удобными могут быть проекты на платформе. Участники присылали свои кабинеты с продуманной структурой, фирменным стилем и вниманием к пользовательскому опыту.

Первое место занял MB2 Master’s — сообщество эндодонтистов и образовательный продукт MB2 Academy. Проект выделился визуальной концепцией, аккуратной адаптацией интерфейса и понятной логикой обучения.

В этой статье веб-дизайнер Алиса Родкевич рассказывает, как команда переносила MB2 Master’s из Telegram-приложения на GetCourse, что удалось сохранить из старого интерфейса, какие решения пришлось упростить и почему хороший дизайн личного кабинета начинается с пути ученика.

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

С MB2 Master’s всё было сложнее.

MB2 Master’s, образовательный продукт MB2 Academy для стоматологов-эндодонтистов. Внутри: лекции экспертов, клинические разборы, практические протоколы, переведённые материалы и постоянные обновления. По сути, это продукт для непрерывного профессионального обучения, а не папка с записями.

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

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

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

Поэтому выбрали GetCourse: на нём можно было перенести обучение и собрать всё в одной системе, без россыпи сторонних сервисов.

Здесь началась моя часть работы.

Обычно ко мне приходят с готовым дизайном для вёрстки на GetCourse или с задачей собрать интерфейс с нуля под ключ. Здесь дизайн уже был. Но не всё так просто.

Главный дизайнер MB2 Master’s Дмитрий Орлов разработал фирменный стиль и интерфейс мобильного приложения. Он задал визуальную основу всего продукта.

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

Проблема была в том, что самого приложения я не видела.

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

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

Без этого нормально перенести дизайн нельзя.

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

Это был, пожалуй, самый необычный момент в работе. Обычно можно самой зайти в продукт и посмотреть, как всё устроено. Здесь приходилось восстанавливать логику по следам: по макетам, скринкасту и пояснениям участника.

Для любого переноса это важный урок. Начинать нужно не с вопроса «как перенести дизайн страницы?», а с вопроса «что человек здесь делает и зачем?». Иначе можно собрать красивый кабинет, в котором пользователь не понимает, куда идти.

Почти сразу стало понятно: переносить приложение один в один нет смысла.

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

Во-вторых, GetCourse устроен иначе. У платформы своя логика, структура и возможности.

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

Например, в приложении структура была довольно свободной. В GetCourse есть чёткая иерархия: тренинги, подтренинги и уроки. От неё никуда не уйдёшь. Да и не нужно. Мы адаптировали старую логику под эту структуру.

И здесь пришлось от кое-чего отказаться.

Мы не стали делать отдельный Mini App в другом сервисе. Так мы бы просто поменяли одну зависимость на другую, а задача была в другом: дать клиентам более стабильную среду для обучения.

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

От отдельного Telegram-бота тоже отказались. Если главная задача — вернуть пользователям доступ к обучению в новой среде, нет смысла сохранять дублирующий канал, который снова зависит от Telegram.

В итоге технический специалист собрала нужный функционал внутри GetCourse.

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

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

Хороший пример — списки уроков.

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

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

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

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

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

В итоге часть решений из старого приложения сохранили, а часть осознанно упростили.

Еще один важный момент — не пытаться любой ценой воспроизвести сложные решения.

На этапе обсуждения были идеи со сложными всплывающим и интерактивным расписанием. Но когда начинаешь смотреть не на картинку, а на реальный сценарий пользователя, возникает вопрос: а что это решение ему даёт?

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

Получилась простая система, которую легче поддерживать и развивать.

Ещё одна вещь, которая помогла в этом проекте, — возможность решить часть задач стандартными средствами платформы.

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

Можно было попытаться повторить этот элемент один в один. Но зачем?

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

Здесь отсутствие визуальной копии ничего не ухудшило. Система стала проще.

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

В итоге на GetCourse перенесли структуру обучения: тренинги, подтренинги, уроки, видео и нужные материалы. Настроили доступы и техническую логику.

С моей стороны была адаптация визуальной части под планшеты и десктопы. Ещё я выстроила логику подачи материалов внутри кабинета.

Технический специалист занималась настройками платформы и доступами.

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

Вот, как выглядит главная страница тренингов:

Новый список уроков:

Урок внутри:

Мобильная версия в приложении GetCourse:

Главный результат для меня был не в количестве перенесённых страниц. Важно другое: пользователь, который раньше учился в приложении, должен был открыть GetCourse и не почувствовать, что попал в совершенно новый продукт.

За время работы с онлайн-школами я заметила интересную вещь: ученики редко запоминают красивые карточки или какие-то необычные декоративные решения.

Зато они очень быстро замечают, если не могут найти нужный урок.

Или не понимают, где они сейчас находятся.

Или открывают курс и не знают, что делать дальше.

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

Куда он попадёт? Увидит ли сразу то, что ему нужно? Поймет ли, где продолжить обучение? Сколько действий ему понадобится, чтобы найти нужный урок?

Если на эти вопросы нет понятного ответа, красивый дизайн ситуацию не спасёт.

Мне кажется, здесь часто возникает одна ошибка.

Лендинг и личный кабинет решают разные задачи. На лендинге мы хотим привлечь внимание, показать продукт, расставить акценты. Человек ещё выбирает, покупать ему или нет.

А в личном кабинете он уже пришёл учиться.

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

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

Минимализм здесь важен не сам по себе. В образовательном продукте главные вещи — содержание и путь ученика.

Чем больше материалов внутри курса, тем понятнее должна быть структура.

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

• Как человек попадает в курс?

• Что он видит после входа?

• Какие материалы проходят последовательно, а какие можно изучать в любом порядке?

• Где ученик может потеряться?

• Что должно произойти после урока?

У каждого проекта свои ответы на эти вопросы. Поэтому нельзя просто взять решение из одной школы и перенести его в другую.

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

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

Не пытайтесь сначала повторить старую платформу.

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

Потом продумайте структуру нового проекта: тренинги, подтренинги, уроки, доступы и основные сценарии.

И только после этого переносите дизайн и контент.

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

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