Дизайн и разработка веб-портала «Спецресурс»: 4 ролевые модели за 2–3 месяца

О клиенте

«Спецресурс» из Красноярска занимается аутсорсингом персонала. Компания помогает крупным торговым сетям быстро закрывать потребность в сотрудниках на конкретные даты и смены.

Для автоматизации процессов у «Спецресурса» есть веб-портал. Он связывает поставщика персонала и контрагентов и ведёт весь цикл: заявка на выход сотрудника, подтверждение смены, расчёт зарплаты, финансовые документы.

С чем пришёл клиент

Старый портал написал собственный разработчик клиента на Python. По сути это были простые таблицы без дизайна, без продуманного UX и без админ-панели. Любая правка требовала программиста.

Сотрудники, которых выводят на смены, доступа к системе не имели вовсе.

Цели проекта

1. Сделать современный веб-портал для управления заявками, выходами сотрудников и финансовыми документами.
2. Заменить устаревший интерфейс из простых таблиц без продуманного UX/UI.
3. Спроектировать удобную структуру личного кабинета для менеджеров, сотрудников и контрагентов.
4. Упростить подачу и обработку заявок, чтобы пользователи быстрее находили нужные разделы и выполняли основные действия.
5. Сделать административную панель, чтобы клиент сам управлял данными и вносил изменения без разработчика.

На всё, от дизайна до готовой платформы для всех пользователей, было 2–3 месяца.

Особенности проекта

Главная сложность: система многоролевая. В ней одновременно работают разные пользователи, и у каждого свои права и сценарии.

В итоге получилось четыре ролевые модели со своим функционалом и ограничениями: администратор, менеджер, суперменеджер и магазин. Роль сотрудника добавили уже в процессе, и всё для неё делали с нуля.

Были и другие трудности.

• Нет готовых решений. Система клиента совмещает портал для взаимодействия и учётную систему со своей бизнес-логикой, поэтому всё придумывали с нуля.
• Специфика аутсорсинга персонала. Пришлось детально разобраться, как работают заявки, смены, роли и финансовые документы. Даже на этапе ТЗ договориться, как всё должно работать, было непросто.

Как шла работа

Этап 1. Техническое задание и майнд-карта

Начали с подробного технического задания. Система полностью кастомная, и целиком описать её можно только после релиза. Поэтому на первом этапе определили технологический стек, основные разделы под текущие потребности клиента и главные модули с их логикой.

Параллельно рисовали майнд-карту, то есть карту путей пользователя. Она показывает все внутренние ссылки, переходы и сценарии в виде простого скелета со стрелками. На ней зафиксировали ограничения для каждой роли, новый функционал и доработки, взаимодействие всех типов пользователей.

Ветка администратора начинается со страницы авторизации и регистрации и расходится на главную, смену контрагентов, заявки, ЛУВРы и выгрузку. Здесь же договорились о двух главных сущностях. Заявка появляется, когда в торговую точку нужно найти сотрудника. ЛУВР подтверждает, что заявку отработали, и без заявки существовать не может.

В заявке предусмотрели дату, объект с выпадающим списком адресов, дневную или ночную смену и список нужных сотрудников с умным поиском по фамилии и табельному номеру.

Для ЛУВРа расписали поля: код, формат и адрес торговой точки, вид работ, плановое и фактическое время, табельный номер из заявки и по факту, ФИО с кнопкой звонка, рейтинг сотрудника и оценку услуг.

Для выгрузок заложили фильтры по городу и по типу исполнителя (самозанятый, ИП) и три вида отчётов: зарплата, сверка и число закрытых вакансий по менеджерам. В комментариях к карте записали решения по удобству: показывать таблицы по 500 строк с пагинацией, выделять цветом статус заявки в ЛУВРах (персонал найден или нет) и помечать табельный номер, если он повторяется в одну дату и время: это возможная ошибка.

Этап 2. Прототипы

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

Для администраторов, менеджеров и магазинов сделали только десктопную версию: создавать заявки и работать с большими таблицами на телефоне неудобно. Сотрудники постоянно в движении, поэтому им сделали полноценную мобильную версию.

