Учебный кейс, который качает дизайнера. Пересмотрели и улучшили типичный формат

Привет! Я Никита, UX/UI-дизайнер в ФОДЖИН. Расскажу, как мы создаем кейсы с реальными метриками и исследованиями, которые мощно прокачивают дизайнеров по всем фронтам.

В наше время онлайн-платформы полны учебных кейсов, в которых якобы проводят исследования: CJM, Job, User Stories и т.д. Мы ничего против этого не имеем, но считаем, что во многих случаях исследования проводятся «для галочки» и не отражают эффективность работы. Такой подход вряд ли приносит какой-либо реальный профит, кроме тренировки визуала.

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

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

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

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

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

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

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

Для этого привлекли респондентов, которые вполне могли быть соискателями или клиентами компании ITECO. Выборку сделали из 10 человек, чтобы усреднить показатели. Длительность каждой встречи была от 15 до 30 минут.

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

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

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

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

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

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

Затем приступили к прототипированию. Главная задача в таком исследовании — максимальная детализации и естественность.

Сравнивать сайт и прототип с парой кнопок не самая лучшая идея: получим некорректные результаты. Поэтому мы сделали упор на максимальную интерактивность интерфейса. Проработали variants и микроанимацию компонентов. Также настроили привязки между страницами и добавили ссылки на внешние ресурсы.

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

Главная

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

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

Услуги

Сделали отдельную страницу с услугами и их расширенным описанием. Это позволило дополнительно выделить важную для клиентов компании информацию и заодно разгрузить главную страницу.

О компании

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

Вакансии

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

Страница вакансии

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

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

Контакты

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

Результат получился убедительный: до 100% увеличили количество достижений цели и снизили количество шагов и ошибок.

Личный кабинет

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

Суперская прокачка по всем фронтам! На выходе мы получили не обычный кейс, а профессионально выполненную работу с эффективными исследованиями, вайрфреймами и прототипами.

И самое главное – улучшили метрики:

Три из четырех гипотез подтвердились, еще одна частично подтвердилась.

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

На этом этапе мы также выделили ошибки и внесли правки в макет. Например: добавили в хедер ссылку «Главная» и подтянули информативность описания вакансии.

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

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

Подписывайтесь на наш канал, где мы показываем внутреннюю кухню дизайн-отдела.

А если вам нужны дизайн и разработка, то пишите сюда: