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

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

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

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

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

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

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

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

- ученик;

- куратор;

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

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

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

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

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

Создание курса: о курсе

Создание курса: программа

Создание курса: создание галереи

Создание курса: онбординг

Статистика по школе: список курсов

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

Статистика студента

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

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

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

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

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

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

- Деловой \ Непринужденный

- Темный \ Светлый

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

- Плотный \Воздушный

- Большие заливки \ Точеечные акценны

- Плоский \ С тенями

- Скругленный \ Прямоугольный

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

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

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

Студент. Программа курса

Создание курса. О курсе. Hover

Создание курса. Вопросы