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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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