В серых прототипах собраны главная, электронная заявка, список сотрудников с фильтром по ошибкам в данных и чат с подсказками «Чем вам помочь?».

Этап 3. Дизайн

Показали три варианта визуального оформления: от светлого до тёмного, с промежуточными тонами. Клиент выбрал подходящий, и мы доработали:

• светлую и тёмную тему;
• инфографику и диаграммы;
• поведение элементов при кликах и наведении;
• таблицы с большим объёмом данных;
• мобильную версию для сотрудников без ховеров, только клики и статика.

Две темы нужны, чтобы каждый пользователь выбрал интерфейс под свои привычки и время суток. На макете ЛУВРов в тёмной теме видны фильтры, сортировка, календарь и список видов работ: кассир, выкладка, мобильный продавец, грузчик.

Этап 4. Разработка

Самый ёмкий и сложный этап. Разработчик занимался подгрузкой документов, отображением данных, логикой заявок и ролевыми ограничениями. По ходу работы решили добавить внутри платформы чат и блок частых вопросов.

Что изменилось в портале

Интерфейс и навигация

Табличный, «топорный» вид заменили современным интерфейсом. Слева появилось боковое меню: главная, заявки, ЛУВРы, выгрузка, создание сотрудника, список сотрудников, чат и настройки. Чтобы перейти в другой раздел, больше не нужно возвращаться в главное меню. Кликов стало меньше, путь короче.

На главной менеджер видит кнопки «Создать заявку» и «Смотреть ЛУВРы», счётчики заявок и не вышедших сотрудников за период, диаграмму вышедших сотрудников по типам персонала и уведомления.

Новая логика заявок

Раньше в заявке были только дата и время. Мы добавили:

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

На экране «Электронная заявка на вывод персонала» менеджер выбирает смену или график, даты вывода и завершения, объект, тип персонала и количество людей. Для каждого сотрудника задаётся график по дням недели со временем начала и окончания, табельный номер и комментарий. Строку можно продублировать или удалить. Если поле пустое, форма подсветит его и попросит ввести все данные.

Автоматическая цепочка

Заявка попадает к сотруднику, он подтверждает её в личном кабинете, и только после этого она считается принятой. Так вся цепочка «магазин → менеджер → сотрудник → выход на смену» проходит автоматически.

Диаграмма статистики

Магазин видит, сколько сотрудников выходило на точку за день, неделю, месяц или любой другой период. С такой диаграммой проще планировать и сравнивать показатели.

Личный кабинет сотрудника

Теперь у сотрудников есть свой кабинет с мобильной версией. В нём можно:

• смотреть доступные вакансии и выбирать подходящие;
• откликаться на заявки;
• принимать или отклонять назначенные смены;
• проходить небольшое обучение прямо в приложении.

Мобильный интерфейс проработали отдельно, чтобы заявки и вакансии были под рукой в смартфоне, без привязки к рабочему месту. Внизу экрана пять вкладок: заявки, вакансии, чат, обучение и профиль. В принятых заявках на сегодня есть кнопка «Подтвердить прибытие». Вакансии ищут по должности, компании и дате, а после отклика появляется сообщение «Вакансия успешно принята!».

Админ-панель

Основные функции настраиваются через админ-панель: изменения вносятся быстро, без разработчика и кода.

Чат и база знаний

Во внутреннем чате общаются сотрудники, магазины и администратор. К сообщениям можно приложить скриншоты и файлы. В блоке частых вопросов собраны ответы на типовые ситуации: как создать заявку, как связаться с администратором.

Результат

От начала работ до тестирования прошло 2–3 месяца.

Сверх исходных целей в портале появились чат и база знаний.

После тестирования, где клиент проверял механизмы, а мы доводили детали, портал запустили в работу.

Из каких шагов обычно складывается такой проект, мы описали в статье про этапы разработки. Похожие задачи решаем в услуге «Разработка личного кабинета».