Публичная часть

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

Каталог курсов

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

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

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

Регистрация пользователей

При оплате курса пользователь "по пути" создаёт учётную запись. Все преподаватели обязательно прикрепляют подтверждающие документы и проходят ручную модерацию.

Личный кабинет

ЛК предназначен для регулярного использования, учтены привычные паттерны поведения пользователей и привычное расположение элементов для интуитивного восприятия.

Управление курсами

Таблицы — удобное представление для списка курсов, пользователей, уроков в библиотеке. Каждый элемент имеет контекстное меню операций над ним: изменить, удалить, архивировать. По таблицам предусмотрены поиск, фильтрация и навигация по страницам.

Конструктор уроков

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

Учебные группы

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

Состояния интерфейса

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

Логика и блок-семы

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

Прототипы интерфейса

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

ACL-политики

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

Цветовая палитра

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

Состояния UI компонентов

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

UI-kit

Мы системно подходим к дизайну, поэтому во всех проектах делаем необходимые UI компоненты, которые переиспользуются при доработки и масштабировании проекта. Использование компонентов и вариантов также ускоряет команду разработки.

Типографика

Определили подходящую шрифтовую пару для заголовков, составили правила типографики для разных размеров экрана, с учётом адаптивности.

Дизайн E-mail уведомлений

Провели работу с текстами, предусмотрели системные ошибки, уведомления и шаблоны email-писем.

Сертификаты об обучении

Сделали дизайн сертификата о прохождении обучения, который генерируется при достижении 100% прохождения курса.