Редизайн промо-страниц курсов, вебинаров и создание раздела витрины
роль Старшего дизайнер, лида направления
образовательный продукт внутри экосистемы Контура с девятью направлениями: бухгалтерия, кадры, охрана труда, маркетинг, закупки и другие.
Промо-сайт состоял из десятков разрозненных страниц без единой структуры и визуального языка, собранных вручную под каждый случай. Параллельно менялась логика и ориентир в b2b. Под это не было готового архитектурного решения.
Задача: Пересобрать архитектуру всех обучающих страниц, унифицировали структуру и перевели контент в CMS. Создать решение отображение промо-страниц под пакетную b2b-подписку.
Страница курса и экспресс-курса
Каждая страница курса была уникальной сборкой. Девять направлений, разные продюсеры, разные форматы. Два типа курсов: большие с группами и короткие экспресс-курсы с предзаписью.
Единой структуры не существовало, шаблонов не было. Такое сложно поддерживать.
Я проанализировал все существующие страницы, выявил повторяющиеся блоки и крайние случаи. Спроектировал единую адаптивную структуру, которая работает для любого курса любого направления.
Обложка
Название с адаптивным кеглем под количество знаков: пять диапазонов от 1–30 до 105+, протестированных на всех адаптивах.
Блок расписания с ближайшими группами, форматами обучения и итоговым документом. Документ — отдельная смысловая история: диплом о переподготовке требует высшего образования, свидетельство — среднего профессионального, и всё это нужно объяснить прямо на первом экране.
Тело страницы
Модульная структура из переиспользуемых блоков:
- Блок портрета аудитории «кому подойдёт»
- Блок образа результата «Чему научитесь»
- Блок «Что вас ждёт на курсе»
- Блок программы
- Блоки о формате обучения и документах
- Блок с авторами и экспертами
- Инфо блок о школе, отзывы, заявка
Все компоненты переиспользуемые, все состояния покрыты, макет готов как техническое задание. Под структуру создана CMS — контент редактируется без участия разработчика.
Страница вебинара
Просмотр вебинаров происходил прямо на промо-сайте в отрыве от основного обучения внутри продукта.
Это создавало аналитические противоречия и ломало пользовательский путь. Нужно было разделить промо и продуктовую часть: продуктовую страницу делал другой дизайнер, моя задача — пересобрать промо-страницу как инструмент анонса и продажи.
Я убрал лишнее и упростил элементы, оставил фокус только на том, что нужно для принятия решения о записи.
Обложка
Четыре состояния обложки в зависимости от статуса вебинара:
- Запланирован — дата, время по Москве, кнопка «Записаться» с ценой или без. После записи кнопка переходит в «вы записаны» с напоминанием за час до начала.
- Идёт прямо сейчас — дата заменяется анимированным блоком «В эфире», показывается время начала чтобы понять сколько уже прошло, кнопка «Смотреть трансляцию».
- Запись доступна — вместо времени начала показывается продолжительность и количество просмотров как социальное доказательство.
Для шапки создана таблица адаптивности: матрица диапазонов знаков × брейкпойнтов с точными значениями font-size и line-height. Ограничение названия по символам введено на уровне CMS.
Тело страницы
Вместо длинного описания — короткие конкретизирующие темы. Лекторы от одного до четырёх, вебинары по теме, правая колонка с upsale на курсы по тегу вебинара.
Обложка-баннер живого вебинара встроен и в страницу список вебинаров — если эфир идёт прямо сейчас, он всплывает наверху страницы.
Витрина обучения
Каждое направление обучения живёт отдельно — как предлагать комплексные обучения по разным направлениям всему бизнесу. Мы активно предлагали корпоративную подписку включающую в себя все направления. Но показать состав курсов на несколько направлений сразу целому бизнесу было невозможно.
Не существовало страницы, где можно увидеть весь объём обучения и понять, какой тариф подойдёт именно этой компании.
Я спроектировал каталог обучения — агрегатор всего контента с динамической логикой под B2B-продажи.
Каталог
Поиск, фильтрация по ролям разных направлений (генеральный директор, HRD, бухгалтер и другие), по цели, рубрикам и навыкам.
В зависимости от выбранных фильтров — динамическое предложение тарифа: компании видят корпоративную подписку, частному пользователю предлагается персональная. Ниже — курсы, экспресс-курсы, вебинары в виде календаря с ближайшими событиями.
Проведены юзер-тесты: пользователи успешно справлялись с навигацией и фильтрацией, находили нужные форматы и доходили до выбора тарифа.
Страница направления
Витрина всего контента одной профессии: топовые курсы, экспресс-курсы, вебинары-календарь, статьи, вопросы-ответы. Всё в одном месте, без перехода между разделами.