Спроектировали интерфейс для онлайн-школы с функционалом:
- Конструктор курсов и уроков
- Аналитика по финансам и обучению
- 7 видов уроков + итоговые тесты
- Оплата курсов и выплаты авторам
- Тикетная система поддержки
Публичная часть
Сделали макеты страниц по согласованным прототипам для публичной части. Использовали ранее проработанные прототипы интерфейса, цветовую палитру, типографику.
Каталог курсов
В каталоге реализовали навигацию по категориям, поиск по названию, фильтрацию, сортировку. В карточки курсов добавили категорию, автора, рейтинг, стоимость и возможность добавить в избранное.
Страница курса
Структура страницы в формате лендинга отвечает на вопросы: что предлагаем, что вы получите в результате, на каких условиях и что нужно сделать, чтобы приобрести курс.
Регистрация пользователей
При оплате курса пользователь "по пути" создаёт учётную запись. Все преподаватели обязательно прикрепляют подтверждающие документы и проходят ручную модерацию.
Личный кабинет
ЛК предназначен для регулярного использования, учтены привычные паттерны поведения пользователей и привычное расположение элементов для интуитивного восприятия.
Управление курсами
Таблицы — удобное представление для списка курсов, пользователей, уроков в библиотеке. Каждый элемент имеет контекстное меню операций над ним: изменить, удалить, архивировать. По таблицам предусмотрены поиск, фильтрация и навигация по страницам.
Конструктор уроков
В конструкторе можно добавить неограниченное количество уроков и модулей, менять их местами, переименовывать и удалять.
Учебные группы
В архитектуре предусмотрели учебные группы, чтобы запускать обучение параллельно в нескольких группах по одному курсу. В группах может быть ограниченно количество участников и конкретная дата старта обучения — в зависимости от настроек.
Состояния интерфейса
В дизайне предусмотрены основные состояния элементов, страниц, модальные окна, страницы успешного и неуспешного статуса — что у разработки не осталось вопросов, как должен вести себя интерфейс в том или ином случае.
Логика и блок-семы
Начали работу с того, что определили список ролей пользователей. По каждой роли определили список функционала. На блок-схемах согласовали пользовательские сценарии под каждую роль. Таким образом, определили общие границы проекта.
Прототипы интерфейса
Когда было общее понимание логики работы платформы и функционал пользователя, сделали черновые прототипы интерфейса. Прототипы для каждой роли: гость, слушатель, преподаватель, админ, контент-менеджер. Также сделали прототипы мобильных версий.
ACL-политики
Чтобы заложить правильную архитектуру приложения, в процессе согласования требований определили правила разграничения доступа к разделам для разных ролей пользователей — в наглядной таблице. ACL будут использованы командой разработки при проектировании.
Цветовая палитра
Создали цветовую палитру проекта с учётом контрастности, определили набор используемых оттенков для консистентности цветов в проекте.
Состояния UI компонентов
Предусмотрели необходимые состояния основных UI элементов, чтобы у фронтенд-разработчиков не было вопросов, как должен вести себя интерфейс пользователя в той или иной ситуации.
UI-kit
Мы системно подходим к дизайну, поэтому во всех проектах делаем необходимые UI компоненты, которые переиспользуются при доработки и масштабировании проекта. Использование компонентов и вариантов также ускоряет команду разработки.
Типографика
Определили подходящую шрифтовую пару для заголовков, составили правила типографики для разных размеров экрана, с учётом адаптивности.
Дизайн E-mail уведомлений
Провели работу с текстами, предусмотрели системные ошибки, уведомления и шаблоны email-писем.
Сертификаты об обучении
Сделали дизайн сертификата о прохождении обучения, который генерируется при достижении 100% прохождения курса.
В результате спроектировали интерфейс, сделали и согласовали дизайн-концепцию. Реализовали и опубликовали первую версию образовательной платформы. Вторым этапом планируется функционал внешних преподавателей: каждый специалист после модерации сможет предлагать свои обучающие курсы в общем каталоге.
Нужен дизайн интерфейса?
Опишите задачу в свободной форме, в течение часа мы отправим стоимость дизайна. Пишите, мы открыты интересным проектам.
mail@cron.design
telegram: @сrondesign
