Как мы внедряли расчет ипотеки в карточку квартиры и боролись с мисскликами

Чтобы рассчитать ипотеку из карточки квартиры, пользователю приходилось уходить в отдельный калькулятор и вводить параметры по памяти. В этом кейсе я показываю, как мы искали оптимальное UI-решение, чтобы связать квартиру с ипотекой. Спойлер: визуальные предпочтения разошлись с реальным поведением, а тепловые карты помогли нам избавиться от мисскликов и найти чистое решение.

Компания

Россельхозбанк

Направление

B2C

Тип

Mobile

Год

2024

Попытка цифровизации провалилась

Контекст

Банк ДОМ.РФ кредитует застройщиков. Чтобы выдать деньги, сотрудники должны обработать сотни файлов (сметы, акты, отчеты)

Сотрудники вручную сортируют и распределяют сотни файлов для 20 подразделений. Ручная обработка приводит к ошибкам и потерям.

Контекст

⏳

8 часов на ручную обработку 500+ файлов тормозит работу

📉

CSI < 80% из-за потерь файлов, дозапросов и задержек выдач

❌

Первые интерфейсы делались без дизайнера → UX получился неудобным → релиз отменили

Задача

Цель бизнеса

Ускорить процесс и снизить рутину
Сэкономить 56,9 млн ₽ в год
Исключить потери и повысить CSI

Цель бизнеса

Ускорить процесс и снизить рутину
Сэкономить 56,9 млн ₽ в год
Исключить потери и повысить CSI

Миссия

Сделать систему настолько удобной, чтобы сотрудники добровольно отказались от привычных папок

Миссия

Сделать систему настолько удобной, чтобы сотрудники добровольно отказались от привычных папок

Моя роль

Продуктовый дизайнер end-to-end: аудит неудачного релиза прототипы → тесты → передача в разработку

Моя роль

Продуктовый дизайнер end-to-end: аудит неудачного релиза прототипы → тесты → передача в разработку

Критерии успеха

Снизить Time On Task на обработку одного пакета документов
Получить позитивный фидбек

Критерии успеха

Снизить Time On Task на обработку одного пакета документов
Получить позитивный фидбек

Дискавери: аудит процесса

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

В зависимости от выбранного типа документа появляется свой набор полей (атрибутов) для заполнения. Всего в системе 540+ типов, а внутри одного типа может быть до 20 полей.

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

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

Гипотезы и концепт

Сплит-экран

Если объединить файлы и атрибуты на одном экране, то скорость работы увеличится, потому что сотрудникам не придётся лишних действий

Сплит-экран

2 режима заполнения

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

2 режима заполнения

Приоритизация и скоуп MVP

В концепте получилось много интерфейсных идей. Чтобы ускорить запуск, мы прогнали все через формулу Value / Effort (Ценность / Сложность).

В MVP вошло только смысловое ядро, решающее главные боли пользователей. Сложные фичи, вроде Drag&Drop, были отложены на потом.

Берем в MVP

Две колонкиДва режима заполненияМассовые и точечные действия над файламиПредпросмотрОшибочные файлыСостояние заполненности

В бэклог / Отложено

Шкала прогрессаГруппировка drag&dropДействия при смене режимовДействия над полямиИзменение компонента таблицы

Берем в MVP

В бэклог / Отложено

Берем в MVP

В бэклог / Отложено

Дизайн первой версии

Два режима заполнения

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

Два режима заполнения

Принцип работы

Введённые данные сохраняются автоматически, смена режимов происходит без потери прогресса и лишних действий.

Принцип работы

Два режима заполнения

Доработка решения

Изначально я хотела внедрить нестандартный паттерн для ипотечных сервисов (мини-шторку), но тесты спустили меня на землю. Мы пришли к классическому варианту не потому, что сдались, а потому что доказали цифрами: в ипотеке людям нужна предсказуемость, а не визуальные инновации.

В финальной версии я сделала решение проще:

Bottom Action с двумя кнопками. Развела действия визуально: сохранила приоритет звонка (Primary), а расчет вынесла в Secondary.
Чистая анимация. Убрала сложный выезд шторки из-под кнопок. Теперь калькулятор просто открывается поверх контента, сохраняя контекст квартиры.

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

Количественный замер

С коллегами по команде мы протестили старый и новый интерфейс по 3 раза

Ускорение на 24%

Среднее время прохождения сценария сократилось с 2:44 до 2:04 минут

Ускорение на 24%

Среднее время прохождения сценария сократилось с 2:44 до 2:04 минут

Стабильный результат

Снизился разброс времени (дисперсия), потому что мы меньше путались в действиях в новом варианте

Стабильный результат

Снизился разброс времени (дисперсия), потому что мы меньше путались в действиях в новом варианте

Что было дальше

Моя работа над этим проектом завершилась успешной передачей макетов в разработку. Вскоре после этого я покинула компанию, поэтому у меня нет финальных цифр с прода. Но я оставила команде четкий план для запуска A/B-теста, чтобы они могли измерить успех фичи.

За какими метриками нужно следить в тесте:

CR в звонок застройщику: критически важно, чтобы он не просел
CR в открытие калькулятора: ожидаем рост за счет понятной инфо-плашки (и, как следствие, снижение drop-off rate на этом шаге)
CR в заявку на ипотеку: метрика успешности для банка, ожидаем качественный рост

Что я вынесла из проекта

01

В сложных сценариях (ипотека) людям нужна предсказуемость, а не визуальные эксперименты

02

Жесткие рамки заставляют отбрасывать лишнее и находить по-настоящему элегантные решения

03

Тесты не всегда дают однозначный ответ, но помогают подсветить паттерны поведения

01

В сложных сценариях (ипотека) людям нужна предсказуемость, а не визуальные эксперименты

02

Жесткие рамки заставляют отбрасывать лишнее и находить по-настоящему элегантные решения

03

Тесты не всегда дают однозначный ответ, но помогают подсветить паттерны поведения

01

В сложных сценариях (ипотека) людям нужна предсказуемость, а не визуальные эксперименты

02

Жесткие рамки заставляют отбрасывать лишнее и находить по-настоящему элегантные решения

03

Тесты не всегда дают однозначный ответ, но помогают подсветить паттерны поведения

Следующий кейс

VK Музыка

Как я переделала главную страницу VK Музыки в кастомизируемый дашборд

VK Музыка

Как я переделала главную страницу VK Музыки в кастомизируемый дашборд

Я открыта к новым вызовам и интересным проектам. Давайте знакомиться!

Написать в тг