Блоки CRM-системы для HR Prime

О проекте
Дизайн разделов CRM-системы для автоматизации рекрутинга: ведение вакансий, управление кандидатами и взаимодействие с заказчиками.

Исходные данные
  • Готовая дизайн-система платформы (цвета, типографика, базовые компоненты).
  • Описания пользовательских сценариев и функционала для каждого раздела.

Блок «Вакансия» — ключевые задачи
Реализовать экран, в котором рекрутер может:
• просматривать и редактировать параметры вакансии;
• управлять состояниями (активна, приостановлена, закрыта) и публикацией;
• работать с поиском и списком вакансий;
• назначать участников процесса (рекрутеры, заказчики, BDM);
• учитывать ограничения через стоп-листы компаний и кандидатов;
• быстро обращаться к схеме направлений и истории изменений;
• работать с параметрами «О вакансии», «О кандидате» и текстовым содержанием вакансии в единой структуре.

Блок «Кандидат» — ключевые задачи
Создать экран, который наследует паттерны блока вакансии, но фокусируется на человеке:
• карточка кандидата с контактами и основными действиями;
• привязанные вакансии и статусы по ним;
• резюме с несколькими версиями по источникам;
• поиск кандидатов и списки (мои / все) с быстрым доступом к ключевым параметрам.

Итог
Разработаны два ключевых раздела CRM: «Вакансия» и «Кандидат». Оба экрана опираются на единую сетку и паттерны, используют цветовое кодирование статусов и слоистую карточную структуру, а основные сценарии рекрутера (поиск, смена статуса, работа с резюме и участниками процесса) доступны прямо с рабочих экранов без лишних переходов.
Элементы блока вакансии
Строка вакансии собрана как компактная карточка с фокусом на названии и диапазоне зарплаты. Справа вынесены ключевые действия: редактирование, отметка «горячей» вакансии и трехсостоянный переключатель доступа, где текущее состояние подсвечено цветом. Кнопка «Опубликовать» отделена от других контролов и читается как целевое действие, а аккуратный диапазон зарплаты с иконкой подсказки позволяет быстро понять вилку оффера, не проваливаясь в детали.
Параметры вакансии и кандидата сгруппированы в два отдельных блока с одинаковой логикой: слева иконка и название поля, справа — значения в виде цветных «чипов». Такой формат позволяет визуально собрать много структурированной информации и при этом сохранить читаемость за счет повторяющегося паттерна. Разные цвета меток подчеркивают тип данных (локация, формат работы, навыки) и упрощают сканирование, а сворачиваемые заголовки «О вакансии» и «О кандидате» помогают управлять объемом информации на экране.
Длинный текст вакансии разбит на несколько смысловых секций: обязанности, требования, условия и дополнительные комментарии. Каждая секция оформлена как отдельная карточка с вертикальным цветным маркером и пиктограммой, благодаря чему текст перестает выглядеть «простыней» и легче читается. Кнопка «Скопировать» позволяет быстро передавать содержимое во внешние каналы (писать письмо кандидату, размещать на площадке), превращая этот экран не только в просмотр, но и в рабочий инструмент для рекрутера.
Экран связывает выбранную вакансию с конкретными людьми и списками ограничений. Слева остается знакомый список вакансий с поиском, справа блоками собраны роли: рекрутеры, заказчики, BDM и стоп-листы. У каждого блока свой заголовок и зона с карточками людей, а яркие кнопки «Добавить» и ссылки на стоп-листы выделены цветом как основные точки действия. За счет этого рекрутер понимает, кто уже привязан к вакансии и какие ограничения действуют, не меняя контекст и не переходя в отдельные настройки.

Итоговый дизайн блока
Элементы блока кандидата
Карточка кандидата объединяет в одном блоке краткий профиль и ключевые контакты. Верхняя зона с аватаром, ФИО и возрастом формирует быстрый портрет человека, а три основных действия вынесены в отдельные кнопки, чтобы рекрутер сразу видел, что можно сделать дальше. Информация разбита на два столбца: слева — ожидания и опыт кандидата, справа — кликабельные контакты и мессенджеры, что упрощает переход к коммуникации в один клик.
Экран вакансии построен вокруг истории взаимодействий с кандидатом: события выстроены вертикально и читаются как лента, где сразу видны комментарии, письма и встречи. В верхней части размещены основные параметры вакансии и статус кандидата с выпадающим списком, чтобы можно было оперативно менять этап. Цветовые акценты, иконки типов действий и мягкая карточная структура помогают отличать системные события от живых комментариев рекрутера и быстрее восстанавливать контекст.
Полное резюме оформлено как последовательность логических блоков: контакты, опыт, ключевые навыки, образование, повышение квалификации и дополнительные данные. Наверху реализована система вкладок с датами и источниками резюме, что позволяет хранить несколько версий и быстро между ними переключаться. Опыт работы выделен отдельными карточками с вертикальным цветовым маркером, навыки представлены тегами, а каждое смысловое разделение поддержано заголовком и отступами, благодаря чему резюме легко просматривается сверху вниз без визуального шума.
Интерфейс поиска построен по принципу двух параллельных списков: слева — вакансии, справа — кандидаты. В обоих списках сверху расположены строки поиска, а в зоне управления использованы привычные элементы: фильтр для вакансий и переключатель «Мои / Все» для кандидатов. Активные элементы подсвечиваются цветом, выбранные строки получают мягкий фон, а аватары и зарплаты в списке кандидатов дают достаточно контекста, чтобы рекрутер мог быстро сопоставлять людей и позиции, не проваливаясь в карточки.
Итоговый дизайн блока
Made on
Tilda