Особенности программ не считывались
Чтобы понять, подходит ли программа, пользователям приходилось уходить в блог и самостоятельно разбираться в длинных условиях.
Сбер · Домклик · 2024 – 2026
Ипотечные программы
Как мы пересобрали 20+ продуктов
01 · Контекст
Одна программа — одно важное решение
Страницы ипотечных продуктов — ключевой канал, где пользователи узнают о доступных программах, прицениваются и выбирают условия для будущей покупки.
Каждая страница посвящена отдельному продукту: семейной, IT-, дальневосточной ипотеке и другим программам с собственными требованиями.
02 · Проблема
Страницы отвечали не на те вопросы
Обратная связь показала: пользователям было сложно понять программу, сравнить её с другими и быстро принять решение.
Терялся контекст Сбера
На входе было непонятно, что Домклик — это ипотека Сбера и часть единого банковского продукта.
Главное пряталось в тексте
Ключевая информация находилась в больших текстовых блоках внизу страницы и усложняла сравнение программ.
03 · Анализ рынка
12 банков и 10 параметров сравнения
Мы разобрали страницы банков-конкурентов по ключевым параметрам: преимуществам, калькулятору, требованиям, документам и сценарию подачи заявки.
Ключевые инсайты
01
Показывать, кому подходит конкретная программа.
02
Перейти к 3D-стилистике с понятными метафорами.
03
Вынести объекты недвижимости в отдельный блок.
04
Системно использовать теги и бейджи.
05
Сделать типографику наглядной и легко сканируемой.
04 · Поиск решения
КТО? ЧТО? КАК?
На рабочих встречах с продуктом, маркетингом, CEO и дизайном я предложил структуру, которая отвечает на три главных вопроса ещё до глубокого изучения страницы.
Подходит ли человек под условия программы и стоит ли изучать её дальше?
Какой объект недвижимости можно купить или построить с её помощью?
Какие шаги нужно пройти, чтобы рассчитать условия и подать заявку?
05 · Тестирование
Проверили решение на семейной ипотеке
В тестировании участвовали люди с детьми, которые планировали покупку недвижимости, но раньше не изучали условия семейной ипотеки.
Мы проверяли, достаточно ли информации на странице, чтобы понять продукт и принять решение о подаче заявки.
Скринкаст варфрейма для пользовательского тестирования
Дополнительной сложностью стало новое требование: на странице нужно было разместить полную стоимость кредита по строго фиксированным правилам и гайдлайнам.
01
Переработали блок полной стоимости кредита и его позиционирование.
02
Пересобрали сторителлинг страницы от первого экрана до заявки.
03
Убрали скрытые блоки: ключевые требования и условия стали видны сразу.
06 · Масштабирование
Один шаблон для 20+ программ
Пока семейная ипотека разрабатывалась, мы параллельно масштабировали шаблон на весь каталог продуктов.
07 · Точка входа
Пересобрали список всех программ
Визуальный язык нужно было поддержать в ключевой точке входа — на разводящей странице. Одновременно мы усилили её информативность, чтобы выбор начинался ещё до открытия карточки.
Добавили систему тегов и показываем подходящие типы объектов ещё до перехода.
Расширили краткую информацию о программе в общей выдаче.
Добавили узнаваемые 3D-иллюстрации для каждой программы.
08 · Шаблон в работе
Внедрение новой структуры
Общая структура дала каждой программе предсказуемый сценарий, сохранив условия, метафору и узнаваемость.
09 · Результаты
20+
страниц ипотечных программ получили новый дизайн и уже работают в проде