Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

Привет, на связи диджитал-продакшн MAX. Сегодня расскажем, как мы спроектировали и задизайнили LMS для онлайн-школы, в которой обучились 45 000+ человек из 40 стран. И покажем как там сейчас всё устроено.

Кто мы?

Мы MAX — студия дизайна и разработки. №1 для фудтеха. Круты для ед, фин, мед. Спроектировали первый Самокат, основные приложения ВкусВилла, Пятёрочки и Ленты. Бегущий человечек в Яндекс.Еде — тоже наших рук дело.

У нас много крутых кейсов, их можно посмотреть на сайте.

Кто клиент?

Skillfactory — российская онлайн-школа IT-профессий, работает с 2016 года. Предлагает программы по Data Science, аналитике данных, программированию, IT-менеджменту и дизайну (школа Contented).

Skillfactory также развивает совместные программы высшего образования в партнерстве с ведущими университетами и реализует проекты с государством.

Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

Сразу к результатам

В 2 раза вырастили WAU — количество активных юзеров за неделю.

Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

Вырастили среднюю продолжительность визита пользователя.

Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

Почти в два раза увеличилось количество страниц, которые пользователь просматривает за один визит.

Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

Как мы получили такой проект?

Компания провела тендер между студиями, а мы его выиграли)

Вы показали себя лучше других. В том числе потому что сразу предложили очень быстро на макетах провести исследования и на их основе делать новый дизайн
Дмитрий, Product manager SF

С чего начали

Фундамент для исследований мы подготовили ещё до первой встречи.

Сформировали Job stories.

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

Например, сдать домашнее задание, получить оценки, назначить преподавателя.

Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

Провели бенчмаркинг и конкурентный анализ.

Просмотрели все платформы на рынке и отметили интересные решения. Проанализировали прямых и косвенных конкурентов.

Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

Провели kick-off meeting

Это такая «глубинка» с заказчиком.

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

Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

Определили сегменты аудитории за счёт быстрой коммуникации и командной работе.

Со встречи вышли с чётким пониманием того, что и для кого делаем.

Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

Построили CJM

Чтобы схема получилась подробной, мы созванивались с каждым отделом Skillfactory и вместе прокладывали флоу студента. Подсвечивали проблемные зоны и предлагали варианты улучшения.

Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

Каждый сценарий прокладывали именно с метриками — это сильно помогло нам при проектировании.

Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

Перешли к проектированию

Собрали кликабельные прототипы.

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

Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

Перенесли оттестированные решения на визуал

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

Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

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

При этом сохранить ощущение драйва и лёгкости.

Определились со стилем, цветами, типографикой, и собрали первый переосмысленный дизайн главного экрана.

Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

Мы круто распланировали и всё шло как надо

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

И многим фишкам и красивостям просто не нашлось технического решения)

Больше мы так не делали и теперь синхронимся раз в неделю.

В 2023 году компания провела ребрендинг

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

Ребята сделали несколько подходов и предложили очень разные варианты оформления. Начиная с кардинально черно-зелёной платформы и заканчивая обилием баннеров. В результате мы нашли середину, которая устроила всех - много чистого пространства, платформа в обновлённых корпоративных цветах и минимализм в деталях, чтобы ничего не отвлекало от обучения.
Дмитрий, Product manager SF

Показываем небольшую часть дизайн-системы:

Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

Как сейчас всё устроено?

Главная страница

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

Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

Если обучение завершено — появляется кнопка, которая ведет на сайт с другими курсами. Цвет, текст и паттерн баннера меняются.

Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

Ниже расположили все активные курсы студента.

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

Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

Страница курса

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

Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

Отобразили структуру курсов в виде списка. А если нажать один из разделов — появляется список пройденных модулей и количество оставшихся.

Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

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

Эта функция была и до редизайна, а мы оформили её под новую айдентику.

Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

Страница контента урока

Добавили удобную навигацию по заданиям.

Если навести на полоску, между ними можно переключиться и посмотреть содержание других уроков.

Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

Проверка домашнего задания

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

Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

Происследовали финальные макеты

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

Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

А ещё

Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

Стоимость

Мы не любители “ответили в директ”, поэтому просто укажем цены на наших ребят.

Команда

Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT
Как мы задизайнили LMS для Skillfactory и помогли тысячам людей найти своё место в IT

FIN!

Спасибо всем, кто дочитал до конца) Оставляем ссылочку на сайт ребят.

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

22
8 комментариев

Очень крутая статья и выводы - Молодцы!)

1
Ответить

спасибооо)

1
Ответить

Ребята, вы супер!! Очень крутой и яркий кейс🌟🌟🌟

1
Ответить

спасибооо)) 💚

Ответить

всем кейсам кейс! огонь 🔥

1
Ответить

🫶🏻🫶🏻🫶🏻🫶🏻🫶🏻

Ответить

Да клевый кейс, жаль на пользователях не прогнали, получилось бы ещё лучше, удачи в будущих проектах

1
Ответить