Кейс дополняется – скоро здесь появятся новые материалы
От библиотеки курсов к образовательному маркетплейсу и социальной экосистеме авторов
Комплексный redesign бренда и digital-платформы «Инфоурок»
О проекте
Я участвовал в трансформации продукта на уровне бренда, UX и UI – от формирования новой визуальной концепции до проектирования ключевых пользовательских сценариев, кабинетов и основы дизайн-системы
Продукт в масштабе
«Инфоурок» – крупнейшая российская образовательная онлайн-платформа, объединяющая учащихся, преподавателей, авторов образовательного контента и экспертов
Публичные показатели платформы за 2024 год
Контекст
На момент проекта «Инфоурок» уже был одним из крупнейших игроков российского образовательного рынка. Но его модель менялась: из библиотеки образовательного контента продукт должен был вырасти в marketplace и социальную экосистему для авторов и учащихся
Заказчик пришёл в «aic» за комплексным обновлением бренда и цифровых продуктов. Визуальное обновление было только частью задачи
Бизнес-модель
- Комиссия с продажи материалов и курсов
- Платное продвижение контента авторами
- Собственные курсы Инфоурока
- Реклама
Бизнес-вызов
Продукт вырос, а интерфейс и визуальный язык уже не соответствовали его масштабу и новой стратегии. Платформа должна была не только помогать потреблять контент, но и создавать условия, при которых авторы приходят публиковать и продавать образовательные продукты, а платформа получает комиссию
| Было | Стало |
|---|---|
| Библиотека материалов и каталог курсов | Marketplace образовательного контента |
| Простая регистрационная форма | Персонализированный onboarding |
| Ограниченные кабинеты | Полноценный creator / seller experience и кабинет обучения |
| Устаревший визуальный язык | Новый бренд, архитектура, UX и UI |
Цели и метрики
Финальных post-launch значений у меня нет: я покинул проект до завершения измерений. Поэтому ниже – цели и метрики, на которые ориентировался продукт, а не результаты
| Бизнес-цель | Целевые продуктовые метрики |
|---|---|
| Больше продаж курсов и материалов | Course purchase conversion, Revenue / GMV |
| Больше активных авторов | New creator registrations, Creator activation |
| Больше вовлечения и повторных визитов | Content engagement, DAU / retention |
| Больше завершённого обучения | Course completion rate, Learning activity |
Аудитория и экосистема
Learners / consumers
Учителя, ученики, родители, репетиторы, методисты, психологи, преподаватели вузов, студенты и другие потребители образовательного контента. Путь: discovery → evaluation → purchase → learning → completion
Creators / sellers
Учителя, методисты, репетиторы, психологи, преподаватели вузов и другие эксперты, которые создают, публикуют и продают образовательный контент. Путь: create → publish → promote → analyze → earn
Моя роль и команда
Я был Senior Product Designer во внешней дизайн-команде «aic». Вместе с арт-директором и brand designer участвовал в формировании визуальной концепции, а после её согласования отвечал за значительную часть продуктового дизайна и лидировал работу двух middle designers
Зона ответственности
- Концепция цифрового продукта и ключевых страниц
- Информационная архитектура, навигация, главная
- CJM, user flows, прототипы и UI
- Onboarding, регистрация и персонализация
- Каталоги курсов, мероприятий и материалов
- Мастер-страница курса и заявка в кабинете
- Страницы курсов и материалов, marketplace-сценарии
- UI Kit, компоненты, состояния и токены
- Декомпозиция задач и ревью двух middle designers
- Защита решений перед командой и руководством клиента
- Работа с frontend / backend leads и handoff
Команда
| aic | «Инфоурок» |
|---|---|
| Senior Product Designer / Lead (я) 2 Middle Designers Art Director Brand Designer | 2 Product Owners (web / mobile) UX Researcher Analyst Руководитель проекта / CEO Frontend и Backend leads |
Research и инсайты
Основной discovery проводила продуктовая команда «Инфоурока»: интервью, опросы, анализ Яндекс.Метрики, типологии пользователей, сбор обратной связи, проверки с экспертами по образовательному контенту.
Я не был основным исследователем. Моя работа начиналась с интерпретации findings и перевода их в UX-решения: IA, CJM, user flows, прототипы и UI.
| Инсайт | Что это значило для продукта |
|---|---|
| Продукт почти ничего не знает о пользователе | Персонализация должна начинаться уже в onboarding |
| Очень много разнородного контента | Нужны понятная информационная архитектура и discovery |
| Автор – не просто пользователь | Нужен отдельный creator / seller experience |
| Обучение – процесс, а не покупка | Кабинет должен показывать прогресс и следующий шаг |
Конкурентный анализ
Продукт становился marketplace и социальной платформой, поэтому мы смотрели не только на прямых конкурентов и искали продуктовые паттерны, а не визуальные референсы.
| Класс продуктов | Кого изучали | Что искали |
|---|---|---|
| EdTech | Coursera, Udemy, Stepik, Skillbox, Нетология | Discovery, каталог, страницы курсов, обучение |
| Social | LinkedIn, VK, Facebook, Reddit | Лента, сообщество, content discovery |
| Creator platforms | YouTube Creator Studio, GetCourse | Публикация, аналитика автора |
| Marketplace | Seller-кабинеты и товарные ленты e-commerce | Управление товарами, аналитика, продвижение |
#1. Onboarding и персонализация
От простой регистрации – к персонализированному образовательному опыту.
AS IS
Обычная регистрационная форма с личными данными. Пользователь создавал аккаунт, но продукт почти не знал его образовательный контекст и не мог сразу предложить релевантный контент.
TO BE
Регистрация + персонализация: роль, направление, предметы и интересы, интересующие специалисты, цель обучения и ожидаемый результат – например, сертификат.
Flow: регистрация → роль → интересы → предметы → специалисты → цель → персональная лента
#2. Каталоги курсов, мероприятий и материалов
Три типа контента – один каркас поиска и выбора.
Курсы, мероприятия и материалы исторически жили в разных каталогах со своей логикой. При миллионах единиц контента пользователю нужно быстро сузить выдачу, а платформе – показывать одинаково понятные карточки, по которым легко сравнивать и принимать решение.
Что общее
Поиск и подборки
- Поиск по каталогу и популярные запросы
- Тематические подборки («Подборка дня»)
- Сортировка: популярные, по дате, дешевле / дороже, по рейтингу
Фильтры
- Направление, тип, область, дисциплина, формат
- Поиск внутри длинных списков областей
- «Ещё N областей / фильтров» – длинные списки раскрываются по требованию
Что меняется: карточка под тип контента
| Каталог | Что видно в карточке | Главное действие |
|---|---|---|
| Курсы | Тип программы (ПК / ПП / саморазвитие), часы, рейтинг и отзывы, сколько учатся и прошли, цена и скидка | Подать заявку |
| Мероприятия | Формат (вебинар, семинар, мастер-класс, клуб), дата или прямая трансляция, длительность записи, автор | Смотреть / участвовать |
| Материалы | Формат файла (PDF, DOCX, PPTX), автор, рейтинг, просмотры и скачивания | Скачать |
Мобильная версия
На мобильном фильтры и сортировка вынесены в отдельные полноэкранные слои: выдача остаётся чистой, а сложная фильтрация не ломает скролл.
#3. Страница курса и мастер-страница
Не один красивый лендинг, а конструктор, из которого собирается страница под любой курс.
AS IS
Старая страница курса – длинный лендинг: блоки повторялись (призыв «Начните учиться сейчас» встречался дважды), преимущества занимали несколько экранов, а ключевое – сроки, документ, цена – терялось. Страница для каждого направления по сути собиралась вручную.
Решение: мастер-страница
Я собрал мастер-страницу – библиотеку из ~28 модульных блоков с единой сеткой и правилами. Каждый блок отвечает на один вопрос пользователя.
| Группа блоков | Что входит | На какой вопрос отвечает |
|---|---|---|
| Ключевая информация | Hero: тип курса, название, рейтинг, сколько учатся; быстрые факты – старт, форма, документ, длительность, цена и рассрочка | Что это и подходит ли мне? |
| Содержание | Описание, программа, учебный план, о профессии, кому подойдёт, кто может обучаться | Чему я научусь? |
| Доверие | Отзывы с внешних площадок, лицензия, «Сколково», преподаватели, истории выпускников | Почему этой платформе можно верить? |
| Результат | Выдаваемый документ с образцом, статистика выпускников | Что я получу в конце? |
| Покупка и поддержка | Цена и почему она низкая, заявка со скидкой, подписка «Премиум», как проходит обучение, поддержка 24/7, похожие курсы | Как начать и что если появятся вопросы? |
Одна система – разные цели и цветовые решения
Из мастер-страницы собираются страницы под разные типы продуктов. Меняется набор и порядок блоков, акцентный цвет и блок документа – в зависимости от того, что важнее всего для решения о покупке.
| Тип | Задача пользователя | Акцент | Что выходит вперёд |
|---|---|---|---|
| Повышение квалификации | Быстро получить удостоверение для работы | ● зелёный + ● оранжевый | Старт обучения, ускоренный формат, документ, программа |
| Профпереподготовка | Сменить профессию – дольше выбирает, выше чек | ● синий | Доверие: отзывы, лицензия, рейтинг платформы, преподаватели, о профессии |
| Мини-курс | Попробовать направление с небольшим вложением | ● фиолетовый | Описание, польза профессии, программа; сертификат вместо диплома |
Блок «Выдаваемый документ» – пример компонента, который меняется под тип программы: диплом о переподготовке, удостоверение о повышении квалификации или сертификат мини-курса.
#4. Заявка на курс в кабинете
От разрозненных форм – к одному понятному сценарию.
AS IS
В варианте, с которого начиналась работа, заявка была разбита на несколько состояний и экранов: «доступ закрыт», оплата картой прямо в списке курсов, личные данные, документы и адрес доставки – в разных местах. Пользователю было непонятно, что уже сделано и что нужно сделать, чтобы получить документ об обучении.
TO BE
Заявка стала одной страницей с последовательными шагами. Справа – статус заявки и личный консультант, к которому можно обратиться в любой момент.
- Общая информация – учебный центр и календарный график
- Обучение – длительность, прогресс по модулям, переход к урокам
- Доставка удостоверения – заказ и адрес
- Личные данные – заполняются автоматически из профиля, остаётся проверить
- Документы – загрузка паспорта, диплома и других сканов, отправка на проверку
- Оплата – за свой счёт или по подписке «Премиум»
Три состояния заявки
| Состояние | Что видит пользователь | Следующий шаг |
|---|---|---|
| Заявка не оплачена | Выбор количества часов, форма данных, блок оплаты | Оплатить или оформить подписку |
| Заявка оплачена, доставка нет | Прогресс обучения, предложение заказать печатное удостоверение | Учиться и заказать доставку |
| Заявка и доставка оплачены | Прогресс, адрес доставки, заполненные данные и документы | Пройти модули и итоговую аттестацию |
Design System
Единой дизайн-системы на старте не было. После согласования brand language мы строили UI foundation с нуля.
Brand → tokens → UI Kit → components → patterns → product
Что вошло
- Токены, цвета, типографика
- Компоненты и их состояния
- Паттерны и документация
Моя роль
- Планирование структуры UI Kit
- Создание foundation: токены и базовые компоненты
- Делегирование задач двум middle designers, ревью и контроль консистентности
Валидация
Для ключевых сценариев проходили цикл: проблема → гипотезы → варианты → прототип → проверка → финальный UI.
Что успели: коридорные тестирования, внутренние UX reviews, экспертные интервью и опросы с командой специалистов по контенту «Инфоурока».
Стейкхолдеры и разработка
Stakeholder management
У «Инфоурока» была сильная продуктовая команда, но не было собственного design ownership, а финальное слово по ряду вопросов оставалось за руководителем со своим видением. Иногда команда поддерживала решение, а руководитель – нет.
- Аргументировал решения через пользовательскую задачу и бизнес-цель
- Показывал несколько вариантов, а не защищал один дизайн
- Предлагал проверку вместо спора вкусов
- Если бизнес-решение принято – адаптировал его без потери ключевой UX-логики
Разработка и handoff
У клиента были собственная разработка и подрядчики. Я напрямую работал с frontend и backend leads: обсуждал реализуемость, ограничения и формат передачи документации – состояния компонентов, responsive-правила, аннотации, edge cases.
Процесс: design → design review → development discussion → handoff → design grooming → implementation
После моего ухода команда продолжала получать дизайн-поддержку aic на этапе реализации.
Результат
К концу моего участия был сформирован фундамент новой продуктовой модели и визуальной системы «Инфоурока».
| Brand | Новый визуальный язык и обновлённый брендбук |
| Product | Новая архитектура и интерфейс платформы |
| Onboarding | Регистрация с персонализацией |
| Catalog | Единый каркас каталогов курсов, мероприятий и материалов |
| Course page | Мастер-страница из модульных блоков и сборки под ПК, ПП и мини-курсы |
| Application | Заявка на курс как пошаговый сценарий с тремя состояниями |
| Marketplace | Паттерны каталога, страницы продукта и seller experience |
| System | UI Kit, токены, компоненты – основа для будущих digital-продуктов |
Что я бы сделал иначе
Исследования раньше
Интегрировал бы research на более раннем этапе – не только для понимания пользователей, но и как аргумент в спорных решениях.
Stakeholder alignment
Заранее фиксировал бы критерии: что решает product team, где нужен executive approval, что подтверждается тестами.
Test before debate
Если команда и stakeholder видят решение по-разному, лучше заранее определить способ проверки, чем спорить о вкусах.
Галерея
Главная страница продукта. Web
Главная страница продукта. Mobile web
Страница личного кабинета автора. Web
Страница личного кабинета автора. Mobile web
Каталог курсов. Web
Каталог курсов. Mobile web
Каталог материалов. Web
Каталог материалов. Mobile web
Каталог мероприятий. Web
Каталог мероприятий. Mobile web
