Как мы внедряли расчет ипотеки в карточку квартиры и боролись с мисскликами
Чтобы рассчитать ипотеку из карточки квартиры, пользователю приходилось уходить в отдельный калькулятор и вводить параметры по памяти. В этом кейсе я показываю, как мы искали оптимальное UI-решение, чтобы связать квартиру с ипотекой. Спойлер: визуальные предпочтения разошлись с реальным поведением, а тепловые карты помогли нам избавиться от мисскликов и найти чистое решение.
Контекст
Я работала продуктовым дизайнером в Россельхозбанке в направлении ипотеки для клиентов. Продукт Своё Жильё — это мобильное приложение для подбора недвижимости и оформления ипотеки с нишевой аудиторией.
Проблема в разрыве сценария
Команда только запустила MVP витрины новостроек, и из-за жестких сроков связку квартиры и ипотечной заявки осознанно убрали в бэклог. Пользователи могли подать заявку только из отдельного калькулятора, который никак не связан с квартирами.
В результате флоу заявки на ипотеку получился разорванным, нужно было запоминать параметры и вводить их вручную, что сильно усложняло процесс.
💔 Влияние на UX
Из-за лишних шагов и когнитивной нагрузки теряется контекст квартиры. В итоге растет риск закрытия приложения и ухода к конкурентам.
📉 Влияние на бизнес
Падает конверсия из просмотра квартиры в заявку. В результате банк теряет деньги на недополученных ипотечных кредитах.
💔 Влияние на UX
Из-за лишних шагов и когнитивной нагрузки теряется контекст квартиры. В итоге растет риск закрытия приложения и ухода к конкурентам.
📉 Влияние на бизнес
Падает конверсия из просмотра квартиры в заявку. В результате банк теряет деньги на недополученных ипотечных кредитах.
💔 Влияние на UX
Из-за лишних шагов и когнитивной нагрузки теряется контекст квартиры. В итоге растет риск закрытия приложения и ухода к конкурентам.
📉 Влияние на бизнес
Падает конверсия из просмотра квартиры в заявку. В результате банк теряет деньги на недополученных ипотечных кредитах.
Задача
Цели бизнеса
Увеличить конверсию в заявку на ипотеку из новостроек и снизить отток пользователей на этапе выбора
Пользователи
В основном семейные пары, которые ориентируются на льготные ставки и размер ежемесячного платежа
Миссия
Дать пользователю инструмент для бесшовного расчета ипотеки из квартиры без лишних действий
Цели бизнеса
Увеличить конверсию в заявку на ипотеку из новостроек и снизить отток пользователей на этапе выбора
Пользователи
В основном семейные пары, которые ориентируются на льготные ставки и размер ежемесячного платежа
Миссия
Дать пользователю инструмент для бесшовного расчета ипотеки из квартиры без лишних действий
Цели бизнеса
Увеличить конверсию в заявку на ипотеку из новостроек и снизить отток пользователей на этапе выбора
Пользователи
В основном семейные пары, которые ориентируются на льготные ставки и размер ежемесячного платежа
Миссия
Дать пользователю инструмент для бесшовного расчета ипотеки из квартиры без лишних действий
Моя роль в проекте
Поскольку доработка этого сценария лежала в бэклоге после запуска MVP, я инициировала ее исследование, чтобы заранее подготовить UX-решение для следующей итерации.
В мою зону ответственности входило дискавери, проектирование, тестирование и презентация решений перед продакт-менеджером.
Критерии успеха
01
Не уронить долю переходов в звонок застройщику
02
Рост доли переходов в расчет ипотеки из квартиры
03
Рост заявок на ипотеку, начатых из квартиры
01
Не уронить долю переходов в звонок застройщику
02
Рост доли переходов в расчет ипотеки из квартиры
03
Рост заявок на ипотеку, начатых из квартиры
01
Не уронить долю переходов в звонок застройщику
02
Рост доли переходов в расчет ипотеки из квартиры
03
Рост заявок на ипотеку, начатых из квартиры
Главный фокус банка: Рост числа одобренных кредитов из этого флоу
Дискавери
Сценарий выбора недвижимости хорошо изучен рынком. Чтобы сэкономить ресурсы, я отказалась от долгих глубинных интервью и сфокусировалась на кабинетных исследованиях и бенчмарках.
Поведенческие особенности
Изучила открытые исследования, чтобы поглубже разобраться в ипотечной ситуации и трендах на 2024 год: ДОМ.РФ, Циан, РБК, Состав, CMS Magazine.
Основные покупатели
72% покупателей состоят в браке, а семейная ипотека занимает 90% на рынке новостроек
Платеж важнее цены
Выбирают жилье эмоциями, но финальное решение принимают по размеру ежемесячного платежа
Мобилки для выбора
Квартиры смотрят со смартфона на бегу. Но для заполнения заявки чаще всего переходят на десктоп
Страх звонков менеджеров
Главный барьер для перехода к расчетам — боязнь навязчивых продажников
Нелинейный процесс
Поиск квартиры происходит в короткие, но частые сессии с возвратом к одним и тем же вариантам для сравнения
Оформляют сами
54% пользователей готовы оформлять ипотеку самостоятельно онлайн, если дать понятный инструмент
Основные покупатели
72% покупателей состоят в браке, а семейная ипотека занимает 90% на рынке новостроек
Платеж важнее цены
Выбирают жилье эмоциями, но финальное решение принимают по размеру ежемесячного платежа
Мобилки для выбора
Квартиры смотрят со смартфона на бегу. Но для заполнения заявки чаще всего переходят на десктоп
Страх звонков менеджеров
Главный барьер для перехода к расчетам — боязнь навязчивых продажников
Нелинейный процесс
Поиск квартиры происходит в короткие, но частые сессии с возвратом к одним и тем же вариантам для сравнения
Оформляют сами
54% пользователей готовы оформлять ипотеку самостоятельно онлайн, если дать понятный инструмент
Основные покупатели
72% покупателей состоят в браке, а семейная ипотека занимает 90% на рынке новостроек
Платеж важнее цены
Выбирают жилье эмоциями, но финальное решение принимают по размеру ежемесячного платежа
Мобилки для выбора
Квартиры смотрят со смартфона на бегу. Но для заполнения заявки чаще всего переходят на десктоп
Страх звонков менеджеров
Главный барьер для перехода к расчетам — боязнь навязчивых продажников
Нелинейный процесс
Поиск квартиры происходит в короткие, но частые сессии с возвратом к одним и тем же вариантам для сравнения
Оформляют сами
54% пользователей готовы оформлять ипотеку самостоятельно онлайн, если дать понятный инструмент
Бенчмарки
Я проанализировала прямых конкурентов (ДомКлик, Метр квадратный), агрегаторов (Циан, Авито) и застройщиков (ПИК, Самолет).
Рынок использует два подхода:
Мини-калькулятор на экране квартиры. Позволяет быстро прицениться, но визуально теряется в карточке объекта.
Подробный калькулятор на отдельном экране. Дает точный расчет, но слишком рано уводит пользователя из контекста выбора квартиры.
Оба подхода решают задачу расчета, но мини-калькулятор легко потерять при просмотре квартиры, а подробный калькулятор слишком рано переводит пользователя в режим оформления заявки.
В результате расчет ипотеки либо остается незамеченным, либо происходит уже вне контекста конкретной квартиры, когда решение по ней ещё не сформировано.
Генерация и отбор идей
После дискавери мы с лидом нагенерили идеи, как можно связать квартиру и калькулятор. Чтобы не раздувать первую итерацию, приоритизировали идеи по Value/Effort. Сложные фичи ушли в бэклог, а в работу мы взяли самые быстрые и ценные решения.
Берем в MVP
Калькулятор в шторкеМинимум полейСохранение параметров расчета в одной сессииВывод платежа в карточке квартиры
В бэклог
Калькулятор досрочного погашенияШеринг расчетов с семьейПодборка квартир в отдельном калькулятореЭкспорт результатов расчета
Берем в MVP
Калькулятор в шторкеМинимум полейСохранение параметров расчета в одной сессииВывод платежа в карточке квартиры
В бэклог
Калькулятор досрочного погашенияШеринг расчетов с семьейПодборка квартир в отдельном калькулятореЭкспорт результатов расчета
Берем в MVP
Калькулятор в шторкеМинимум полейСохранение параметров расчета в одной сессииВывод платежа в карточке квартиры
В бэклог
Калькулятор досрочного погашенияШеринг расчетов с семьейПодборка квартир в отдельном калькулятореЭкспорт результатов расчета
Гипотезы
1. Связь квартиры и калькулятора
Если связать выбор квартиры и калькулятор в одном сценарии, то конверсия в заявку вырастет, потому что люди принимают решение по квартире, а не абстрактным цифрам
2. Платеж — точка входа
Если сделать сумму ежемесячного платежа точкой входа в калькулятор, то кликабельность (CTR) вырастет, потому что цифра привлекает внимание и сразу отвечает на вопрос «потяну ли я»
3. Минимум усилий
Если открывать расчет в шторке с минимумом полей, то отток пользователей (Drop-off) снизится, потому что пользователи хотят приложить минимум усилий на этапе приценки
4. Сохранение параметров
Если сохранять параметры расчета при переходе между квартирами, то глубина просмотра вырастет, потому что пользователю не придется каждый раз заново вводить данные для сравнения
1. Связь квартиры и калькулятора
Если связать выбор квартиры и калькулятор в одном сценарии, то конверсия в заявку вырастет, потому что люди принимают решение по квартире, а не абстрактным цифрам
2. Платеж — точка входа
Если сделать сумму ежемесячного платежа точкой входа в калькулятор, то кликабельность (CTR) вырастет, потому что цифра привлекает внимание и сразу отвечает на вопрос «потяну ли я»
3. Минимум усилий
Если открывать расчет в шторке с минимумом полей, то отток пользователей (Drop-off) снизится, потому что пользователи хотят приложить минимум усилий на этапе приценки
4. Сохранение параметров
Если сохранять параметры расчета при переходе между квартирами, то глубина просмотра вырастет, потому что пользователю не придется каждый раз заново вводить данные для сравнения
1. Связь квартиры и калькулятора
Если связать выбор квартиры и калькулятор в одном сценарии, то конверсия в заявку вырастет, потому что люди принимают решение по квартире, а не абстрактным цифрам
2. Платеж — точка входа
Если сделать сумму ежемесячного платежа точкой входа в калькулятор, то кликабельность (CTR) вырастет, потому что цифра привлекает внимание и сразу отвечает на вопрос «потяну ли я»
3. Минимум усилий
Если открывать расчет в шторке с минимумом полей, то отток пользователей (Drop-off) снизится, потому что пользователи хотят приложить минимум усилий на этапе приценки
4. Сохранение параметров
Если сохранять параметры расчета при переходе между квартирами, то глубина просмотра вырастет, потому что пользователю не придется каждый раз заново вводить данные для сравнения
Дизайн первой версии
При проектировании точки входа я столкнулась с ограничением: нужно было сделать старт расчета заметным, но при этом сохранить на экране главную для бизнеса кнопку — «Позвонить застройщику». Я собрала два концепта, чтобы проверить, как лучше их совместить:
Вариант 1. Шторка
Залипает при скролле и всегда под рукой. Но есть риск, что из-за близости к кнопке звонка пользователи будут промахиваться
Вариант 2. Баннер
Четко отделяет расчет от звонка (привычный паттерн). Но есть риск, что его просто пролистнут из-за баннерной слепоты.
Вариант 1. Шторка
Залипает при скролле и всегда под рукой. Но есть риск, что из-за близости к кнопке звонка пользователи будут промахиваться
Вариант 2. Баннер
Четко отделяет расчет от звонка (привычный паттерн). Но есть риск, что его просто пролистнут из-за баннерной слепоты.
Вариант 1. Шторка
Залипает при скролле и всегда под рукой. Но есть риск, что из-за близости к кнопке звонка пользователи будут промахиваться
Вариант 2. Баннер
Четко отделяет расчет от звонка (привычный паттерн). Но есть риск, что его просто пролистнут из-за баннерной слепоты.
Мы с командой не смогли выбрать однозначного победителя, поэтому забрали оба на тестирование.
Как работает базовый флоу
Расчет открывается поверх карточки квартиры.
В калькуляторе минимум полей для быстрой приценки.
Если поменять условия в калькуляторе и закрыть его, стоимость платежа в карточке квартиры обновится автоматически. Это позволяет бесшовно сравнивать квартиры со своими условиями.
Опрос и Side-by-Side
Чтобы проверить гипотезы и выбрать лучший концепт, я запустила опрос на 193 человека.
Я задавала базовые вопросы — например, про момент возникновения потребности в расчете ипотеки. В итоге выяснилось, что 82,5% респондентов, как и предполагалось, используют калькулятор для быстрой приценки с фокусом на платеже, а не для старта заявки. Моя главная гипотеза подтвердилась!
В Side-by-Side голоса разделились почти поровну: 48,7% против 51,3%. Это даже забавно)
Стало понятно, что опираться только на визуальные предпочтения нельзя и нужно проверять реальное поведение.
UX-тестирование и First-click
Чтобы проверить реальное поведение, я запустила два немодерируемых теста на кликабельных прототипах (по 30 человек на вариант).
Задачей было найти, где подать заявку на ипотеку. Я специально не просила «найти калькулятор», чтобы усложнить сценарий и проверить, насколько нативно считываются точки входа.
Почти все пользователи успешно выполнили задание в обоих вариантах -> сценарий валиден
Медианное время прохождения в баннере быстрее и субъективная оценка сложности легче (1,43 против 1,97 в шторке, где 1 — очень легко)
Тепловые карты показали различия в восприятии сценариев и вскрыли критические проблемы.
В варианте со шторкой пользователи меньше промахивались по иконке настроек, но при этом чаще совершали хаотичные клики по экрану. Качественный фидбек это объяснил: расчет визуально конкурирует с кнопкой звонка. Люди не сразу понимают, где начать сценарий без контакта с менеджером.
В варианте с баннером сценарий проходили быстрее. НО! Именно здесь пользователи чаще всего ошибочно кликали на зеленую кнопку «Позвонить застройщику», путая ее с расчетом. Кроме того, часть аудитории восприняла баннер как обычную рекламу, не ожидая увидеть внутри полноценный калькулятор.
В итоге наши изначальные опасения подтвердились: баннер воспринимается как реклама, а шторка сливается с кнопкой звонка. Однозначного решения опять не оказалось, поэтому мы решили доработать шторку, ибо с баннером особо ничего не поделаешь.
Доработка решения
Изначально я хотела внедрить нестандартный паттерн для ипотечных сервисов (мини-шторку), но тесты спустили меня на землю. Мы пришли к классическому варианту не потому, что сдались, а потому что доказали цифрами: в ипотеке людям нужна предсказуемость, а не визуальные инновации.
В финальной версии я сделала решение проще:
Bottom Action с двумя кнопками. Развела действия визуально: сохранила приоритет звонка (Primary), а расчет вынесла в Secondary.
Чистая анимация. Убрала сложный выезд шторки из-под кнопок. Теперь калькулятор просто открывается поверх контента, сохраняя контекст квартиры.
В итоге конфликтующие действия отделены, что исключает ложные нажатия и страх обязательств.
Итоги
Сэкономили ресурсы до разработки
Проверив гипотезы на прототипах, мы отловили критические ошибки (слепоту к баннерам и миссклики в шторке) до старта разработки
Сняли стресс, сохранив лиды
Разделив четко расчет и звонок, мы избавили пользователя от страха случайного звонка и при этом сохранили звонок на видном месте
Сэкономили ресурсы до разработки
Проверив гипотезы на прототипах, мы отловили критические ошибки (слепоту к баннерам и миссклики в шторке) до старта разработки
Сняли стресс, сохранив лиды
Разделив четко расчет и звонок, мы избавили пользователя от страха случайного звонка и при этом сохранили звонок на видном месте
Сэкономили ресурсы до разработки
Проверив гипотезы на прототипах, мы отловили критические ошибки (слепоту к баннерам и миссклики в шторке) до старта разработки
Сняли стресс, сохранив лиды
Разделив четко расчет и звонок, мы избавили пользователя от страха случайного звонка и при этом сохранили звонок на видном месте
Что было дальше
Моя работа над этим проектом завершилась успешной передачей макетов в разработку. Вскоре после этого я покинула компанию, поэтому у меня нет финальных цифр с прода. Но я оставила команде четкий план для запуска A/B-теста, чтобы они могли измерить успех фичи.
За какими метриками нужно следить в тесте:
CR в звонок застройщику: критически важно, чтобы он не просел
CR в открытие калькулятора: ожидаем рост за счет понятной инфо-плашки (и, как следствие, снижение drop-off rate на этом шаге)
CR в заявку на ипотеку: метрика успешности для банка, ожидаем качественный рост
Что я вынесла из проекта
01
В сложных сценариях (ипотека) людям нужна предсказуемость, а не визуальные эксперименты
02
Жесткие рамки заставляют отбрасывать лишнее и находить по-настоящему элегантные решения
03
Тесты не всегда дают однозначный ответ, но помогают подсветить паттерны поведения
01
В сложных сценариях (ипотека) людям нужна предсказуемость, а не визуальные эксперименты
02
Жесткие рамки заставляют отбрасывать лишнее и находить по-настоящему элегантные решения
03
Тесты не всегда дают однозначный ответ, но помогают подсветить паттерны поведения
01
В сложных сценариях (ипотека) людям нужна предсказуемость, а не визуальные эксперименты
02
Жесткие рамки заставляют отбрасывать лишнее и находить по-настоящему элегантные решения
03
Тесты не всегда дают однозначный ответ, но помогают подсветить паттерны поведения
