Встречают, как водится, по одежке. И к твоему луку довольно много требований, особенно если ты — самое заметное HR-tech явление страны. Будучи сложным и нетривиальном сервисом, hh.ru бросает дизайнерам множество интересных вызовов, раздает массу уникальных и действительно сложных продуктовых задач и требует кропотливой работы с такими интерфейсами и данными, которые мало где встретишь.
Рассказываем, кто такие дизайнеры hh.ru и чем живут, что для нас важно, где мы страдаем и как празднуем победы. О том, как мы идем тернистым путем к вершинам выстраивания качественного, простого для понимания и удобного в использовании интерфейса сервиса.
![](https://habrastorage.org/r/w780q1/webt/3b/8j/ny/3b8jnymt5qhrv5ybej6-zz6kwws.jpeg)
Страшно подумать, но всего шесть лет назад в интерфейсе сайта hh.ru царил полнейший хаос: невнятная цветовая палитра, 36 видов разных кнопок, множество компонентов, отвечающих за одно и то же, хоть выглядящих по-разному, и навигация, которая перестала отвечать потребностям растущего сервиса, поскольку была спроектирована без возможности масштабирования. Вкупе это было глобальной проблемой и причиной негативого пользовательского опыта: пользователи страдали, кололись и терялись в обилии непонятных элементов, но по-прежнему ели кактус и искали работу с помощью hh.ru.
![](https://habrastorage.org/r/w780q1/webt/zm/p3/vh/zmp3vh-wgunniw3jnhqc6llqsli.jpeg)
С тех пор мы сильно изменились, но шли не широкими проспектами редизайна, а серпантином эволюционных изменений. С того момента как мы ступили на путь интенсивных перемен, у нас появился выверенный брендбук, мы разработали четыре мобильных приложения на iOS и Android, сам сайт стал удобнее и куда симпатичнее. Методом проб и ошибок мы выстроили четкое понимание, как мы хотим выглядеть, и какими мы быть не должны.
![](https://habrastorage.org/r/w780q1/webt/zg/am/6b/zgam6b4uret7cu-71lhjtk_aexy.jpeg)
При разработке UX-решений мы соблюдаем главный принцип: делаем все возможное, чтобы пользователю было легко, просто и понятно существовать в нашем сервисе. Нам важно, чтобы пользователь сумел извлечь максимум профита из нашего продукта, чтобы его ничего не отвлекало от заветной цели найти работу, потратив при этом минимум усилий и нервов.
Разработчики думают о технических ограничениях и возможностях, продакты о достижении бизнес-целей, а дизайнеры заботятся о пользователях и их потребностях. Задача дизайнера сделать всё возможное, чтобы пользователь мог понятно и интуитивно решать свои задачи. Хороший пользовательский опыт важнее эстетики, равно как и наших предположений о том, каким он должен быть.
Пользователи hh.ru по умолчанию должны испытывать положительные эмоции, поэтому мы уделяем много внимания языку интерфейса, проработке иллюстраций экранов и действий и проработке микроанимации интерактивности. Мы проектируем дизайн, основываясь не на предположениях, а на исследовании пользовательского опыта. Ключевой вектор на сегодня — mobile first, и это неслучайно. 80% трафика приходит к нам с мобильных устройств, поэтому новейшие решения первым делом появляются в наших приложениях и мобильной версии сайта.
![](https://habrastorage.org/r/w780q1/webt/km/er/d5/kmerd5uwqdwgl_vc6zezxdpj_9y.jpeg)
Помимо соискательского и работодательского разделов основного сервиса в ведении продуктовых дизайнеров находятся и другие проекты hh.ru, такие как Talantix, Банк данных заработных плат, HRSpace и другие.
Прежде чем приступить к очередной задаче, мы задаемся вопросом: “станет ли понятнее, эффективнее и эмоциональнее?” Это помогает сконцентрироваться на важном и отсеять неключевые проблемы. Кроме того, существуют и верхнеуровневые бизнес-цели компании, и продакты отвечают за их достижение. Продакт-менеджер — это дайвер в огромном голубом океане пользовательского взаимодействия с сервисом. Его задача нырнуть как можно глубже и выудить самую большую пользовательскую боль или проблему. Эту боль он приносит в команду и вот здесь в работу включаются дизайнеры, чья главная задача — сгенерировать гипотезы, которые помогут эту боль излечить.
![](https://habrastorage.org/r/w780q1/webt/qt/8t/in/qt8tin1dpwq8i7gedcxhqti8acw.jpeg)
Гипотезы трансформируются в прототипы, а прототипы тестируются на пользователях. Затем происходит работа над ошибками, отбраковываются несостоявшиеся гипотезы, а лучшая доводится до совершенства. Затем происходит совмещение прототипа с нашей дизайн-системой и верстка отрисованного. Дизайнер, как и завещал Энди Уорхол, на 15 минут становится звездой, в нашем случае — арт-директором: в предрелизном демо он обладает решающим голосом и именно он благословляет задачу на выход в продакшн.
Сегодня в разрезе нашего продуктового дизайна можно выделить несколько важных направлений. Например, мы развиваем свою дизайн-систему. Сейчас этим, кажется, занимаются все средние и крупные компании, и не зря: проработанная дизайн-система — ключ к максимально быстрой и управляемой постановке дизайна на промышленные рельсы. Сейчас дизайн-система в hh.ru атомарна — в ней описаны различные компоненты: чек-боксы, кнопки, поля для ввода, табы и т.д., и она, увы, все еще далека от совершенства, поскольку изначально создавалась под работу с десктопом, а времена и главные источники трафика стремительно меняются.
Мы следуем нашему внутреннему своду законов Хаммурапи — UX-манифесту. Это holy book наших правил и паттернов, фундамент, на котором основано понимание хорошего дизайна с точки зрения пользовательского опыта. UX-манифест — это своего рода чек-лист, благодаря которому дизайнер понимает, что выпускаемая задача соответствует заданным стандартам. Этот манифест используется во всех продуктах компании и является одним из главных рабочих инструментов.
Еще один важный фокус — use test-ы, тестирование наших гипотез на живых пользователях. Мы стараемся проводить работу над ошибками и доводить до продакшна только лучшее. Мы задаем четкие критерии, по которым дизайнер должен оценивать успешность задачи, чтобы минимизировать риск факапа и потери ресурсов, которые уходят на работу огромной команды, состоящей из разработчиков, продактов, проджектов и маркетинга.
Всего нас 11 человек. Мы интроверты, но очень дружны: общаемся друг с другом в течение рабочего дня, раз в месяц выбираемся куда-нибудь всей командой поохотиться на стейки и выпить вина или срываемся на какую-нибудь конференцию в Питер. В остальное время каждый отдыхает по-своему: кто-то увлекается квадрокоптерами, кто-то прыгает с парашютом, ходит по выставкам, походам, горам и трекингам или бегает марафоны.
Саша Никишенков
Арт-директор. Направляет на путь истинный, по возможности старается не мешать другим дизайнерам работать эффективно (а иногда и эффектно), в любой непонятной ситуации помогает с процессами и разрешением сомнений. Саша любит путешествия и дорогу, бокал хорошего сухого и камин, а еще океан и виндсерф.
Женя Шляндина
Старшенькая в продуктовом дизайне работодательского направления. Могла бы рисовать иллюстрации, но вместо этого выстраивает гармонию между болями бизнеса и работодателя. Ходит повыше и подольше в горы, чтобы на контрасте покайфовать от офисных будней.
Соня Пащенко
UI-designer. Занимается редизайном всех промо-страниц сервиса и созданием новых разделов, улучшением визуального ряда, добавляет дружелюбия и понятности. Типографика, тени, цвета и пиксели — ее верные друзья.
Саша Ашуров
Бренд-дизайнер hh.ru. Дизайнит почти все маркетинговые проекты. Тащится от спортивной гимнастики и может крутануть сальтуху. Любит изучать и создавать шрифты, продюсирует электронных музыкантов, самые известные — DJ Electric и Luckystars.
Марина Усачева
Дизайнер маркетингового отдела и внутреннего корпоративного стиля на полставки. Счастлива, что “любимое дело” и “работа” стали синонимами. На путь истинный встала в университете, выбрав направление “Визуальные коммуникации”. Обожает графику и балет – все, что связано с эстетикой.
Таня Галак
Когда Таня была студенткой, она считала компьютерную графику всего лишь хобби, но хобби переросло в профессию. Любит создавать полезное для пользователей. Обожает йогу, книги и путешествия.
Коля Михайлов
Старший продуктовый дизайнер. Совместно с продактом и командой разработки делает так, чтобы соискатели были довольны, счастливы и трудоустроены. Может собрать, запустить, разбить, найти, починить и снова запустить квадрокоптер.
Женя Назарова
Старший дизайнер продукта в hh.ru. Развивает CRM-систему Talantix для рекрутеров, генерит идеи, проверяет гипотезы и делает пользователей счастливее. А еще Женя обожает ходить. Ходьба — это про Женю. Женя и пешие прогулки — это как Бонни и Клайд, Сид и Вишес, Эрих и Мария Ремарк. Короче говоря, просто созданы друг для друга.
Костя Козырев
Продуктовый дизайнер. Отрекшись от ремесла написания кода, встал на светлую сторону пользовательского спокойствия и здоровья. Любит спорить, дип-хаус и oldtimer тачки.
Олег Бухтияр
Развивает мобильное приложение для соискателей. Ходит по офису с двумя телефонами и вечно сравнивает iOS с Android. Бегает как Форрест Гамп.
Настя Винокурова
Продуктовый дизайнер. Повернута на аналитике и социальной психологии. Именно это помогает ей проектировать интерфейсы, которые не только решают задачи бизнеса, но и делают пользователя счастливее. Обожает петь песни собственного сочинения, Бэтмена и французские фильмы. Вы хоть раз пробовали петь Бэтмена? Это невероятно сложно. Но Настя может.
Это структурные ребята, отличающие работу инхаус от работы в креативном агентстве. Наш продуктовый дизайнер понимает ценность процесса проработки, принимает участие и осознает ценность исследования продукта, где опыт пользователей — один из самых важных критериев дизайн-решений. Ты запросто сможешь стать частью дизайнерской команды hh.ru, если тебе знакомы самоирония и здоровый цинизм.
![](https://habrastorage.org/r/w780q1/webt/uv/gc/vg/uvgcvgejpgvn8xd7qy1mwa60naw.jpeg)
Рассказываем, кто такие дизайнеры hh.ru и чем живут, что для нас важно, где мы страдаем и как празднуем победы. О том, как мы идем тернистым путем к вершинам выстраивания качественного, простого для понимания и удобного в использовании интерфейса сервиса.
![](https://habrastorage.org/webt/3b/8j/ny/3b8jnymt5qhrv5ybej6-zz6kwws.jpeg)
Эволюция или смерть
Страшно подумать, но всего шесть лет назад в интерфейсе сайта hh.ru царил полнейший хаос: невнятная цветовая палитра, 36 видов разных кнопок, множество компонентов, отвечающих за одно и то же, хоть выглядящих по-разному, и навигация, которая перестала отвечать потребностям растущего сервиса, поскольку была спроектирована без возможности масштабирования. Вкупе это было глобальной проблемой и причиной негативого пользовательского опыта: пользователи страдали, кололись и терялись в обилии непонятных элементов, но по-прежнему ели кактус и искали работу с помощью hh.ru.
![](https://habrastorage.org/webt/zm/p3/vh/zmp3vh-wgunniw3jnhqc6llqsli.jpeg)
С тех пор мы сильно изменились, но шли не широкими проспектами редизайна, а серпантином эволюционных изменений. С того момента как мы ступили на путь интенсивных перемен, у нас появился выверенный брендбук, мы разработали четыре мобильных приложения на iOS и Android, сам сайт стал удобнее и куда симпатичнее. Методом проб и ошибок мы выстроили четкое понимание, как мы хотим выглядеть, и какими мы быть не должны.
![](https://habrastorage.org/webt/zg/am/6b/zgam6b4uret7cu-71lhjtk_aexy.jpeg)
При разработке UX-решений мы соблюдаем главный принцип: делаем все возможное, чтобы пользователю было легко, просто и понятно существовать в нашем сервисе. Нам важно, чтобы пользователь сумел извлечь максимум профита из нашего продукта, чтобы его ничего не отвлекало от заветной цели найти работу, потратив при этом минимум усилий и нервов.
Разработчики думают о технических ограничениях и возможностях, продакты о достижении бизнес-целей, а дизайнеры заботятся о пользователях и их потребностях. Задача дизайнера сделать всё возможное, чтобы пользователь мог понятно и интуитивно решать свои задачи. Хороший пользовательский опыт важнее эстетики, равно как и наших предположений о том, каким он должен быть.
Пользователи hh.ru по умолчанию должны испытывать положительные эмоции, поэтому мы уделяем много внимания языку интерфейса, проработке иллюстраций экранов и действий и проработке микроанимации интерактивности. Мы проектируем дизайн, основываясь не на предположениях, а на исследовании пользовательского опыта. Ключевой вектор на сегодня — mobile first, и это неслучайно. 80% трафика приходит к нам с мобильных устройств, поэтому новейшие решения первым делом появляются в наших приложениях и мобильной версии сайта.
![](https://habrastorage.org/webt/km/er/d5/kmerd5uwqdwgl_vc6zezxdpj_9y.jpeg)
Помимо соискательского и работодательского разделов основного сервиса в ведении продуктовых дизайнеров находятся и другие проекты hh.ru, такие как Talantix, Банк данных заработных плат, HRSpace и другие.
Ясно, понятно
Прежде чем приступить к очередной задаче, мы задаемся вопросом: “станет ли понятнее, эффективнее и эмоциональнее?” Это помогает сконцентрироваться на важном и отсеять неключевые проблемы. Кроме того, существуют и верхнеуровневые бизнес-цели компании, и продакты отвечают за их достижение. Продакт-менеджер — это дайвер в огромном голубом океане пользовательского взаимодействия с сервисом. Его задача нырнуть как можно глубже и выудить самую большую пользовательскую боль или проблему. Эту боль он приносит в команду и вот здесь в работу включаются дизайнеры, чья главная задача — сгенерировать гипотезы, которые помогут эту боль излечить.
![](https://habrastorage.org/webt/qt/8t/in/qt8tin1dpwq8i7gedcxhqti8acw.jpeg)
Гипотезы трансформируются в прототипы, а прототипы тестируются на пользователях. Затем происходит работа над ошибками, отбраковываются несостоявшиеся гипотезы, а лучшая доводится до совершенства. Затем происходит совмещение прототипа с нашей дизайн-системой и верстка отрисованного. Дизайнер, как и завещал Энди Уорхол, на 15 минут становится звездой, в нашем случае — арт-директором: в предрелизном демо он обладает решающим голосом и именно он благословляет задачу на выход в продакшн.
Звучит как вызов
Сегодня в разрезе нашего продуктового дизайна можно выделить несколько важных направлений. Например, мы развиваем свою дизайн-систему. Сейчас этим, кажется, занимаются все средние и крупные компании, и не зря: проработанная дизайн-система — ключ к максимально быстрой и управляемой постановке дизайна на промышленные рельсы. Сейчас дизайн-система в hh.ru атомарна — в ней описаны различные компоненты: чек-боксы, кнопки, поля для ввода, табы и т.д., и она, увы, все еще далека от совершенства, поскольку изначально создавалась под работу с десктопом, а времена и главные источники трафика стремительно меняются.
Мы следуем нашему внутреннему своду законов Хаммурапи — UX-манифесту. Это holy book наших правил и паттернов, фундамент, на котором основано понимание хорошего дизайна с точки зрения пользовательского опыта. UX-манифест — это своего рода чек-лист, благодаря которому дизайнер понимает, что выпускаемая задача соответствует заданным стандартам. Этот манифест используется во всех продуктах компании и является одним из главных рабочих инструментов.
Еще один важный фокус — use test-ы, тестирование наших гипотез на живых пользователях. Мы стараемся проводить работу над ошибками и доводить до продакшна только лучшее. Мы задаем четкие критерии, по которым дизайнер должен оценивать успешность задачи, чтобы минимизировать риск факапа и потери ресурсов, которые уходят на работу огромной команды, состоящей из разработчиков, продактов, проджектов и маркетинга.
В лицах
Всего нас 11 человек. Мы интроверты, но очень дружны: общаемся друг с другом в течение рабочего дня, раз в месяц выбираемся куда-нибудь всей командой поохотиться на стейки и выпить вина или срываемся на какую-нибудь конференцию в Питер. В остальное время каждый отдыхает по-своему: кто-то увлекается квадрокоптерами, кто-то прыгает с парашютом, ходит по выставкам, походам, горам и трекингам или бегает марафоны.
![](https://habrastorage.org/webt/wy/ty/uo/wytyuol1gekxnleacfpj1yggul0.png)
Арт-директор. Направляет на путь истинный, по возможности старается не мешать другим дизайнерам работать эффективно (а иногда и эффектно), в любой непонятной ситуации помогает с процессами и разрешением сомнений. Саша любит путешествия и дорогу, бокал хорошего сухого и камин, а еще океан и виндсерф.
![](https://habrastorage.org/webt/3m/oh/-a/3moh-ayn-4xenmteotnm1wyfb0s.png)
Старшенькая в продуктовом дизайне работодательского направления. Могла бы рисовать иллюстрации, но вместо этого выстраивает гармонию между болями бизнеса и работодателя. Ходит повыше и подольше в горы, чтобы на контрасте покайфовать от офисных будней.
![](https://habrastorage.org/webt/ef/n4/cl/efn4clcnu5zu2cbc6aevffmy-qu.png)
UI-designer. Занимается редизайном всех промо-страниц сервиса и созданием новых разделов, улучшением визуального ряда, добавляет дружелюбия и понятности. Типографика, тени, цвета и пиксели — ее верные друзья.
![](https://habrastorage.org/webt/ly/te/a-/lytea-erbvquqen5p5gtyu7o3zw.png)
Бренд-дизайнер hh.ru. Дизайнит почти все маркетинговые проекты. Тащится от спортивной гимнастики и может крутануть сальтуху. Любит изучать и создавать шрифты, продюсирует электронных музыкантов, самые известные — DJ Electric и Luckystars.
![](https://habrastorage.org/webt/ei/cc/gi/eiccgimnbdjdalydylupg8fno6e.png)
Дизайнер маркетингового отдела и внутреннего корпоративного стиля на полставки. Счастлива, что “любимое дело” и “работа” стали синонимами. На путь истинный встала в университете, выбрав направление “Визуальные коммуникации”. Обожает графику и балет – все, что связано с эстетикой.
![](https://habrastorage.org/webt/ol/hm/qj/olhmqjnxutrokhq9ciickampon8.png)
Когда Таня была студенткой, она считала компьютерную графику всего лишь хобби, но хобби переросло в профессию. Любит создавать полезное для пользователей. Обожает йогу, книги и путешествия.
![](https://habrastorage.org/webt/9v/bj/e3/9vbje3x0qhjn4yzo6zylnhzb_iq.png)
Старший продуктовый дизайнер. Совместно с продактом и командой разработки делает так, чтобы соискатели были довольны, счастливы и трудоустроены. Может собрать, запустить, разбить, найти, починить и снова запустить квадрокоптер.
![](https://habrastorage.org/webt/nf/4u/xs/nf4uxslms2sq3v84h7j-zrijnie.png)
Старший дизайнер продукта в hh.ru. Развивает CRM-систему Talantix для рекрутеров, генерит идеи, проверяет гипотезы и делает пользователей счастливее. А еще Женя обожает ходить. Ходьба — это про Женю. Женя и пешие прогулки — это как Бонни и Клайд, Сид и Вишес, Эрих и Мария Ремарк. Короче говоря, просто созданы друг для друга.
![](https://habrastorage.org/webt/7y/gr/d1/7ygrd1v-iqor70sfqxoy2vjyie0.png)
Продуктовый дизайнер. Отрекшись от ремесла написания кода, встал на светлую сторону пользовательского спокойствия и здоровья. Любит спорить, дип-хаус и oldtimer тачки.
![](https://habrastorage.org/webt/el/in/vy/elinvy-jy-qqcjmfqyz4a3lk6ni.png)
Развивает мобильное приложение для соискателей. Ходит по офису с двумя телефонами и вечно сравнивает iOS с Android. Бегает как Форрест Гамп.
![](https://habrastorage.org/webt/wr/yk/1l/wryk1lqp8shfk6z94ohh_asgl68.png)
Продуктовый дизайнер. Повернута на аналитике и социальной психологии. Именно это помогает ей проектировать интерфейсы, которые не только решают задачи бизнеса, но и делают пользователя счастливее. Обожает петь песни собственного сочинения, Бэтмена и французские фильмы. Вы хоть раз пробовали петь Бэтмена? Это невероятно сложно. Но Настя может.
Наши бро
Это структурные ребята, отличающие работу инхаус от работы в креативном агентстве. Наш продуктовый дизайнер понимает ценность процесса проработки, принимает участие и осознает ценность исследования продукта, где опыт пользователей — один из самых важных критериев дизайн-решений. Ты запросто сможешь стать частью дизайнерской команды hh.ru, если тебе знакомы самоирония и здоровый цинизм.
![](https://habrastorage.org/webt/uv/gc/vg/uvgcvgejpgvn8xd7qy1mwa60naw.jpeg)