Редизайн LMS-системы VK Education

Главное о кейсе

Делаем редизайн LMS-системы крупнейшей образовательной платформы в России, в которой обучаются тысячи студентов

Платформа в цифрах:
• 20 000+ человек уже успешно прошли обучение с VK Education
• 30 IT-направлений охватывают курсы — от аналитики больших данных до рекрутмента
• 1000+ студентов наших образовательных проектов уже работают в VK
• 600 сотрудников VK поделились знаниями как преподаватели VK Education
• 70% каждого курса — практика, теория занимает всего 30% обучения

Итоги:
• Переработали главную страницу LMS и страницы с курсами, дисциплинами, занятиями, новостной ленты, личного кабинета.
• Для удобства преподавателей разрабатываем административную часть. Она повторяет общую стилистику LMS с набором нового функционала.
• Продолжаем редизайн функционала. Работы запланированы как минимум до 2 квартала 2025 года

Как проект изменил жизнь пользователей

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

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

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

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

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

Бизнес-задача и ее решение

Был необходим новый дизайн пользовательской и административной частей с удобным и понятным юзабилити, учитывая масштабирование пользовательской и партнерской базы в будущем.
1. Сделать LMS привлекательной для пользователей.
2. Переделать логику и улучшить юзабилити пользовательской и админской частей.
3. Дизайн веб и мобильной версий.
4. Увеличить метрику COR — доходимость учеников до конца курса.

Боли:
1. Текущая LMS не соответствует современным тенденциям дизайна
2. Отсутствие интуитивно понятного интерфейса для пользователей.
3. Низкий процент доходимости учеников до конца курса.

Цели VK Education:
1. Имиджевая цель. Более современный дизайн, который будет удобен и пользователю, и администратору
2. Цель под масштабирование пользовательское и партнерское
3. Социальная миссия - бесплатное обучение и обучение потенциальных кадров для vk

Крафт (мастерство), реализация, технические детали

Стилистика и дизайн
При разработке дизайна мы ориентировались на брендбук VK Education и дизайн систему vkui. Это помогло сохранить узнаваемость бренда и создать целостный пользовательский опыт. Особое внимание было уделено консистентности новых визуальных приемов с текущей библиотекой стилей.

Дружелюбное настроение
Через скругленные формы блоков, кнопок, иконок и других элементов даем ощущение легкости и открытости платформы. Выделяем ярким цветом отдельные элементы – открытость и доброта продукта. Графичный ход платформы яркий и индивидуальный, через него можем показать персонализацию, что проект подходит для разных людей и открыт.

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

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

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

• На первом этапе сделали дизайн-концепцию для сокращения сроков на этапе дизайна для согласования со стороны vk.
• После, начинали работу с проектирования и построения удобной навигации для пользовательской части.
• Проектирование: сделали низкодетализированные и высокодетализированные прототипы для ускорения процесса передачи в разработку (бекенд).
• Дизайн веб и мобильной версий и создание нового ui-kit. .
• Проходят тестирования интерактивных макетов, правятся постоянно и обстукиваются об аудиторию. Делаем все-все интерфейсы, айтрекинг и т.д.
• Проверка гипотез с помощью ИИ и Eye tracking исследований

Скриншоты