Упростила фильтр на главной странице Этажи

Проблема

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

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

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

Удобный фильтр = быстрый поиск нужной недвижимости.

Задача:

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

Цели проекта

1. Простой и понятный дизайн поиска
2. Рост конверсии

Процесс:

1. Product manager проекта собрал метрики, выявил зоны взаимодействия пользователя с фильтром и зафиксировал результаты в таблицу
2. Совместно с менеджером проекта собрали и проанализировали обратную связь от клиентов сайта о фильтрах, которые не хватало (установили опрос обратной связи на сайте)
3. Проанализировала всю полученную информацию, провела исследованию с помощью открытых источников, изучила конкурентов и схожие по механике сервисы
4. Создание фреймворка и поиск визуального стиля. Проектирую несколько вариантов, оставляю те варианты, которые наилучшим способом решают задачу. Демонстрирую варианты команде, выбираем решения, который будем тестировать
5. Собираю прототип в Figma для исследования
6. Совместно с продукт-менеджером провели исследование в формат интервью с 8 пользователями. Тестировали продакшн (текущую версию на сайте) и прототип с новой версией фильтра. Пользователей разделили на 2 группы и давали одинаковые задания, фиксировали какая группа быстрее, легче справится с заданием. Оформили результаты в таблицу, сделали выводы
7. На основе выводов скорректировала макеты. Подготовила макеты и все возможные состояния интерфейса разработчикам
8. Команда запустила А/Б тест на 3х городах, чтобы зафиксировать результаты конверсии и убедиться, что изменения положительно повлияют на метрики
9. Результат оказался положительный, поэтому появилась задача на доработку макета для масштабирования на всю сеть стран и городов

Дизайн-процесс

Mobile

1. Неочевидность возвращения на главную страницу

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

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

2. Перегруженный фильтр на главной странице сайта

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

Решение: Фильтр был упрощен до двух параметров: тип сделки и тип недвижимости. Избавилась от скролла, чтобы вся важная информация была видна на одном экране. Это обеспечило быстрый доступ к результатам поиска, которые можно дополнительно фильтровать на выдаче каталога объектов.

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

3. Неудобное расположение оценки и ипотеки

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

Решение: «Оценка недвижимости» и «Ипотека» были вынесены в отдельный блок, так как ранее находились в табах и уходили в скролл. Это улучшило доступность этих функций, не отвлекая пользователя от основного фильтра.

4. Затруднения с размещением объявлений

Проблема: Пользователи не всегда могли быстро найти, как разместить объявление

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

Desktop

Проблема 1. Перегруженный основной фильтр

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

Решение: Убрать дублирование информации. Упростить фильтр, оставив только ключевые параметры, чтобы не отвлекать пользователя и быстрее получать релевантную выдачу.

Проблема 2. Несоответствие брендбуку компании

Проблема: Непонятный заголовок, требующий от пользователя знания контекста рекламной кампании (межрегиональная покупка). Фоновое изображение не выполняло никакой функции и отвлекало внимание. Блок не соответствовал фирменному стилю компании и не давал понимания пользователю, какой тип недвижимости он ищет.

Решение: Заголовок должен четко указывать текущую локацию и цель поиска. Оставить фоновое изображение открытым и соответствующий фирменному стилю компании.

Проблема 3. Множество элементов навигации в рамках одного блока

Проблема: Фильтр в hero-блоке выполнял функции поиска объектов и навигации по сайту, дублируя меню в хедере (ипотека, оценка, продать, сдать).

Решение: Вынести навигацию по категориям в хедер сайта и в отдельный блок под фильтром. Также в хедере сайта всегда есть кнопка «Добавить объявление».

Результат А/Б теста

Результаты редизайна, согласно данным Яндекс Метрики показали, что в новой версии редизайна в мобильной версии:

• Уменьшились отказы на 18,2%, увеличились Глубина просмотра +1.45х и Время на сайте увеличилось +1.45х
• Все лиды увеличились +1.04х, конверсия посетителей +1.02х, все звонки +1.50х
• Взаимодействие с фильтром (открытие +1.48х, применение +1.44х, общее взаимодействие со всеми фильтрами +1.54х)

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

Десктопная версия сайта на данный момент находится в тесте и собирает метрики