Платформа для корпоративного обучения

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

JetLearn — внутренний обучающий ресурс, который компания решила масштабировать в полноценную обучающую платформу.

А нам предстояло создать дизайн интерфейса для этой платформы, отразив нем полный user flow всех сценариев для каждого типа пользователей. Мы называем эту услугу UX-дизайн под ключ.

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

Вывести внутренний образовательный продукт на внешний рынок для получения дополнительного дохода от эксплуатации своего актива.

Студент. Мои курсы

Дизайн-задача

Отрисовать макеты интерфейса образовательной платформы с учетом основных сценариев трех типов пользователей:

• ученик;
• куратор;
• автор курса, он же администратор.

Статистика студента по курсу

Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть модуль дизайн-задачника «Сценарии взаимодействия» для тех, кто хочет научиться их использовать в дизайне интерфейсов.

Автор. Список курсов

Результат

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

Информационная карта. Студент, куратор Информационная карта. Администратор

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

❮ ❯

Создание курса: о курсе, программа, создание урока, превью сертификата, создание галереи, добавление файла в хранилище

❮ ❯

Статистика по школе: список курсов, Статистика: студенты, Статистика: тултип при наведении на график, Статистика студента

Нюансы и особенности процесса

Интерфейсные паттерны

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

Фрагмент доски со сравнением интерфейсных паттернов для пользователя-ученика

Мудборд

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

Фрагмент мудборда

На каждой показали полярно разные примеры для восьми оппозиций:

• Визуальный \ Текстовый
• Деловой \ Непринужденный
• Темный \ Светлый
• Красочный \ Монохромный
• Плотный \Воздушный
• Большие заливки \ Точеечные акценны
• Плоский \ С тенями
• Скругленный \ Прямоугольный

Визуальный \ Текстовый

Красочный \ Монохромный

Темный \ Светлый, Скругленный \ Прямоугольный

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

Первая и вторая итерации

Итог

Макеты переданы в разработку, заказчик ослался доволен.

Студент. Программа курса Создание курса. О курсе. Hover Создание курса. Вопросы