ErgoMS —
образовательный модуль
UX/UI-дизайн образовательного модуля системы ErgoMS для студентов и преподавателей. Личный кабинет, курсы, сценарии обучения и интерфейсы управления учебным процессом — собраны в единую, спокойную и читаемую систему.
Учебная среда для двух ролей
ErgoMS — это образовательный модуль для системы управления, ориентированный на студентов и преподавателей. В рамках проекта я разработала UX/UI-дизайн ключевых экранов: личный кабинет студента, список курсов, страницу курса, интерфейсы преподавателя и элементы управления образовательным процессом.
Главный вызов модуля в том, что у двух ролей разные цели на одних и тех же данных. Студенту важно быстро понять, что делать дальше, а преподавателю — держать под контролем курсы, задания и группы. Интерфейс должен был обслуживать оба сценария, не раздваиваясь визуально.
Понятный и чистый интерфейс
Основная задача — создать понятный и визуально чистый интерфейс, который помогает студентам быстро находить учебные материалы, а преподавателям — управлять курсами, заданиями и студентами. Особое внимание уделялось структуре, навигации, читаемости и минимизации лишних действий.
Чтобы интерфейс не выглядел перегруженным, я держала строгую сетку, спокойный фон и один акцентный цвет, который ведёт внимание к главным действиям — продолжить обучение, проверить задание, опубликовать курс.
Сценарии, экраны, система
Я вела проект от исследования до финального прототипа: проработала пользовательские сценарии и user flow, собрала wireframes, спроектировала экраны для обеих ролей и свела их в общий UI Kit. Отдельно продумала состояния компонентов — как ведут себя карточки курсов, кнопки и поля ввода в разных ситуациях.
От аудитории до прототипа
Процесс включал анализ целевой аудитории, проработку пользовательских сценариев, создание user flow, wireframe-макетов, UI Kit, дизайн-системы и интерактивного прототипа. Также я продумала состояния компонентов, карточки курсов, кнопки, поля ввода и основные элементы навигации.
Кто работает в системе и с какой целью
Две роли решают разные задачи на одних и тех же данных — с этого разделения и началось проектирование.
Цель — не теряться в учёбе: сразу видеть, что делать дальше, и держать свой прогресс под рукой.
- Проходить курсы и уроки, возвращаться к материалам
- Выполнять задания и пересдавать их при неудаче
- Следить за оценками и ближайшими дедлайнами
- Планировать неделю через календарь
Цель — держать под контролем курсы, задания и группы, тратя на рутину минимум действий.
- Создавать, наполнять и публиковать курсы
- Зачислять студентов вручную или импортом CSV
- Проверять задания и вести журнал оценок
- Смотреть аналитику успеваемости по группам
Сценарии и логика переходов
Нажмите на схему, чтобы рассмотреть её целиком.
Прежде чем рисовать экраны, я собрала карту всей системы и три ключевых сценария. Так стало видно, где расходятся пути ролей и какие шаги можно убрать, чтобы пользователь быстрее доходил до цели.
Структура до визуального слоя
Нажмите на макет, чтобы рассмотреть его целиком.
На этапе проектирования были созданы wireframes для проверки структуры и логики взаимодействия до перехода к визуальному дизайну. На чёрно-белых макетах удобно проверять расположение блоков и приоритеты, пока их не перекрывает цвет и типографика.
Шесть ключевых экранов
Нажмите на экран, чтобы рассмотреть его целиком.
Цвет, шрифт, компоненты
Базы данных
Одна система — два понятных сценария
Студент и преподаватель работают в едином визуальном языке, но видят интерфейс под свою задачу. Спокойный фон, чёткая навигация и один акцентный цвет помогают сосредоточиться на учёбе, а не на поиске нужной кнопки.