История одного редизайна. Экран карты в мобильном приложении ОТП Банка

Привет, Хабр! Меня зовут Митя и я занимаюсь развитием цифровых продуктов в ДБО в ОТП Банке. В начале 2024 года мы с командой провели редизайн экрана карты в мобильном приложении. С тех пор наш подход к запуску новых функций и изменению интерфейсов эволюционировал, но этот кейс по-прежнему кажется достойным, чтобы им поделиться.

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

Поводов для редизайна экрана карты было несколько

• UX-овая: путь до целевых действий был слишком длинным, а сам интерфейс морально устарел

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

• Логическая: ранее на главном (домашнем) экране приложения отображались карты и клик по ним вёл на экран карты, что было логично. Теперь же центральной сущностью стал счёт, соответственно на обновлённом главном экране отображаются именно счета карт с указанием какие карты к ним привязаны.

Вот как выглядел старый экран карты:

Discovery

По метрикам большинство клиентов использовали экран для перехода в сценарий платежей/переводов и для просмотра реквизитов. 

Для оценки удовлетворённости мы использовали опросы CSI по 10-балльной шкале, которые активно применялись в банке на тот момент. Замер по экрану карты показал результат 8,2.

Мы также провели конкурентный анализ. В большинстве банков на тот момент уже преобладал «счётоцентричный» подход: отдельно существовали экраны счёта и карты.

Первый вариант дизайна

В первом подходе сделали 2 отдельных экрана: экран счёта с отображением привязанных к нему карт и отдельно экран карты.

Ключевые изменения:

• Ушли от вкладок "история", "платёж" и "условия"

• Избавились от "трёх точек", за которыми скрывалось меню с доступными сервисами по картам

• Сделали крупнее кнопки пополнения и оплаты

• Добавили надпись "показать реквизиты" прямо на рубашку карты, чтобы было понятнее, что на саму карту можно тапнуть

Проводим UX

Собрали кликабельный прототип. Коллеги из команды клиентского опыта провели UX-исследование на действующих клиентах банка.

В рамках исследования респондентам давалось несколько заданий, в частности, посмотреть реквизиты карты, узнать свой кредитный лимит по карте, и в целом дать фидбэк по обновлённым экранам.

Основные выводы из исследования:

• UI стал "приятнее глазу"

• Хорошо, что больше нет "трёх точек"

• Легко найти реквизиты карты

• Непонятно зачем отдельные экраны для счёта и карты

Второй вариант дизайна

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

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

Дизайн A/B-теста

Изменения экрана значительные. Метрик, на которые можем повлиять и за которыми стоит следить, много. Обсудили с аналитиками и решили проводить AAB-тест, выделив при этом приоритетные метрики для отслеживания. Причём теста по сути 2: один для дебетовых карт, другой для кредитных, т.к. всё-таки продукты разные, и экраны у них отличаются.

Ну и поскольку приложение реализовано нативно, делать доработку и проводить тест сразу на обеих платформах затратно. По совокупности факторов остановились на iOS для проведения теста.

Метрики для отслеживания и ожидаемые изменения по ним определили следующие:

Дебетовые карты

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

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

Итоги A/B-теста

Дебетовые карты

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

Случилось непредвиденное и рефинансирование на момент проведения эксперимента было недоступно клиентам - данную метрику исключили из расчётов

Дорабатываемся

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

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

• Убрали цветной фон у шапки экрана

• Добавили новые изображения карт

• Реализовали скелетон загрузки экрана

• Поправили анимацию при скролле экрана

• Скорректировали порядок блоков на экране

• Добавили небольшую анимацию с абстрактным цветным катающимся шаром в правой верхней части экрана

• Сделали онбординговое видео о новом экране при первом входе

Плавно раскатываем обновлённый вариант экрана

Конверсии в основные действия выправились, а CSI обновлённого экрана значительно вырос. 

Здесь КК - кредитная карта, ДК - дебетовая карта

Итого

Данный экран, конечно же, получил дальнейшее развитие, но это уже совсем другая история. В этой статье честно и открыто поделился тем путём, который прошла команда, что, надеюсь, было интересно. Поделитесь в комментариях, если в вашем опыте также были кардинальные переделки экранов/разделов в приложении - на какие метрики смотрели? А A/B-тесты использовали?

p.s. Большое спасибо команде: Сергей, Людмила, Азат, Андрей, Влад и Олег 🫶