Разработка карьерного сайта для крупного ритейлера

В 2023 году компания объявила тендер на разработку сайта вакансий и массового подбора персонала для сети «Пятёрочка». По условиям контракта подрядчик должен был разработать дизайн сайта, выполнить работы по фронтенду, бэкенду и DevOps за фиксированную сумму. Evrone выиграл торги и получил контракт. 

Задача

У компании отсутствовал единый карьерный сайт для торговой сети «Пятёрочка», поэтому для публикации вакансий использовались сторонние ресурсы. Чтобы оптимизировать рекрутмент в компании и иметь возможность напрямую работать с соискателями, решено было сделать собственный ресурс на отдельном домене. Основными задачами карьерного сайта были:

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

Публикация вакансий и сбор откликов должны происходить автоматически через внутреннюю систему подбора Skillaz. У администраторов сайта должна была быть возможность быстро менять контент на сайте, содержимое блоков и их отображение. 

Дизайн карьерного портала

В качестве референсов мы ориентировались на подобные сайты ближайших конкурентов — других продуктовых розничных сетей. Бриф от заказчика содержал необходимые вводные данные об аудитории и функциях сайта. На их основе мы и сделали прототип.

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

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

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

Неожиданной проблемой стало то, что подробный гайдлайн для фирменного стиля учитывает только оффлайн-носители. Совместно с заказчиком нам пришлось адаптировать его к диджитал-среде. Мы консультировали команду по поводу дальнейшего использования UX-текстов — на кнопках, в меню, уведомлениях. Их задача — помочь пользователю в навигации по сайту, поэтому они должны быть понятными и короткими.

CMS

Заказчику требовалась CMS-система для контент-менеджмента, которой он мог бы управлять самостоятельно. Заказчик выбирал из нескольких вариантов и остановился на PayloadCMS. Этот open source предоставляет базу данных, API и UI для админки. При этом оставляет большие возможности для кастомизации и подходит для создания лендингов и нативных приложений. Она уже использовалась в системах X5 Group и была одобрена службой информационной безопасности. 

Мы использовали PayloadCMS как фреймворк, который дает движок для сайта и конструктор, в который можно добавить свои разделы, блоки, глобальные элементы, промежуточные обработчики. Наши фронтендеры разработали компоненты и внедрили их, применяя встроенные возможности CMS для дизайна макетов.

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

Изначально мы планировали использовать готовую систему аутентификации и авторизации, которую предлагает CMS, но плагины оказались нерабочими. Пришлось писать самостоятельное решение для авторизации через Keycloak, добавить методы и роутинг для работы с ним. 

Интеграции

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

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

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

Геолокация

В сегменте массового подбора часто прибегают к поиску персонала по геолокации. Мы использовали сервис Яндекс.Карты. Заказчик придерживался гипотезы, что люди выбирают работу в пределах 30 км от дома, чтобы было удобно добираться. 

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

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

DevOps

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

Мы получили пустой кластер Kubernetes, куда мы установили нужное программное обеспечение, базы данных и настроили пайплайн для continuous integration на основе GitLab CI/CD. Все билды, которые происходят автоматически в CI разворачиваются внутри dev-тестового кластера. 

Наши инженеры взаимодействовали с командой клиента, чтобы настроить логирование, передачу метрик, и подобные сервисные службы. Интегрировали брокер сообщений Kafka и Vault для хранения секретов.

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

Стек

Язык: TypeScript;

Платформа: Node.js;

Базы данных: MongoDB (Mongoose ODM);

Библиотеки: React, Next.js, Fastify, Supertest, Jest, PayloadCMS.

Результат

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

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

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

Если у вас есть идея проекта, напишите нам. Команда Evrone поможет составить список целей и задач, подготовить документы и воплотить идею в жизнь. Мы делаем сайты и веб-приложения как для крупных компаний, так и для стартапов, и делимся экспертизой.