Улучшение UX для сайта web3.career

Продукт

Web3.career — это крупнейший агрегатор вакансий и резюме в децентрализованных технологиях, блокчейне и криптовалюте. Площадка собирает предложения от компаний по всему миру и ориентирована на разработчиков (Solidity, Smart Contracts), маркетологов и специалистов по безопасности в Web3

Целевая аудитория и боли

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

Путь пользователя

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

Блок фильтров

Текущая версия фильтрации по тегам и поиску на сайте выполнена плохо. Теги сложены в одну кучу в алфавитном порядке, а сам текст мелкий даже на компьютерной версии сайта. Единственное, что сделано отлично — свитчер дистанционной работы. Однако если человеку нужен гибрид или только офис, то такой опции нет. Переработал фильтры и пришел к двум вариантам, оба адаптивны под тачскрины и поддерживают масштабирование без нагрузки на пользователя. Почти не менял дизайн-систему проекта, однако дополнил визуализацию некоторых элементов иконками, а у некоторых инвертировал цвет, чтобы дизайн стал интуитивно понятным, соответствовал WCAG 7:1 и соответствовал стандартам инклюзивности.

В процессе редизайна я отсортировал блоки по категориям, выделил отдельный блок с популярными направлениями, чтобы пользователь не тратил время на поиск в категориях. Также расширил фильтрацию под целевую аудиторию проекта: добавил выпадающий список с опытом работы и конкретным стеком (язык программирования, фреймворк, блокчейн), потому что соискателю важно работать в узкоспециализированной нише. Заменил эмодзи, которые у разработчиков ассоциируются с работой ИИ или ленью, на иконки. Это снимает необходимость вчитываться и дает использовать продукт интуитивно. В оригинале белые плашки означали невыбранные теги, а залитые — наоборот. Отказался от такого визуала, потому что это вводит в заблуждение и ломает дизайн-систему. Если мы выбрали использовать обводку, то не стоит переходить на заливку. Чтобы четко отделить выбранный тег, добавил ему крестик, который также означает, что повторное нажатие отменит выделение. Использовал белый для выбранного, потому что его индекс яркости выше, чем у розового и сразу показывает, что пользователь уже выбрал. В первом варианте особо не менял верстку, оставив ее вертикальной. Во втором же варианте разместил фильтры слева от категорий, это частая практика для больших экранов (так как большая часть работы ЦА происходит на десктопах, это рабочий вариант). Такой вариант позволяет добавлять фильтры не превращая блок в спагетти.

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

Первое, что поменял — четко обозначил зарплатные ожидания. Теперь это не абстрактные $150k в вакууме, а годовая зарплата или оплата за 6-месячный контракт в конкретной валюте или криптовалюте. Добавление фотографий (где это возможно), вместо первой буквы названия вакансии, увеличивает доверие к компании и ускоряет визуальный поиск вакансии по знакомому лого. Если компания не добавила логотип — берем первую букву названия компании, не вакансии. Также добавил верификацию компании. Это опциональный элемент, который закрывает страх целевой аудитории о том, что компания может оказаться однодневкой. Также маркировка позволяет получить проекту дополнительное средство монетизации. Оставил концепцию с предпросмотром вакансии на той же странице, это хороший ход, который предотвращает переходы между страницами, и позволяет сравнивать сразу несколько вакансий. Саму же карточку вакансии разбил на логические блоки (одинаковый шаблон для всех вакансий), чтобы пользователь мог скрыть уже прочитанные / неактуальные для него блоки и перейти к важной информации. Также я пересобрал рекламный блок, сделав его в стиле карточек вакансий, чтобы пробить баннерную слепоту. Но оставил его таким же ярким, чтобы отделить от остальных вакансий. Заменил кислотно-зеленый фон на белый, чтобы улучшить читабельность информации, а зеленый оставил только как акцент. Новый дизайн карточки ускоряет переход к целевому действию (Apply), потому что пользователь за несколько секунд сканирует важные для него аккордеоны, не выискивая пункты в стене сплошного текста.

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

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

Влияние на бизнес

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