стрижи
строительный девелопмент
начало
первое, с чего мы начали сотрудничество, это со знакомства с фигмой проекта. после небольшого аудита было принято решение начать работу с оптимизации UI Kit (избавился от ненужных стилей, внедрил общую систему оступов).
далее рассмотрим ряд исследований, которые я сделал для улучшения юзабилити и не только.
ипотечные решения
поступила обратная связь от пользователей, которая в общих чертах гласит, что на сайте неудобно реализован ипотечный калькулятор.
вводные
один рабочий день = 8 часов
время на решение задачи
пользователи выставляют первоначальные значения, далее им требуется выбрать тип ипотеки, который занимает значительное место на экране. пока пользователи выбирают и читают нужный тип, кнопка «Получить консультацию» исчезает из виду и чтобы вернуться к CTA кнопке, нужно прокрутить вверх, что нарушает логику функционала.
боль
в первой половине дня глянул несколько конкурентов в этой сфере, выписал комменты
по каждому для презентации заказчику.
начало работы
собрал два концепта в прототипах для дальнейшего согласования. выписал плюсы
и свои комментарии к каждому варианту.
после сборки прототипов мной было принято решение собрать обратную связь от коллег
и других пользователей через pathway. загрузил все варианты, разослал в рабочие чаты /
в чаты кастдева / дизайн коммьюнити. на основе ОС собрал всё в экран презентации.
презентовал на синке заказчику.
карточка квартиры в каталоге
оживить страницу.
расставить акценты в карточке и на странице в целом.
выделить название ЖК.
цель
страница с каталогом слишком тусклая/чёрно-белая. всё сливается. похожа на варфрейм.
в карточках акцент делает на ипотечное предложение.
есть вероятность, что ипотека перестанет быть актуальной для акцентирования внимания
и ее уберут из карточки. в таком случае в карточке совсем пропадут акценты.
боль
стартанул по классике с ресерча прямых коллег из индустрии. собрал заметки,
как реализовано.
начало работы
собрал информацию от заказчика о целевой аудитории, согласовались с ожидаемым результатом.
собрал решения, которые помогут сделать страницу ярче и интереснее.
возможные решения
· слайдер перекрасил в оранжевый.
· акцентировал кнопку показа предложений.
акцентирование на ui элементах в фильтрации
· акцент на цене.
· перенос квадратурыи комнатности в верхнюю часть.
· название ЖК переместилив видимую часть.
карточка квартиры
сформировал анкету на pathway, после отправил её респондентам.
опрос респондентов
после анкетирования мы показали участникам два экрана с просьбой выбрать наиболее удобный и привлекательный вариант по их мнению, а также попросили написать причину выбора данного экрана.
почти в два раза новая версия каталога выигрывает у старой по количеству голосов.
большинство респондентов отметили, что им нравится наличие ярких цветовых акцентов на странице, особенно выделение цены оранжевым цветом. они считают, что это позволяет быстро обратить внимание на важную информацию. также было отмечено, что информация на карточках квартир более структурирована и удобна для восприятия. некоторые респонденты предложили изменить расположение информационных блоков, например, переместить количество комнат и метраж вниз. чёрный цвет вызывает негативные ассоциации у некоторых пользователей. в целом, большинство респондентов считает, что новый вариант является более удобным и информативным, чем старый.
краткая сводка
на основе полученных ответов в ходе анкетирования и A/B теста можно подвердить полностью 1-ю гипотезу связанную с акцентами в фильтрации и частично подтвердить гипотезу акцентов в карточке квартиры.
исходя из анкеты, для потенциального покупателя более важно видеть комнатность и площадь квартиры,
и менее важно название ЖК.
поэтому мы комбинируем старую карточку, акцентируем на стоимости, после на комнатности с площадью
🎉 итоговое решение
cta кнопка в хэдере
реализация дополнительной кнопки для вызова формы обратной связи в хэдере.
запрос
добавить кнопку обратной связи в хедер для улучшения коммуникации с пользователями,
не перегружая хэдер.
цель
большинство застройщиков используют решение в виде иконки-кнопки.
в нашем случае, чтобы сохранить место и не сделать хэдер тесным, расположение данной иконки является подходящим решением.
решение #1
после ресёрча показали клиенту несколько решений, которые мы можем предложить.
начало работы
хэдер остается неизменным.
при нажатии на номер телефона происходит одновременно два действия:
1. переадресация на звонок.
2. открытие поп-ап формы обратной связи.
давая пользователю сразу два способа связи с компанией через один сценарий, есть вероятность,
что он совершит целевое действие - позвонит или оставит заявку.
решение #2
хэдер остается неизменным.
при нажатии на номер телефона происходит одновременно два действия:
1. переадресация на звонок.
2. открытие поп-ап формы обратной связи.
давая пользователю сразу два способа связи с компанией через один сценарий, есть вероятность,
что он совершит целевое действие - позвонит или оставит заявку.
решение #2
для начала мы решили протестировать первый вариант, а именно, смогут ли пользователи
догадаться и разглядеть кнопку для вызова формы обратной связи.
для этого дали им макет и попросили вызвать форму обратной связи.
проверяем с респондентами
*тепловая карта в зоне кнопки для вызова формы ОС.
в общей сложности мы получили 33 клика.
70% пользователей кликнули на иконку
телефонной трубки.
*более подробная статистика по клик-зонам.
показали два сценария вызова формы обратной связи исходя из предложенных выше решений и попросили выбрать наиболее понятный/удачный/заметный/логичный
a/b тестирование
попросили поделиться мнением о данных вариантах. собрали несколько тезисов.
сбор обратной связи
связь в тг: @tkhnvch
tkhnvch.dsgn
все права защищены. 2025.
