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

    Вывода два:
    1) Продукт пользуется спросом да еще и настолько, что пользователь готов пренебречь неудобством
    2) Адаптив мобилки крайне необходим
  • Что я решала?
    Упростить навигацию пользователя. Добавить понятный текст. Убрать лишний функционал ровно настолько, чтобы стало еще удобнее пользоваться.

    Договориться с отделом верстки ( бэкэндом и фронтэндом о возможностях ). Мы говорили на бутстрап - языке, что упростит и сократит время в несколько раз.
  • Какой был процесс?
    Так как никаких наработок продукта не было, делала все ЛК с нуля, ориентируясь на действующий продукт.
    Составила карту из скринов сайта (наработок не было), просмотрела все и сразу подсветила косяки верстки форм и сокращение таблиц. Начала собирать UI-kit, создавая параллельно компоненты и мастер-компоненты. Затем отдавая ЛК, делала правки и собирала параллельно другое ЛК.
ЛК ученик
У платформы есть несколько типов коллекции, которая подключается по требованию учебного учреждения.
ЛК Препод
Функционала больше. Было предложено отражение режима "забота препода", заключающая в себя поставить вперед все вкладки, связанные с учениками выше, чем они стоят в настоящее время.
ЛК Сотрудник
Мое изобретение*
Модальные окна
Несколько мастер-компонентов, для разных размеров экранов, согласованных с верстальщиками
Автоматизация рутины
Роли в ЛК разные, но где-то есть схожие компоненты. Была версия создать один мега-супер компонент, но там началась путаница. Поэтому я решила собрать 4 матки для каждой ЛК

Итак задачи:
  1. Собрать все роли ЛК и Модалки
  2. Соединить все похожие в Матку, отличающиеся скрыть / подписать
  3. Будет 2 матки: ЛК и модалки
  4. Создать мастер компонент из компонентов, без отступов в ней
  5. Задать отступ внизу
  • ИТОГО:
    • Создание UI- kit на 100%
    • Десктоп и мобильная версия
    • Cборка мастер - компонентов ЛК и модальных окон
Made on
Tilda