Карьерный портал Силовых машин

UX/UI
HR Tech
Конверсия
Mobile First
Карьерный портал Силовых Машин

Кадры решают всё. Кривой UX решает, что кадров не будет

Силовые машины — крупнейший производитель энергооборудования в России. 70% рынка РФ и СНГ, 13 000+ сотрудников, 5-е место в мире по объёму оборудования, клиенты в 57 странах. При этом карьерный сайт застрял в 2019 году и не конвертировал молодёжь в отклики. Проблема не в бренде, а в инструменте. Сайт не работал как воронка найма: 70% трафика приходило с телефона, но мобильная версия была непригодна для использования. Фильтры спрятаны, путь до заявки — 7 кликов, вакансии написаны на корпоративном языке. Задача: перепроектировать портал, чтобы нанимать 2000 человек в год сам без менеджеров, держащих кандидата за руку. Ограничения: строгий брендбук, 1С-Битрикс, запрет на изменение цветовой палитры.

Контекст проекта: ситуация, проблема, задача

Бенчмаркинг: что делают конкуренты

Прежде чем проектировать, разобрал три сильнейших HR-портала в промышленности: НЛМК, Северсталь и СИБУР. У каждого своя фишка, которую стоило присвоить. У НЛМК мощный фильтр прямо в шапке и разделение по направлениям — кандидат попадает в релевантные вакансии за один клик. Плюс Телеграм-канал для связи с HR, потому что молодёжь не звонит по телефону. У Северстали дизайн построен на людях. Раздел «Вдохновляем друг друга» с реальными фото сотрудников снимает скептицизм новичка, он видит будущих коллег. Визуальная чистота без перегруженного экрана. У СИБУРа карьерные траектории и программы быстрого роста прямо на сайте. Раздел «Кто работает в СИБУРе» с историями сотрудников о карьерном пути формирует доверие, где раньше были только строчки требований. Вывод: красивого сайта мало. Нужна работающая система фильтрации, структура вакансий, доказательства и путь от входа до заявки за минимум времени.

Бенчмаркинг НЛМК: навигация и фильтрация
Бенчмаркинг Северстали: трансляция ценностей и визуальная чистота
Бенчмаркинг СИБУР: карьерные траектории и социальное доказательство

Стратегия: продавать будущее, а не станки

Чтобы нанять молодёжь, показываем людей и перспективу. Сварщик 25 лет выбирает не между заводами, он выбирает между образом жизни. Поэтому в основу стратегии легли три принципа. Сервисный подход к навигации. Внедряем фильтрацию и структуру вакансий, потому что сайт должен работать как инструмент. Переходим от перечня обязанностей к историям успеха, карьерным трекам и социальным доказательствам. Кандидат должен увидеть себя через 3 года, а не инструкцию к должности. 70% трафика идёт с телефона. Сварщик ищет работу в метро на старом андройде, не сидит с макбуком в коворкинге.

Стратегия: сервисный подход и продажа будущего

Четыре столпа UX

Быстрый доступ. Фильтры по направлению, городу и обучению вынесены на главный экран — прямо под заголовком. Путь кандидата от входа на сайт до списка релевантных вакансий сокращён до 2 кликов. Информация упакована в блоки с иконками и списками, чтобы сканировать контент взглядом, не вчитываясь. Кандидат за секунду понимает, что ему предлагают и чем отличается одна должность от другой. Строгая сетка, воздух и контрастные шрифты. Интерфейс не перегружен графикой, поэтому выглядит современно и технологично, при этом остаётся легким для верстки в Битрикс. Фотографии живых сотрудников и настоящего производства. Это работает на доверие, потому что кандидат видит фактические условия и будущих коллег, а не нейросетевые улыбки из фотостоков.

UX нового портала: быстрый доступ, структура, чистота, реальность

Интерфейс для базового смартфона

Мобильная версия проектировалась как отдельный продукт. Пользователь это рабочий с не дорогим телефоном, у которого нет времени разбираться в меню. Крупные тач-зоны от 44px исключают случайные нажатия. Контрастные шрифты читаются на улице при ярком солнце. Эффекты при наведении полностью убраны, чтобы не мешать восприятию. Фильтры вынесены на первый экран. Кандидат находит вакансию сразу, без блужданий по меню. Как в Яндекс.Такси: зашёл, выбрал, откликнулся. В карточках вакансий убраны абстракции и корпоративный жаргон. Добавлены конкретные факты: что именно делаешь, на каком оборудовании работаешь, есть ли обучение.

Принципы мобильной адаптации

Сокращаем путь до вакансии на главной

Поисковая строка и фильтры расположены на главном блоке без скролла. Открываешь сайт и первое, что видишь: возможность мгновенно отфильтровать вакансии по направлению, городу и наличию обучения. Под фильтрами живой блок с реальными открытыми вакансиями. Не абстрактная кнопка «Смотреть все вакансии», а конкретные должности, которые компания нанимает прямо сейчас. Создаем восприятие Силовых машин как активной компании, а не пустого шаблона.

