Дизайн HR-сайта с админ панелью на React в стиле Material Design

О проекте:

Компания работает на американском рынке. Занимается тем что “под ключ” подбирает в крупные компании за короткий срок несколько десятков сотрудников.  Например компания Wallmart открывает новый магазин и им требуется 25 продавщиц, 15 мерчендайзеров, 15 водителей и тд. Но в компании Wallmart загружен HR отдел и они обращаются за помощью в подборе сотрудник к моему клиенту.

Что именно делает сервис, компания при подборе сотрудников под ключ?
Отбирает и продает уже готовых сотрудников, которые в курсе, что надо делать, заполнили все документы и готовы начать работу. Делается это следующим образом: 

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

Важный момент что такой сайт создается под каждую отдельную вакансию и компанию и называется “Recruiting Campaign”. 
Сайты эти одноразовые и закрываются как только задача выполнена. Отсюда довольно много динамического контента, а остальной на индексе должен поддаваться легким правкам не профессионалу. (смена лого, смена цветов, смена пары картинок, названия сайта и пр)

Аудитория этих сайтов

Люди которые ищут работ, 21-65 лет, американцы, в основном это низкоквалифицированные профессии,  далекие от мира it, технологий. А потому сразу становится понятным что интерфейс должен быть:

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

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

 

Задача:

По готовым прототипам, которые предоставил клиент необходимо разработать дизайн с использованием элементов Material UI для сайта на React.

Material UI – это система дизайна от Google с четко прописанными правилами колористики, типографики, сетки, расположения элементов, анимации.

React – если просто, то это способ того как будет сверстан сайт (JavaScript-библиотека для создания пользовательских интерфейсов).

Погружение в проект и обсуждение

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

Лаборатория конверсии (вопрос):

Для чего каждый раз создавать отдельный сайт? Не проще ли сделать сервис где по компанию будет генерироваться некий вертуальный офис, с доступом для hr, соискателей, владельца компании (Я скорее всего не вижу пока всей картины целиком, но из той информации что есть я бы оптимизировал этот процесс – сократив ваши издержки

Клиент (ответ):

Это требование выросло из совместной работы с заказчиками и нашего HR Отдела: все пришли ко мнению что сайты должен быть в корпоративном стиле. Например, есть cocacola.com, и есть hr-cocacola.com над которым мы работаем его хостинг зачастую тоже располагается на серверах компании, куда они могут установить наши скрипты после адуита. Он делается в корпоративных цветах, лого и прочее. иногда свои пожелания по банерам выдают и списку альтернативных вакансий, потому что мы их имидж представляем и в итоге отображение такого сайта надо будет согласовывать, а значит иметь гибкость какую то. Расходы связанные с доменами и хостингом здесь незначительные, так как либо предоставляются заказчиками либо берем самые дешевые, так как технические требования не высокие.

Лаборатория конверсии (вопрос):

Не совсем понял откуда вы собираете email-базы. Почему для меня как проектироващика важен этот момент. Если вы собираете со своих сайтов и люди оставляют email ожидая что им будут слать предложения по работе – ок, это одни ожидания. Если вы покупаете/парсите базы email кандидатов, то тут во первых люди не всегда будут понимать почему и с какого перепуга вы им шлете письма, так же интерфейс и путь клиента в сервисе может сильно в такой ситуации измениться, так как прежде чем человек разместит свое резюме и расскажет все о себе, ему нужно снять возражения и непонимание “кто вы”, “почему шлете ему письма”, “стоить ли тратить время на добавление резюме” и тд. То есть очень важно в каком эмоциональном состоянии и с какими мыслями человек попадает на сайт.

Клиент (ответ):

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

Лаборатория конверсии (вопрос):

Вы выгружаете тех с кто согласился (заключен контракт) на работу через api клиенту. А клиентам это удобно? Может быть было бы проще давать ссылку на страничку где в понятном виде можно посмотреть всех кандидатов и клиент сам мог выгрузить если нужно все данные? 

Клиент (ответ):

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

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

 

 

Архитектура сайта

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

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

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

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

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

Отзыв клиента