[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } } ]
{ "author_name": "Philipp Kontsarenko", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","\u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d","\u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d_headhunter","\u0430\u0440\u0442_\u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440_headhunter"], "comments": 20, "likes": 14, "favorites": 2, "is_advertisement": false, "section_name": "default", "id": "6182" }
Philipp Kontsarenko
5 491

Редизайн HeadHunter: Арт-директор проекта об обновлении российского сайта по поиску работы

Российский сайт по поиску вакансий и сотрудников HeadHunter запустил обновленную версию своего сайта. ЦП пообщался с арт-директором проекта Александром Никишенковым и узнал, как проходил процесс редизайна, какие цели стояли перед командой, и как компания собирается внедрять изменения.

ЦП: Почему решили провести глобальный редизайн?

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

Пора было решить эту проблему без полумер. 

Какие задачи должен был решить редизайн? 

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

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

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

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

Какие цели стояли перед вами?

Хотели, чтобы сайт стал чище, легче и эмоциональнее. В первую очередь мы стремились к увеличению ключевых конверсий на сайте (создание резюме, отклика, создание вакансии и так далее), а это можно сделать, когда с сайтом удобно работать, когда он хорошо отображается на разных типах устройств с разными разрешениями. Кроме того, мы хотели, чтобы HeadHunter стал «чище», «легче» и эмоциональнее.

Несмотря на всё желание дизайнеров, нельзя устроить революцию и полностью изменить весь сайт. Поэтому нововведения мы поделили на несколько этапов, первым из которых стало изменение навигации на hh.ru, hh.ua, hh.kz, career.ru, jobs.tut.by и jobs.day.az. Мы заменили старую навигацию, сгруппировали и правильно расположили все элементы. 

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

На какие тренды опирались, какие гипотезы ставили перед тем, как приступить к проектированию?

Мы видели круг проблем, которые надо решить и было несколько идей, которые нужно было проверить.

Как был организован процесс разработки? Опрашивали сотрудников, аудиторию, смотрели статистику, тест-группа?

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

Мы не могли менять содержимое страниц, нельзя было объединять или разбивать разделы — это было условием для быстрой разработки. После структуры мы сделали несколько прототипов, оценивая общее расположение элементов. 

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

После работы над ошибками, мы обзвонили некоторых наших клиентов и поехали к ним в гости с подобными кейсами. Аудитория была разнообразной, отличаясь и по опыту работы и по решаемым задачам — от директора по подбору персонала крупной компании (в бизнесе 8 лет) до менеджера по подбору персонала (в бизнесе 2,5 года).

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

Разрабатывали сами? Сколько времени понадобилось?

Разрабатывали сами. Делали долго – от момента первой идеи до момента открытия на первую тестовую аудиторию прошло больше года. Все это время мы тестировали, исправляли ошибки и снова тестировали.  

Как защищали концепцию перед остальной командой?

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

HeadHunter – большой проект. Как собираетесь внедрять редизайн? Что будете делать, чтобы ничего не упустить?

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

На кого ориентировали дизайн? Вы выделяли целевую аудиторию или создавали универсальный интерфейс, который будет понятен всем?

Мы ориентировались на три группы пользователей. Для каждой из групп мы выделяли основные акценты и паттерны поведения, стараясь сделать так, чтобы изменения привели к большей конверсии: для анонимов — к регистрациям; для соискателей — к созданию резюме, отклику; для работодателей — к упрощению работы с вакансиями и поиску сотрудников. 

HeadHunter — массовый сервис. Как вы избегали проблем, связанных с переходом на непривычную для многих пользователей верстку?

Мы запустились на 10% аудитории и оставили возможность вернуться на старый дизайн. Для возвращающихся на старый мы открывали форму с просьбой прокомментировать их поступок и дать оценку.  

Получилось, что только около 5% пользователей из тех, кто увидел новый дизайн, вернулись на старый. Из них 95% оставляли примерно такие комментарии: «привык к тому дизайну», «мне нужно срочно найти работу, а не разбираться с новым», «хочу», «надо», «привычка». 

Около 5% откликов были с качественными замечаниями, к которым мы прислушиваемся и уже работаем над изменениями. Кроме того, мы провели публичное тестирование в нашем блоге на «Хабре» и получили ценные для нас комментарии.

#Интерфейсы #редизайн #редизайн_HeadHunter #арт_директор_HeadHunter

Статьи по теме
«Альфа-банк» представил редизайн своего сайта от «Студии Артемия Лебедева»
Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

Комментарии Комм.

0 новых

Популярные

По порядку

Прямой эфир

Голосовой помощник выкупил
компанию-создателя
Подписаться на push-уведомления