Адаптивный редизайны личных кабинетов платформы проверки документов
- О чем продукт?ВКР‑Смарт — платформа для проверки и сопровождения документов студентов.
В системе несколько ролей: сотрудник приёмной комиссии, преподаватель, студент, администратор.
Каждая роль работает в своём личном кабинете с разным набором прав и сценариев.
Это по сути внутренний бизнес‑сервис с множеством таблиц, форм и статусных операций. - КонтекстИзначально платформа развивалась как десктопное web‑приложение с большим количеством таблиц и сложных форм. Адаптивной версии для мобильных устройств не было.
По данным Яндекс.Метрики оказалось, что около 30% пользователей заходят на платформу с мобильных устройств и готовы терпеть неудобство ради сервиса.
Из этого сделали два вывода:- Продукт востребован и активно используется.
- Адаптив под мобайл критически необходим, иначе мы теряем удобство и часть активности.
- Что я решала?
- Упростить навигацию и сценарии для пользователей разных ролей.
- Перепроектировать ключевые формы и таблицы так, чтобы в них было проще работать на разных экранах.
- Сделать адаптивные версии кабинетов (desktop + mobile) на базе единого UI‑кита.
- Согласовать решения с разработкой (backend, frontend) и учесть ограничения текущего технологического стека (Bootstrap).
- Какой был процесс?1. Аналитика и карта текущего продукта
- Собрала карту интерфейсов из скриншотов рабочей версии (готовых макетов не было).
- Проанализировала верстку форм и таблиц, выделила основные проблемы: дублирующиеся элементы, перегруженные экраны, неочевидные статусы.
- Сформулировала предложения по упрощению навигации и сценариев для каждой роли.
- Проговорила решения с разработкой: на уровне «языка Bootstrap» договаривались, какие паттерны и компоненты разумно использовать, чтобы не усложнить реализацию и сократить сроки.
- Параллельно с редизайном личных кабинетов начала собирать UI‑kit: базовые стили, компоненты, master‑компоненты.
- Для каждой роли собрала отдельные матрицы экранов и модальных окон, чтобы минимизировать повторяющуюся ручную работу и обеспечить единый язык интерфейса.
- Передавала готовые кабинеты в разработку, вносила правки по результатам ревью, дополняла и уточняла компоненты.
- На базе UI‑кита собрала адаптивы для desktop и mobile.
ЛК ученик
- Описала структуру кабинета с учётом разных «коллекций» (наборов модулей), которые подключаются по требованию учебного учреждения.
- Сфокусировала интерфейс на понятных пользователю задачах: загрузка документов, статусы проверок, уведомления.
ЛК Препод
- В этой роли больше функциональности.
- Предложила режим «заботы о студентах»: все вкладки, связанные с учениками, вынесены выше и становятся приоритетными.
- Пересобрала таблицы и фильтры так, чтобы основные действия были в одном-двух кликах.
ЛК Сотрудник
- Спроектировала кабинет с нуля, опираясь на сценарии работы сотрудников и ограничения по данным.
- Развела зоны «оперативной работы» и «справочной информации», чтобы уменьшить визуальный шум.
Модальные окна
Роли в кабинетах разные, но многие модальные окна и элементы похожи.
Задачи были такие:
В итоге большую часть рутинной работы по созданию новых экранов и состояний удалось свести к переиспользованию готовых master‑компонентов.
Задачи были такие:
- Собрать все роли ЛК и модалки.
- Объединить похожие компоненты в матрицы, мелкие отличия вынести в скрытые слои/варианты.
- Развести две матрицы: экраны ЛК и модальные окна.
- На их основе собрать master‑компоненты без лишних ручных правок.
В итоге большую часть рутинной работы по созданию новых экранов и состояний удалось свести к переиспользованию готовых master‑компонентов.
Автоматизация рутины
Роли в ЛК разные, но где-то есть схожие компоненты. Была версия создать один мега-супер компонент, но там началась путаница. Поэтому я решила собрать 4 матки для каждой ЛК
Итак задачи:
Итак задачи:
- Собрать все роли ЛК и Модалки
- Соединить все похожие в Матку, отличающиеся скрыть / подписать
- Будет 2 матки: ЛК и модалки
- Создать мастер компонент из компонентов, без отступов в ней
- Задать отступ внизу
- ИТОГО:
- Собран и внедрён UI‑kit продукта (компоненты, стили, состояния).
- Сделаны desktop‑ и mobile‑версии личных кабинетов для основных ролей.
- Систематизированы модальные окна и повторяющиеся элементы через master‑компоненты и матрицы экранов.
