Кредитные карты

Контекст

• Платформы: общий нативный экран для трёх платформ — iOS, Android, Web.
• Команда: продакт, техлид, аналитик, 3 разработчика, 3 тестировщика.
• Период: 2024–2025.

Проблема

Экран задолженности был сильно перегружен: избыточный текст, множество отдельных категорий долга — просроченный основной долг, начисленные проценты, неустойки, судебные расходы и другие, — даты и цифры без ясной структуры. С каждой новой фичей перегрузка только росла, а клиенты путались и часто звонили в контакт-центр, чтобы разобраться в задолженности.

Исследование 2024 года подтвердило: бо́льшая часть респондентов испытывала трудности именно с этим экраном. Но одного клиентского опыта было недостаточно, чтобы получить бюджет на переделку — нативный экран общий для трёх платформ, изменения стоят дорого и зависят от релизных циклов каждой. Команда рассматривала переработку как затраты без ясной пользы для метрик, которые она отслеживала.

Что изменилось

Возможность провести редизайн появилась с выходом нового продукта — кредитной карты без грейс-периода. Логика старого экрана строилась вокруг льготной задолженности, а новый продукт требовал сместить фокус на процентную задолженность: не все пользователи собирались покупать льготный период.

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

Моя задача

• Провести качественное исследование текущего экрана
• Составить план доработок и согласовать с бизнесом и контакт-центром
• Пересобрать структуру экрана и упростить его

Проведение качественного исследования текущего экрана

Совместно с UX-исследователями провели качественное исследование на семь респондентов и выявили множество проблем. Вот лишь часть из них:

• Слишком много текста, сложных формулировок, дат и цифр — информация тяжело считывается
• Путаница между терминами: не все отличали «льготный период» и «расчётный период»
• Механизм начисления процентов по задолженности непрозрачен: не все пользователи смогли объяснить, откуда взялись проценты
• Неясно, почему льготная задолженность может быть меньше общей

План доработок

После исследования я составил план доработок из нескольких шагов:

• Вынести процентную задолженность на один уровень с льготной. Пользователи могут совершить операцию вне льготного периода и даже не заметить этого — теперь им будет проще следить за своими тратами
• Объединить просроченную задолженность с обычной и избавиться от лишнего экрана
• Пересобрать ячейки льготных периодов: сократить количество дат и визуального шума, которые усложняли восприятие
• Собрать глоссарий по ключевым терминам
• Отполировать формулировки в интерфейсе: небольшие точечные информеры помогают в навигации

Редизайн архитектуры экрана

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

Объединение экранов обычной и просроченной задолженности

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

Ячейки платежей стали цельными фразами

А ещё пересобрал ячейки: облегчил формулировки и переписал их так, чтобы каждая читалась как цельное предложение — «Оплатите до 30 июня 6 000 рублей за покупки 1–31 марта».

Появился глоссарий с частыми формулировками

На экране появилась кнопка с маскотом Газпромбанка Газиком, которая предлагает разобраться с кредитной картой. Внутри лежат основные термины, которые употребляются в интерфейсе и документах, связанных с кредитными картами — расчётный период, обязательный платёж, виды задолженности и так далее. Теперь банк и клиент смогут говорить на одном языке.

Информеры и формулировки в интерфейсе

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

Осталось согласовать редизайн с бизнесом и КЦ, а также провести контрольное исследование

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

Перед началом разработки решили провести контрольное исследование и поняли, что двигались в правильном направлении: если раньше при выполнении заданий респонденты совершали ошибки в 5–6 случаях из 7, то с новыми экранами количество ошибок упало до 1–2 из 5. Бизнес был удовлетворён результатом, и вскоре новая версия экрана была разработана, как раз к выходу нового продукта.

Результат

Когда я собирал метрики перед редизайном, то заметил закономерность: когда на рынок выходит продукт с новой механикой, КЦ фиксирует дополнительный приток жалоб процентов на 10–15, который затем плавно спадает. Это легко объясняется самой сутью нового продукта — клиенты не всегда верно им пользуются, но со временем учатся.

Спустя полгода я собрал метрики и выяснил, что удалось не только «сбить» этот пик, но и выйти в минус — новый экран медленно и верно уменьшал Claim Rate. А в качестве побочного эффекта заметил увеличение DAU на 13% — это можно объяснить тем, что экран стал удобнее и отзывчивее, и к нему стали чаще обращаться вместо звонка в КЦ.

-30%

жалоб по тематикам «Задолженность» и «Льготный период»

+13%

DAU экрана «Задолженность»

Итоги работы и выводы

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

← Предыдущий кейс — «Рабочий стол»