Я спроектировал сайт-каталог для EdTech-школы саморазвития «AmeliSoul». До этого весь трафик из соцсетей вел в короткий таплинк. На первых запусках это хватало, но с ростом ассортимента стало сложнее объяснять продукты и вести пользователя к выбору курса
Сайт собирали на Bitrix, учебная часть оставалась в GetCourse. Поэтому на этом этапе фокус был на выборе и продаже курсов. Сайт должен был собрать каталог, страницы программ и точки входа в заявку, а обучение оставалось в отдельной LMS.
Роль: Я отвечал за структуру, UX и дизайн-направление продукта, а решения согласовывали совместно с экспертом по масштабированию, маркетологом и продактом
Задача бизнеса
- Собрать единый сайт-каталог вместо таплинка, чтобы пользователь мог разобраться в продуктах школы, выбрать подходящую программу и перейти к заявке без возвращения в соцсети за контекстом
- Сделать каталог управляемым для команды: новые курсы, потоки и события должны были добавляться без пересборки сайта и постоянного участия дизайнера
Моя задача
- Спроектировать структуру сайта так, чтобы пользователь быстро понимал, какие программы есть в школе, чем они отличаются и какой следующий шаг ему подходит
- Собрать навигацию по темам и форматам, страницы курсов сделать шаблонными, чтобы команда могла развивать каталог дальше без пересборки каждого нового запуска с нуля
Критерий успеха для MVP: сайт должен был заменить короткую ссылку из соцсетей полноценной структурой для продвижения по SEO, где пользователь быстро находит нужную программу, понимает ценность курса и доходит до заявки, а команда может регулярно добавлять новые продукты.
Сегменты аудитории
Сегменты аудитории я выделил на основе маркетинговых исследований команды школы и того, как пользователи приходили из соцсетей. Основное различие было в уровне знакомства с продуктом: часть аудитории уже знала школу и искала конкретный курс, а часть приходила с общим запросом и нуждалась во входе через темы и форматы
| Сегменты | Как приходит на сайт | Что уже знает | Главная задача | Что важно увидеть |
|---|---|---|---|---|
| Знакомая аудитория (подписчики/ученики) Тёплая | Переходит из соцсетей по ссылке | Название курса/линейки и базовое понимание через прогрев | Быстро найти нужный курс, закрыть вопросы и записаться | Поиск, быстрые ссылки на курсы, понятная структура курса |
| Новая аудитория (пришла по теме/запросу) Холодная | Поисковик / переход из поста на тему | Не знает названий, ищет решение «по смыслу» | Сразу увидеть подходящие направления и выбрать курс | Разделение по темам/сферам, короткие описания, фильтры |
| Сомневающиеся (выбирают, но не готовы принять решение) | Из соцсетей /поиска, возвращается несколько раз | Присматривается, сравнивает форматы | Быстро понять формат участия и безопасно «попробовать» через бесплатные продукты | Бесплатные программы/материалы, структура страницы курса (что внутри), длительность/старт, понятные условия участия |
| Активная аудитория (возвращается за анонсами) | Из соцсетей/рассылок на календарь/анонс | Знает про эфиры/встречи и новые потоки | Быстро найти ближайшее событие/старт и записаться | Анонсы новых курсов/потоков, календарь с фильтрами, карточки событий/стартов, понятная регистрация |
Job Stories
На основе маркетинговых исследований команды школы я добавил в Job Stories стопперы принятия решения: сомнения, нехватку времени, финансовые ограничения, недоверие и непонимание ценности курса. Это помогло проектировать сайт вокруг реальных причин, по которым пользователь откладывает заявку.
| Когда (обстоятельство) | Я хочу (мотивация) | Чтобы (результат) | Боль/Стоппер (принятие решения) | Гипотеза решения |
|---|---|---|---|---|
| Я пришла с запросом по теме (отношения/деньги/здоровье и т.д.) | быстро увидеть подходящие варианты | не тратить время на перебор каталога и названий | Пока изучаю информацию | Каталог по сферам жизни, короткие карточки с сутью и фильтры по формату, стоимости и ближайшему старту |
| Я пришла по прогреву и уже рассматриваю конкретный курс | быстро подтвердить, что это «то самое» | принять решение без вопросов «Что меня ждет?» | Пока изучаю информацию / Пока выбираю | Страница курса с понятной структурой: кому подходит, программа, формат, старт, условия участия, CTA и частые вопросы для закрытия возражений |
| Я хочу, но сомневаюсь, стоит ли сейчас | получить «лёгкий вход» | попробовать без обязательств | Недавно с вами / Пока не готова / Пока изучаю | На страницах каталога и курсов: блок бесплатных курсов + ближайшие открытые события/эфиры как следующий шаг |
| Я не уверена, что хватит времени | понять нагрузку и темп | оценить, смогу ли встроить обучение в график | Нет времени / Пока прохожу другой материал | На странице курса: длительность, расписание, формат участия и этапы «как проходит обучение» |
| Мне важно понять ценность до оплаты | увидеть конкретный результат участия | понять, как именно изменится моя жизнь/какой навык получу | Пока изучаю информацию / Пока другие приоритеты | На странице курса: блок «что получите», отзывы, кейсы, результаты, обратная связь с менеджером |
| У меня нет финансовой возможности сейчас | увидеть доступные варианты участия | не отказываться полностью | Нет финансовой возможности / Коплю на курс | Опции мягкого входа: рассрочка, альтернативные форматы, бесплатные продукты и заявка на следующий поток |
| Я только знакомлюсь с проектом и решаю, доверяю ли | быстро понять «что это за школа» и «что я получу» | не уходить на соцсети за базовой информацией | Ещё знакомлюсь с курсами/школой | Раздел «О проекте»: страница Об авторе, Преподаватели, навигация на раздел-локомотив «Метод» |
| Я слежу за обновлениями и не хочу пропустить старт | быстро увидеть ближайшие активности | записаться/оставить контакт | В планах / В процессе | Календарь с фильтрами, блок «ближайшие потоки», подписка на рассылку для сбора заявок для email маркетинга |
User Flow + Карта сайта
После исследования собрал user flow и структуру сайта, чтобы зафиксировать сценарии, объём продукта и состав ключевых страниц. На этом этапе стало понятно, какие разделы нужны в MVP, как связать каталог, страницы курсов и события, и где пользователь должен переходить к заявке.
User Flow и карта сайта в Figma
Решения – ключевые разделы
Главная
Главная работает как развилка воронки: тёплая аудитория быстро идёт к нужному курсу, а холодная — выбирает по теме и знакомится со школой. Первый экран сразу ведёт в каталог и основные направления, следующие блоки поэтапно подводят к решению: курсы, проект, кейсы и ближайшие события.
Главная задавала понятный маршрут по сайту: пользователь быстрее понимал, где выбрать курс, где узнать больше о школе и куда перейти, если он пока не готов к покупке.
Навигация
Навигацию собрал под два сценария из JS: «Пришла за конкретным продуктом» и «Пришла с запросом по теме». В меню и в блоке быстрых тегов темы вынесены в отдельный слой, чтобы холодная аудитория выбирала по смыслу, а тёплая – находила линейку по названию
Так сайт забирал на себя часть контекста, который раньше приходилось искать в соцсетях. Правый баннер использовал как промо-зону для флагманского продукта или ближайшего набора.
Каталог курсов
Каталог — основной раздел выбора курсов. Я сделал карточки так, чтобы пользователь мог быстро понять суть программы, формат и ближайший старт ещё до перехода на страницу курса. Это помогало быстрее сузить выбор и не открывать каждую программу подряд.
Приоритетные программы выделил размером и контрастом, чтобы команда могла продвигать ключевые запуски прямо внутри каталога, не ломая общую структуру страницы.
Страница курса
Страница курса – основной конверсионный инструмент. Я собрал страницу как последовательный сценарий в виде лендинга, которая отвечает на ключевые вопросы пользователя: кому подходит, что внутри, как проходит обучение, когда старт, FAQ и подводит к финальной записи
Для страниц курсов я собрал библиотеку из ~30 шаблонных блоков. Команда могла собирать новые лендинги по единой логике, быстрее запускать потоки и не пересобирать каждую страницу с нуля.
Календарь событий
Календарь стал мягким входом для пользователей, которые ещё присматриваются к школе.. Через события и открытые активности человек мог познакомиться с форматом, оставить контакт и вернуться к выбору курса позже.
Запись оставил прямо в карточке события, чтобы пользователь мог быстро зафиксировать участие без лишнего перехода. Такой сценарий помогал поддерживать контакт с аудиторией между запусками курсов.
Дизайн-система
Я собрал UI Guide и библиотеку шаблонных блоков под Bitrix, чтобы команда могла собирать новые страницы и разделы через админку без постоянного участия дизайнера. Это сохраняло единый стиль и упрощало масштабирование сайта.
Личный кабинет – следующий этап развития LMS
На этой итерации фокус был на запуске сайта-каталога и проверке базовой продуктовой логики: сможет ли новая структура вести пользователя от интереса к выбору курса и заявке.
Личный кабинет требовал отдельного этапа с интеграцией GetCourse, API и более глубокой проработкой обучения, поэтому я подготовил концепты как направление следующей итерации продукта.
Dashboard
Dashboard я спроектировал как точку возврата в обучение после покупки. Пользователь видел текущий прогресс и мог быстрее продолжить курс без поиска нужного урока по разным разделам.. Такой сценарий помогал бы пользователю быстрее возвращаться в обучение, не терять текущий контекст и проще ориентироваться в своих курсах.
Программа курса
Собрал программу курса как экран навигации по обучению. Пользователь видел, где он находится сейчас, что уже пройдено и куда двигаться дальше. Это помогало удерживать ритм обучения, понимать, что уже пройдено и что изучать дальше
Экран урока
Экран урока я собрал вокруг самого занятия. Пользователь мог смотреть материал, возвращаться к важным моментам и выполнять задание в одном спокойном сценарии, не выпадая из процесса обучения.
Итоги
За 2 месяца я спроектировал сайт-каталог на Bitrix, который заменил таплинк и стал основой для нового канала продаж. Сайт помогал пользователю быстрее разобраться в продуктах школы, выбрать подходящую программу и перейти к заявке без возвращения в соцсети за дополнительным контекстом.
- Собран единый каталог вместо разрозненных ссылок Пользователю стало проще ориентироваться в продуктах школы и возвращаться к нужным программам
- Упростил выбор курса на уровне каталога Ключевые параметры видны уже в карточке, без лишних переходов в страницу курса
- Собрал страницу курса как повторяемую систему Библиотека из ~30 блоков помогала быстрее запускать новые лендинги и сохранять единую логику подачи
- Заложил направление для следующей итерации LMS Подготовил концептыличного кабинета, программы и экрана урока для развития учебного опыта вне GetCourse
Главный вывод: для проекта с трафиком из соцсетей сайт должен быстро давать пользователю тот контекст, который раньше был размазан по постам и прогревам. В AmeliSoul сайт стал местом, где человек мог спокойно разобраться в продуктах школы, сравнить курсы по смыслу и понять, какой формат ему ближе.