Allcourses
Сроки
2–3 месяца
Что мы сделали
Анализ и UX-архитектура
Визуальная концепция
Дизайн-система
Контент-структура и прототипы
Адаптивы для устройств
Allcourses — агрегатор онлайн-курсов: платформа, где ученики ищут, сравнивают и выбирают программы обучения от разных школ, а школы получают целевой трафик и заявки. Это двусторонний маркетплейс — с одной стороны люди, выбирающие, чему учиться, с другой 130+ онлайн-школ.
Задача звучала как редизайн, но по сути свелась к пересборке продукта на уровне архитектуры.
Задача звучала как редизайн, но по сути свелась к пересборке продукта на уровне архитектуры.
Проект до
Старый сайт работал, но накопил проблемы, характерные для агрегаторов, выросших органически.
Все страницы были одинаковыми. Каталог, направление, страница школы, промокоды — визуально и структурно это была одна и та же сетка карточек с разным содержимым. Разницы между «страницей школы» и «каталогом с фильтром по школе» не существовало.
Карточка курса не имела иерархии. Название, длительность, цены и кнопка шли одним весом. Рейтинги выносились отдельным блоком голых цифр под сеткой, оторванным от карточек, к которым относились.
Разделы превращались в простыни. Промокоды — бесконечная лента почти одинаковых карточек: десять распродаж одной школы по разным странам подряд. Отзывы — сплошной поток длинного текста, который невозможно сканировать.
Слабая сторона школ. Раздел размещения ограничивался формой с парой блоков. При том что школы — плательщики, ради которых маркетплейс и существует.
Главная проблема — продукт не помогал принять решение и никуда не вёл пользователя. Перекраска тех же экранов этого бы не изменила.
Все страницы были одинаковыми. Каталог, направление, страница школы, промокоды — визуально и структурно это была одна и та же сетка карточек с разным содержимым. Разницы между «страницей школы» и «каталогом с фильтром по школе» не существовало.
Карточка курса не имела иерархии. Название, длительность, цены и кнопка шли одним весом. Рейтинги выносились отдельным блоком голых цифр под сеткой, оторванным от карточек, к которым относились.
Разделы превращались в простыни. Промокоды — бесконечная лента почти одинаковых карточек: десять распродаж одной школы по разным странам подряд. Отзывы — сплошной поток длинного текста, который невозможно сканировать.
Слабая сторона школ. Раздел размещения ограничивался формой с парой блоков. При том что школы — плательщики, ради которых маркетплейс и существует.
Главная проблема — продукт не помогал принять решение и никуда не вёл пользователя. Перекраска тех же экранов этого бы не изменила.
Результат
Платформа, которая перестала быть списком курсов и стала инструментом выбора. Вместо однотипных каталожных сеток — самостоятельные связанные сущности: курс, школа, профессия, отзыв, подборка, акция, статья. Каждая со своим шаблоном и понятной вложенностью, все связаны между собой перекрёстными переходами. Пользователь получает всё необходимое, чтобы разобраться и сравнить, а не пролистать тысячи позиций.
Сайт разработан в адаптивных версиях для десктопа, планшета и мобильных устройств с одинаково комфортным опытом на любом экране.
Сайт разработан в адаптивных версиях для десктопа, планшета и мобильных устройств с одинаково комфортным опытом на любом экране.
Концепция
Продукт выстроен вокруг одной идеи: помочь человеку принять дорогое и тревожное решение. Выбор обучения — это десятки, а то и сотни тысяч рублей и месяцы жизни, поэтому платформа должна снимать неопределённость, а не добавлять её.
Отсюда три сквозные линии всего проекта: связная информационная архитектура вместо плоского каталога, доверие, встроенное в интерфейс как функция, и контент-воронка, которая ведёт пользователя от первого интереса до целевого действия.
Отсюда три сквозные линии всего проекта: связная информационная архитектура вместо плоского каталога, доверие, встроенное в интерфейс как функция, и контент-воронка, которая ведёт пользователя от первого интереса до целевого действия.
Главный экран
Фокус главной смещён с «кто мы» на «что вы здесь сделаете». Смысловой центр — поиск: над полем расположены режимы (курсы, категории, школы, профессии), пользователь выбирает, что ищет, ещё до ввода запроса. Живой дропдаун подсказок показывает под каждым результатом школу, чипы частых запросов ускоряют старт.
Ниже главная разворачивается как последовательный лендинг с несколькими точками входа под разные намерения: метрики платформы, популярные курсы и школы, бесплатные курсы, отзывы и видео-отзывы, актуальные профессии с зарплатами, гид по курсам, FAQ. Вместо простыни карточек — структурированная посадочная, с которой можно уйти в любой раздел.
Карточка курса
Карточка спроектирована как ключевой элемент дизайн-системы и переиспользуется во всех контекстах — в каталоге, на странице школы, в профессии, внутри статей и подборок. Один компонент, единое поведение: пользователю не нужно переучиваться при переходе между разделами.
Каталог
Фильтры собраны в упорядоченную панель со сворачиваемыми секциями, счётчиками и поиском по значениям — нужную школу из сотен можно найти вводом, а не бесконечным скроллом. Самые частые условия вынесены наверх тумблерами, включая точечную для рынка «оплату маткапиталом».
Каталог получил трёхуровневую вложенность (все курсы → направление → подкатегория), переключение плотности сетки, счётчик результатов и явную пагинацию с остатком. На мобайле фильтры вынесены в отдельный полноэкранный слой, а не втиснуты в контент.
Отдельно — сравнение до пяти курсов бок о бок по единым параметрам. Именно оно превращает агрегатор из списка в инструмент решения, прямо отвечая на вопрос «что выбрать».
Школа
Страница школы стала самостоятельным профилем с якорной шапкой и табами: курсы, отзывы, акции, о школе. Таб «о школе» несёт лицензию, реквизиты и FAQ — агрегатор отвечает на вопрос «можно ли доверять школе» фактами, а не рекламой. Таб «акции» — аккуратная сетка промокодов вместо прежней простыни.
Отзывы
Отзыв стал самостоятельной страницей: структурированные плюсы и минусы, привязка к конкретному курсу, реакции и — главное — ветка комментариев с публичным официальным ответом школы. Из витрины мнений раздел превратился в живую диалоговую площадку. На уровне списка — сводка оценок по звёздам, честный негатив, который не прячется, и указание внешнего источника отзывов.
Профессии
Новый раздел, которого раньше не было. Гид по профессии ведёт человека по всей воронке решения о смене сферы: кто это, какие задачи, где работает, сколько зарабатывает, реальные вакансии с зарплатами, плюсы и минусы, как стать, курсы по профессии. Это ловит пользователя раньше — того, кто ещё только думает «а не сменить ли профессию», и доводит его до конкретного курса.
Подборки и журнал
Подборка — гибрид редакционной статьи и каталога: разбор «топ курсов» со встроенными живыми карточками, куда можно кликнуть прямо из текста. Журнал ловит холодную аудиторию по информационным запросам и, в отличие от старого блога-тупика, прошит ссылками на курсы, профессии и подборки.
Вместе они образуют контент-воронку: журнал → профессии → подборки → каталог → переход на школу. Разделы связаны перелинковкой, пользователь входит на любом уровне и спускается по воронке. Параллельно это большое SEO-ядро под запросы разной частотности.
AI-помощник
Мы спроектировали и внедрили AI-помощника по подбору курсов: человек проходит короткий опрос и получает персональную подборку под свои цели. Это снимает главную боль агрегатора — паралич выбора из тысяч позиций. Точки входа расставлены по всем ключевым разделам.
Сторона школ
Раздел «Добавить школу» из формы превратился в продающий лендинг для второй стороны маркетплейса: оффер, выгоды, метрики платформы, логотипы партнёров, процесс в три шага, заявка. Даже страница «О компании» несёт конверсионную нагрузку — форма размещения встроена прямо в неё. Ни один экран не оставлен мёртвым.
Дизайн-система и адаптивы
Продукт собран на переиспользуемых компонентах — карточка курса, карточка школы, карточка промокода, блок отзыва, фильтр-панель живут во всех разделах без изменений. Это даёт консистентность для пользователя и управляемость для команды.
Сайт спроектирован в трёх версиях: десктоп, планшет, мобайл. Адаптация — не перекладывание в одну колонку, а пересмотр логики разделов: нижний таб-бар, плавающая кнопка AI-помощника, скролл-ленты карточек, полноэкранные фильтры. Мобильная версия проработана как полноценный сценарий, а не адаптив по остатку.
Итоги проекта
Главный результат — не новая картинка, а смена типа продукта. Плоский каталог, где всё было одной сеткой карточек, стал связной экосистемой: самостоятельные сущности, сквозная воронка от контента до конверсии, доверие, встроенное в интерфейс, и проработанная сторона для школ.
Каждый раздел решает свою задачу и передаёт пользователя дальше — от первого интереса до оставленной заявки. Продукт помогает принять решение и работает на обе стороны маркетплейса.
Ссылка
КОНТАКТЫ
Мы создаем стильный дизайн, который конвертит лидов в заявки и приносит компаниям деньги.