Новый главный экран портала — десктоп и мобильный

Блок с цифрами

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

Блок с ключевыми показателями компании

Гордость за профессию

Силовые машины производят уникальные вещи: первую российскую тихоходную паровую турбину для АЭС, газовые турбины собственной технологии, гидрогенераторы для крупнейших ГЭС страны. Если кандидат не знает, что стоит за словом «производство» — покажи ему. Формируем гордость за профессию ещё до первого рабочего дня и снимаем скептицизм. Здесь нет картинок из фотобанков. Только реальные цеха, реальные машины и реальные сотрудники.

Блок визуального доказательства: уникальные продукты компании

Ловим горячего кандидата

Стандартная воронка теряет кандидата между страницей «О компании» и списком вакансий — он изучил направление, загорелся, но не знает, куда нажать дальше. Решение: каждый тематический блок на главной дублирует вакансии своего направления прямо под описанием. Не нужно возвращаться на главную, искать раздел «Вакансии» и заново фильтровать. По расчётам, контекстный вывод повышает конверсию в отклик на 30%, потому что устраняет паузу между интересом и действием.

Контекстный вывод вакансий направления на главной странице

Женская аудитория без штрафов

Промышленные порталы указывают пол в вакансиях — «Вакансия для девушек» или используют исключительно мужские местоимения. Это прямое нарушение ТК РФ и штраф. Одновременно компания теряет женскую аудиторию, которая в ряде направлений составляет значительную долю квалифицированных кадров. Решение: в блоках навигации по направлениям используются фотографии и женщин, и мужчин в равной пропорции. Никаких указаний пола в интерфейсе. Визуал нейтрален по умолчанию. Компания привлекает более широкую аудиторию и одновременно защищена от юридических рисков.

Инклюзивный дизайн навигации и блок для студентов

Страница вакансий

Фильтр всегда виден сбоку от списка вакансий. Кандидату не нужно скроллить вверх для изменения параметров. Список позволяет считывать вакансии в 2 раза быстрее, чем карточный формат, потому что информация упорядочена строго горизонтально.

Страница вакансий: постоянный фильтр и список

Вход в профессию для тех, кто не знает терминологию

«Обмотчик электромашин» или «дефектоскопист НК» — новичок без опыта в промышленности не понимает, что это за профессии и чем именно занимается специалист каждый день. Вместо списка должностей внедрили блоки с фотографиями реального рабочего места и описанием работы простым языком. Укладываешь обмотки в пазы — вот как это выглядит, вот что ты делаешь руками, вот от чего зависит результат. Отдельная метка «С обучением» снимает главный страх человека без опыта: «меня не возьмут». Компания сама говорит: возьмём и научим.

Блок вакансий для кандидатов без опыта — карточный формат

Бесшовный отклик: убрали лишние шаги

Стандартный сценарий отклика на промышленных порталах выглядит так: нашёл вакансию → нажал «Откликнуться» → тебя выкинуло на пустую форму → вручную вписываешь должность → заполняешь пять полей → отправляешь. На каждом шаге часть кандидатов уходит. Мы убрали промежуточные шаги. При нажатии «Откликнуться» прямо на странице вакансии форма заявки подтягивает название должности автоматически. Кандидат вписывает только имя и почту. Меньше трения = меньше отказов на финальном шаге воронки.

Форма бесшовного отклика: поля заполняются автоматически

География: масштаб компании как аргумент

Силовые машины присутствуют в России, Беларуси, Узбекистане, Сербии, Турции, Индии, Вьетнаме и Колумбии. Это серьёзный аргумент для кандидата, который думает о карьере, а не просто о работе рядом с домом. Переработали интерфейс карты: переключатель мгновенно делит представительства и производства. Кандидат видит либо карту продаж (где работают менеджеры), либо карту заводов (где куют железо). Это убирает путаницу и позволяет соискателю сразу найти «свой» город. Блок географии работает на раздел «О нас», потому что наглядно показывает международный масштаб без слов.

Интерактивная карта присутствия компании

Редактор не сломает верстку

Битрикс — это жесткое ограничение. Контент-менеджеры будут добавлять статьи через стандартный редактор, и дизайн обязан выдерживать любой объём текста без поломки. Универсальный шаблон страницы статьи работает на любой длине материала: короткая новость, развёрнутый лонгрид, технический документ. Визуальная иерархия структурирует текст акцентными блоками — заголовки, врезки, списки без вмешательства дизайнера. В каждую статью встроен CTA-блок «Откликнуться на вакансию». Корпоративная новость, репортаж с завода, интервью с инженером — точку входа в воронку найма.

Верх страницы статьи: шапка и модульная сетка
Низ страницы статьи: CTA и мобильная версия

Итог

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