Дружба, а не противодействие: как мы прошли центральный маркетинг и сделали редизайн крупнейшей LMS-системы в России

Привет, на связи Антон Кравченко, CEO студии Crauch. Сегодня расскажу, как за 9 месяцев мы сделали большой проект VK Education — от первых шагов до финального результата, которым довольны и мы, и заказчик. Спойлер: было сложно, но классно!

Мы Crauch — студия продуктового дизайна и разработки цифровых платформ, сервисов и приложений. Безумцы, фанатики, работяги.

Среди клиентов: Positive Technologies, Dodo Brands, МТС Линк, ВКонтакте, Headhunter, Рутокен, iSpring, Яндекс Алиса, Самолет, Лемана ПРО, Кубань Кредит и другие. Входим в ТОП-25 лучших студий digital-дизайна России и тройку самых награждаемых агентств 2024 года по версии Tagline.

Постоянно качаемся во все стороны и с огнем в сердце работаем)

А в нашем тг-канале регулярно жизнью студии: проектами, лайфстайл-контентом и нашей внутрянкой.

VK Education — это главная образовательная платформа VK, которая помогает школьникам, студентам, учителям и IT-специалистам прокачивать навыки и строить карьеру в digital-сфере.

Немного цифр:

Платформа уже работала и приносила результаты, но требовала редизайна. Навигация сложная, интерфейс устарел, а доходимость до конца курса (COR) — ниже, чем хотелось бы. Вот как система выглядела до редизайна:

Чтобы VK Education продолжала расти и развиваться, нужно было не просто обновить визуал, а сделать платформу удобной и интуитивно понятной.

Какие задачи перед нами стояли:

Что было важно для VK:

Проект был амбициозный, требовательный и долгий — 9 месяцев работы, десятки итераций, но в итоге мы сделали продукт, который решает задачи и бизнеса, и пользователей. Как именно — рассказываем дальше.

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

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

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

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

На этапе презентации мы предложили два противоположных направления:

1. Дружелюбность — визуально мягкий, персонализированный стиль.

2. Сервисность — строгий, структурированный стиль.

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

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

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

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

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

На этапе презентации концепции центральному отделу маркетинга — хранителям брендбука и визуальной консистентности — нам предстояло найти баланс между креативом и корпоративными стандартами.

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

Всё было продумано так, чтобы дизайн оставался узнаваемым, но при этом свежим и нативным для VK.

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

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

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

Кстати, у нас уже вышел красивый и динамичный кейс этого проекта на Behance:

Для проекта мы собрали мощную команду: от нас — продуктовый дизайнер и арт-директор, плюс дизайн-директор, который периодически подключался, чтобы поддерживать качество работы на нужном уровне. Параллельно, менеджер проектов отвечал за синхронизацию сроков и бюджета. Со стороны VK с нами была команда разработки, продакт-менеджер, руководитель проекта и аналитики.

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

Перед началом работы клиент передал нам детальный мастер-файл UX-исследований, где по каждому user flow были разложены проблемные точки и сложности, с которыми сталкиваются пользователи. Также, мы получили user stories — это помогло нам глубже понять логику взаимодействия с платформой и точнее спроектировать интерфейс, устраняя ключевые барьеры.

Работая с этим материалом, мы детально проанализировали текущие сценарии (CJM as is), выявили узкие места и точки фрустрации. Затем на основе клиентских гипотез спроектировали улучшенные пользовательские пути (CJM to be) для трех ключевых ролей: ученика, преподавателя и администратора.

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

После этого мы приступили к проектированию: проработали 8 разделов и 48 состояний интерфейса.

В работе использовали интерактивное прототипирование: создавали первую версию прототипа, тестировали на 2-3 пользователях, вносили изменения и снова тестировали. Такое движение итерациями позволяло нам сразу выявлять и исправлять возможные ошибки.

Тестирование проводили разными способами: делали коридорные тесты, A/B-эксперименты, дневниковые исследования. Скрипт для тестирований с вопросами, которые задавались пользователям, взяли от клиента. Вот, например, кусочек одного из таких тестов:

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

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

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

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

Поиск тоже переработали: теперь он стал более многофункциональным и может искать по нескольким разделам.

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

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

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

Проверили эту гипотезу с помощью eye-tracking исследования и принципом Гутенберга. Гипотеза сработала: 80% внимания уходит на материал, а меню остается в зоне быстрого доступа.

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

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

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

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

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

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

Релизнули проект в феврале 2025 и сейчас ждем результатов от клиента. Одно можно сказать точно — уже на этапе работы фидбек был положительным, чему мы бесконечно рады.

А вот и приятный отзыв клиента, подтверждающий слова выше:

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

Мы кайфанули от работы и гордимся результатом. Команде Crauch и VK большое спасибо — вы наши любимки :—)

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