Адаптивный редизайны личных кабинетов платформы проверки документов

Десктопный продукт, который обеспечивает проверку документов студентов, которые могут загружать разные роли : сотрудник, препод, студент, администратор.
От меньших возможностей к большим, соответственно.

Контекст

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

Вывода два:
1) Продукт пользуется спросом да еще и настолько, что пользователь готов пренебречь неудобством
2) Адаптив мобилки крайне необходим

Что я решала?

Упростить навигацию пользователя. Добавить понятный текст. Убрать лишний функционал ровно настолько, чтобы стало еще удобнее пользоваться.

Договориться с отделом верстки ( бэкэндом и фронтэндом о возможностях ). Мы говорили на бутстрап - языке, что упростит и сократит время в несколько раз.

Какой был процесс?

Т.к. никаких наработок продукта не было, пришлось делать ЛК с нуля, ориентируясь на действующий продукт. Составила карту из скринов сайта (наработок не было), просмотрела все и сразу подсветила косяки верстки форм и сокращение таблиц. Дальше начала собирать UI-kit, создавая параллельно компоненты и мастер-компоненты. Затем отдавая ЛК, делала правки и собирала параллельно другое ЛК.

ЛК ученик

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

ЛК Препод

Функционала больше. Было предложено отражение режима "забота препода", заключающая в себя поставить вперед все вкладки, связанные с учениками выше, чем они стоят в настоящее время.

ЛК Сотрудник

Модальные окна

Несколько мастер-компонентов, для разных размеров экранов, согласованных с верстальщиками

Автоматизация рутины

Роли в ЛК разные, но где-то есть схожие компоненты. Была версия создать один мега-супер компонент, но там началась путаница. Поэтому я решила собрать 4 матки для каждой ЛК

1. Собрать все роли ЛК и Модалки
2. Соединить все похожие в Матку, отличающиеся штуки - скрыть / подписать
3. Будет 2 матки: ЛК и модалки
4. Создать мастер компонент из компонентов, без отступов в ней
5. Задать отступ внизу

UI kit:

Основные составляющие кита были собраны на 100% Компоненты были составлены на 100%. Собирала, опираясь на Material Desing

ИТОГО:

Десктоп и мобильная версия

Cсборка мастер - компонентов ЛК и модальных окон

Создание UI- kit