Многомодульный web‑сервис с личными кабинетами и сложной ролью доступа (администратор, преподаватель, студент)
До
- О чем продукт?Платформа с эксклюзивной и общедоступной специализированной литературой для колледжей. Поддерживает разные роли : преподаватель, студент, администратор.
- Контекст проблемыПлатформа хорошо закрывала потребности сотрудников колледжа, но становилась неудобной для конечных пользователей. Снижалась активность студентов (меньше заходов и прочтённых материалов), по опросу NPS/удовлетворённости продукт получил 11% положительных оценок. Маркетинг увидел риск падения продлений/продаж.
- Что я решала?Исследование
- проанализировала логи и сценарии текущего использования;
- собрала основные проблемы (сложная навигация, перегруженные формы, непонятные статусы).
Гипотезы и согласование- сформулировала UX‑гипотезы по упрощению навигации, форм, системы оповещений, шапки, подвала и карточек контента;
- защитила решения перед продукт‑менеджером и руководителем направления;
- уточняла детали с разработкой, юристами и редакторами (тексты, юридические ограничения).
Доставка- подготовила прототипы и спецификацию для разработки;
- участвовала в внедрении и уточнении поведения интерфейса.
- Какой был процесс?Сначала мне дали свободу воли, чтобы я провела собственное исследование и сделала свои предложения. Затем проходило многоступенчатое согласование с командой продуктов, руководителем отдела, генеральным директором.
После того, мы собрали команду из маркетолога, коммуникационного дизайнера, продукта, редактора и отдела продаж, чтобы скорректировать необходимые для продукта детали.
Так же, я связывалась с командой разработки для уточнения деталей верстки, юристом и редактором.
Кейс "Ученик"
Или решение главной проблемы - плохой удовлетворенности студентами.
Гипотеза - плохая навигация, непонятный интерфейс продукта.
Гипотеза - плохая навигация, непонятный интерфейс продукта.
Новый USER FLOW
Новый USER FLOW для сценария "ученик в поиске курса" задал дополнительные вопросы, которые будут разработаны позже. Пока остановимся на этом варианте.
Пересобираем сайдбар
Что изменилось:
- 12 пунктов превратились в 7 сгруппированных по логике
- Счётчики (Х) показывают, где есть активность
- «Дистанционная работа» стали называться «Мои курсы» (понятный термин)
- Разделитель между учёбой и настройками
Карточка курса
Карточка должна содержать инфу, которая облегчит считывание срочности задачи, для рассчитывания времени, но при сборке старого дизайна это учли. Так же есть ненужная информация, которая создает шум, а не значимость. Разберем по пунктам:
Было
Было
- Лекция 58158» (ID)
- Название организации в каждой карточке
- Полное ФИО преподавателя
- Нет типа задания
- Нет дедлайна
- Нет прогресса
- Нет статуса новизны
- 1 вариант сортировки
- Убран ID, студенту он не нужен
- Убрано название колледжа,студент знает, где учится
- Сокращённое имя преподавателя
- Тег: «Сдать работу» / « Только просмотр»
- Дедлайн с точным временем
- Прогресс-бар
- Бейдж «Новое»
- Фильтры + сортировка
Внутренний контент
Собран таким образом, чтобы сохранялась иерархия важности:
1) Задание
2) Материалы
3) Сдача работы
Добавлен:
Подсвечены самые важные моменты:
Всё это направлено на цель - держать руку на пульсе, распределять время и давать хоть какой-то фитбэк преподавателю о том, что ученик преступил к заданию.
1) Задание
2) Материалы
3) Сдача работы
Добавлен:
- Прогресс изучения материалов.
- Вопрос преподавателю.
- Возможность сохранить в черновики, если ученик не уверен в ответе или не закончил работу.
Подсвечены самые важные моменты:
- Дедлайн (до 3 дней становится красным).
- Прогресс в процентах.
- Дата просмотра материалов.
Всё это направлено на цель - держать руку на пульсе, распределять время и давать хоть какой-то фитбэк преподавателю о том, что ученик преступил к заданию.
Кейс "Заявка на тестовый доступ"
Результат:
- Стейкхолдеры одобрили упрощённую форму, несмотря на культуру “ничего не менять”.
- Барьер входа снизился, конверсия заявки и первое впечатление от сервиса стали выше.
На скрине — очень длинная и перегруженная форма заявки.
Что сделала я :
Что сделала я :
- Разобрала с PM и юристами каждое поле по принципу:
- “Зачем это? Что будет, если убрать?”
- Оставила только данные, без которых заявку нельзя обработать (контакты + данные организации).
- Юридический текст сократили, подробности вынесли по ссылкам.
- Собрали компактную версию формы: один экран, понятная структура, один основной CTA.
Кейс "Лицо продукта"
Адаптивы
Адаптивы для 1200 / 760 / 320 позволили использовать один продукт на рабочих компьютерах, планшетах и телефонах студентов без отдельной разработки.
Для каждого типа контента (книги, мультимедиа, новости) были продуманы собственные фильтры и состояния.
Все фильтры, шапка и подвал были переосмыслены, пересчитаны и пересогласованы.
Для каждого типа контента (книги, мультимедиа, новости) были продуманы собственные фильтры и состояния.
Все фильтры, шапка и подвал были переосмыслены, пересчитаны и пересогласованы.
Автоматизация рутины
На базе Bootstrap‑сетки и гайдов Material Design 3 собрала UI‑kit и ядро дизайн‑системы:
Это позволило быстро масштабировать продукт и обеспечило единый язык интерфейса для всех модулей.
- 9 master‑компонентов (страницы),
- десятки атомарных компонентов (кнопки, поля, фильтры, карточки) с состояниями.
Это позволило быстро масштабировать продукт и обеспечило единый язык интерфейса для всех модулей.
Пример работы мастер
- компонента
- компонента
Если кратко: он состоит из обычных компонентов, которые в свою очередь состоят из ui-kit.
- На что опиралась?
- Документация: https://getbootstrap.com/docs/5.0/layout/grid/
- Документация https://m3.material.io/
- Статьи
- ИТОГО:
- Собран и внедрён UI‑kit продукта (компоненты, стили, состояния).
- Заложена и описана дизайн‑система: сетка, типографика, паттерны карточек и фильтров.
- Реализованы адаптивы для desktop, tablet, mobile. – Команда перешла на работу через компоненты и master‑страницы в Figma.
