Авито / Редизайн страницы квартиры в новостройке

Задача: Сделать редизайн страницы квартиры в новостройке, улучшить функциональность и обеспечить удобство использования для пользователей.

‍

Данный редизайн страницы квартиры в новостройке осуществлялся в рамках тестового задания компании Авито в течение 7 дней. Третий этап трудоустройства (тестовое) был успешно пройден.

Ссылка на Figma

Клиент

Авито

Вид работы

Продуктовый дизайн

Год

2023

Видеопрезентация работы

Исследования

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

Собрала фидбек об онлайн-классифайдах недвижимости на различных платформах (VC.ru, App Store, Отзовик и проч.).
Изучила точки зрения агентов по недвижимости на поиск квартиры в новостройке, их советы (на что обращать внимание, что проверять, чего остерегаться), чтобы детальнее изучить рынок новостроек и процессы поиска и покупки жилья в нём.
На основании полученных инсайтов сформировала гипотезы, чтобы проверить их в рамках проведенных мною глубинных интервью с двумя представителями целевой аудитории Авито по вертикали «Недвижимость».
Проведенные исследования позволили мне понять, на чём следует фокусироваться в большой степени при проведении анализа конкурентов. Изучила статистические данные по онлайн-классифайдам недвижимости, чтобы понять положение Авито среди конкурентов. Проанализировала интерфейсы страниц квартиры в новостройке таких конкурентов Авито, как: Циан, Домклик, Яндекс Недвижимость, Новострой и СПб Гуру.
Проанализировала текущее решение страницы квартиры в новостройке у Авито.
Сформировала задачи на проектирование в формате Job Stories:

Когда я изучаю местоположение объекта недвижимости, я хочу быстро узнать, что его окружает (какая есть рядом инфраструктура для жизни, какие ещё предложения рядом я могу найти, и как вообще выглядят улицы, окружающие искомый дом), чтобы не тратить время и силы на поездку к объекту и на поиск дополнительной информации на просторах интернета, ведь время и силы могут быть потрачены впустую.
Когда я изучаю то, как будет выглядеть тот или иной строящийся объект недвижимости, я хочу видеть качественные рендеры без какой‑либо отвлекающей и закрывающей детали информации, а так же фотографии со стройки, чтобы сопоставить планы застройщика и их реализацию.
Когда я рассматриваю ту или иную квартиру в новостройке, я хочу видеть подробную информацию о застройщике (о его уже реализованных проектах, истории, статистике), а также о документах на рассматриваемый объект, чтобы быть уверенной в его надёжности, в законности строительства.

Более подробную информацию о проведенных UX-исследованиях (описание процесса, анализ и инсайты) можно найти в файле Figma

Сохранила стиль бренда

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

Изменила сетку

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

Переработала галерею

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

Разместила в одном месте все кнопки управления объявлением

На основании собранного фидбека от пользователей и данных из конкурентного анализа решила разместить кнопки «Добавить в избранное», «Сравнить», «Добавить заметку» в сайдбаре, чтобы всегда они были в поле зрения у пользователей при скролле. Более того, дополнила их кнопками «Поделиться», «Скачать», «Распечатать» и «Скрыть объявление», а также перенесла в сайдбар с конца объявления кнопку «Пожаловаться» для удобства пользователей.

Сократила видимую часть описания

После наблюдения за тем, как один из респондентов просматривает предложенное мной объявление, обнаружился раздражающий пользователя момент — очень длинное описание, которое часто повторяется у квартир одного и того же ЖК. Сократила видимую часть описания до 1-2 абзацев. У конкурентов Авито этот момент уже учтён.

Дополнила карту

На основании пожеланий и болей пользователей на карту были добавлены фильтры окружающих объектов (детские сады, школы, больницы, магазины и рестораны), кнопка-фильтр отображения других ЖК рядом с объектом, возможность построения маршрута до объекта (чтоб доехать до него или оценить расстояние), а также режим просмотра улиц.

Доработала блок «О ЖК»

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

Полностью изменила блок «О застройщике»

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

Результат

Активно используя элементы дизайн-системы Авито, мне удалось сохранить узнаваемость бренда, эффективно заполнить предоставленное на десктопе пространство.

‍

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

‍

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