Привет, Хабр! Это Михаил, product owner мобильного приложения М2, и Антон, продуктовый дизайнер в M2. Мы работаем над мобильным приложением, которое позволяет проводить сделки с недвижимостью онлайн как частным лицам, так и профи рынка — удобно и быстро. В 2024 году рынок недвижимости пережил кризис: льготную ипотеку отменили, количество сделок сократилось. Но нашему приложению удалось не только удержаться на рынке, но и увеличить продажи. Один из ключевых факторов успеха — редизайн главной страницы приложения.

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

Почему мы решились на редизайн

Наше приложение было запущено в 2020 году, и за несколько лет накопились проблемы:

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

2. Дублирование сервисов. Раздел «Профиль» начал повторять функциональность главной страницы, что вызывало путаницу.

3. Непонятные названия и иконки. Сервисы вроде Защиты сделки были непонятны пользователям, а иконки не давали никакой информативности. 

Вот таким фидбеком с нами поделились юзеры:

Мы поняли: чтобы двигаться вперёд, нужно переосмыслить главную страницу. 

Как мы подошли к редизайну

Шаг 1. Определить цели и выбрать целевой сегмент

Мы начали с изучения юнит-экономики и настройки аналитики. Раньше отчётность не позволяла понять, на какой аудитории нам стоит фокусироваться. После анализа мы сделали pivot и вместо частных лиц сосредоточились на риелторах. 

Метрики, которые мы выбрали:

• Выручка по сделкам, созданным  в мобильном приложении. 

• MAU — показатель дистрибуции и возвращаемости. 

• Оценка приложения пользователями — до редизайна она составляла 3,6 из 5. 

 Шаг 2. Исследовать потребности риелторов

Мы провели глубинные интервью с восемью риелторами и изучили историю исследований Brand Health Tracking. Выявили основные потребности:

• Отслеживание статуса сделок и сообщений в чатах с помощью push-уведомлений. 

• Удобная навигация и фильтры для поиска недвижимости. 

• Отсутствие технических ошибок.  

Шаг 3. Подготовить вводные для дизайна

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

Шаг 4. Проработать дизайн

Теперь перейдем к разбору дизайна. Меня все ещё зовут Антон и я отвечаю за дизайн мобильных приложений M2 для Android и iOS. Над продуктом работаю около двух лет. Я начал приносить артефакты для редизайна главной страницы и других экранов спустя  полгода работы в команде. Мне часто приходилось сталкиваться с legacy-паттернами или противоречивыми решениями прошлой реализации.

Решили сделать интерфейс и разделить процесс на логические шаги, которые дадут возможности для масштабирования сервисов. Мы зависимы от положения дел на рынке недвижимости, поэтому для нас очень важна модульность интерфейса. Новая главная должна уметь быстро скрывать непопулярные сервисы. Например, Ипотека был для нас флагманом в начале 2023 года, а после ключевой ставки 20%+ стала Сделка.

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

Интервью юзеров помогли принять горькую правду: названия сервисов без подсказок непонятны, а иконки не дают никакой информативности. Я сделал типичные плитки, никакого rocket science: заголовок, описание и логотип.

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

Наверное, самой «must have-фичей» по количеству упоминаний был быстрый доступ ко всем спискам заявок и сделок. Раньше списки и заявки находились в двух или трех местах и размещались на разных экранах в зависимости от роли пользователя, а если их не было, то блок не отображался.

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

Шаг 5. Как объяснить необходимость редизайна бизнесу

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

1. Цели и показатели мобильного приложения;

2. Дизайн as is;

3. Предпосылки изменений;

4. Результаты качественного исследования;

5. Дизайн на ближайшие полгода;

6. Будущее мобильного приложения.

Несколько слайдов из презентации:

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

Шаг 6. Разработка

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

1. Изменили сервисы поиска объявлений, убрали дублирующий функционал поиска;

2. Разместили сервисы поддержки на главной странице, сделали показ имени в хэдере. Переместили самые важные зарабатывающие сервисы в один горизонтальный скролл;

3. Перенесли все остальные сервисы в новую структуру, убрали дублирование функций из профиля. 

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

Шаг 7. Обратная связь и аналитика

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

На первой же неделе получили отзывы и оценки по функциональности.

Первое время собирали отзывы и оценки из писем и заполняли Excel, но потом автоматизировали в виде отчета. 

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

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

Мы подключили Microsoft Clarity, чтобы смотреть тепловые карты и видео сессий пользователей.

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

Шаг 8. Оценка результатов: что дал редизайн

Новый главный экран сократил время на поиск нужного сервиса, а must have-фичи теперь под рукой. Все остальные ‭«спящие» продукты мы положили в экран Сервисы, а ТОП-5 популярных разместили в карусели на главной странице.

Что по метрикам?

• Мы заместили выпадающие доходы от ипотеки, а выручка от сделок увеличилась в 6 раз. 

• Количество активных пользователей увеличилось на 23%.

• Оценка приложения пользователями по 5-балльной шкале изменилась с 3.6 до 4,1 после редизайна.

• Обращения в поддержку с вопросами «Где мои заявки?» сократились до 0.

Факапы и уроки

Что насчет факапов? Делимся и этим:

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

2. Экспертиза vs UX-тесты. Мы выкатили новую версию приложения, опираясь на закон Якоба-Нильсена, не дождавшись обратной связи от UX-тестирования. Он гласит: ожидания пользователя от интерфейса определяются прошлым опытом. Суть в том, что мы не нарушали привычки пользователей, и у нас были данные от них, поэтому нам повезло. Тем не менее, мы подкрепили наше решение тестами позднее: по итогу 7 из 8 гипотез подтвердились.

Планы на будущее и заключение

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

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

 А если у вас есть вопросы, пишите в комментариях — мы с радостью ответим!