Привет, меня зовут Юля Карпова, я дизайнер в ОТП Бизнес, занимаюсь разработкой интерфейса для Daily Banking.
Недавно наша команда обновила раздел истории операций. Я хочу рассказать о процессе исследования и редизайна раздела. В первую очередь, статья может заинтересовать дизайнеров, UX-исследователей, продакт-менеджеров и других участников профессионального сообщества. Также, клиентов финтеха: малый, средний и корпоративный бизнес. Ваши комментарии «из первых рук» особенно интересны.
История
Осенью 2023 года произошёл ребрендинг ОТП Банка, в рамках которого полностью изменился визуальный стиль, цветовая палитра и коммуникационная стратегия бренда в целом.
Изменения адаптировались для цифровых носителей, что естественно привело к пересмотру UI/UX в интернет-банке. Подробности в этой статье.
Введение
Первой масштабной доработкой после релиза стал раздел истории операций. Мы собираем обратную связь от пользователей и анализируем их поведение в интерфейсе. Внутри команды сформировалась гипотеза о том, что пользователям сложно находить некоторые операции, особенно если они спрятаны под множеством фильтров. История – самый частотный функционал, и мы решили провести исследование чтобы изучить состав фильтров и их расположение на странице.
Фильтры выглядели так:
Они были разбиты на три части. Часть фильтров располагалась над лентой операций, остальные справа от нее.
Исследования, первый этап
На первом этапе мы начали с того, что провели вторичные исследования, и они были нацелены на выявление шаблонов взаимодействия с фильтрами. Сфокусировавшись на рынке финтеха, определили повторяющиеся паттерны и сравнили с тем, что было у нас.
Интерфейсы, которые мы изучали в исследовании, хоть на первый взгляд и сильно отличались друг от друга, имели несколько повторяющихся решений. Я составила список всех встречающихся фильтров и затем проранжировала их в порядке убывания их частотности. Самыми часто встречающимися стали: «Поиск», «Входящие» и «Исходящие», а также «Период». Еще одной частым, но не обязательным был фильтр «На подпись».
В старом интерфейсе эти фильтры были, но располагались не в соответствии с частотой их использования, и как показали дальнейшие исследования, не сразу считывались пользователями.
Исследования, второй этап
На втором этапе мы занялись подготовкой к основному исследованию. Во-первых, хотелось выяснить, на сколько список, получившийся при анализе, реально согласуется с потребностями пользователей. Во-вторых, сразу на этапе исследования, предложить более удобный вариант.
Гипотезы, которые мы вынесли на исследование:
Множество фильтров сбивают с толку, рассеивают внимание респондентов
Далее самыми частотными фильтрами являются: «Входящие» и «Исходящие», «Период» и должны быть расположены в главной области
Строку поиска мы не рассматривали как одну из самых важных
Прочие фильтры могут быть спрятаны
Для исследования мы выбрали формат глубинного интервью. Мы подготовили 3 прототипа.
Первый прототип очень мало отличался от текущей на тот момент реализации. Мы убрали некоторые вкладки, например «Картотеку», «Отклоненные», фильтры оставили как есть.
Во втором прототипе убрали боковые фильтры, оставили самые частотные и скомпоновали их в выпадающие табы.
Третий прототип был, согласно гипотезе, самым близким к новой реализации. Отказались от боковых фильтров, оставили «Поиск», «Период», «Входящие», «Исходящие» и «На подпись».
Менее частотные фильтры убрали в боковое выпадающее меню.
Мы опросили 36 респондентов, разбитых на три группы. Каждой группе мы показывали по одному варианту прототипа.
Вопросы, которые мы задавали:
Как ищете нужную операцию?
Какими фильтрами чаще всего пользуетесь?
Дали 2 задачи:
Вам позвонил ваш контрагент и говорит что платеж не прошел. Вам нужно найти где этот платеж, ваши действия?
Ваш контрагент сообщил о том, что выставил счёт на оплату. Данный вид платежа требует вашей подписи. Вам нужно найти и провести этот платёж. Где этот платеж, куда пойдете?
Результаты исследования
Более 50% опрошенных не видят все нужные фильтры, необходимо расположить их в зоне внимания.
75% в первую очередь пользуются поиском. Следовательно, поиск нужно переместить над лентой операций.
90% используют только фильтры «Поиск», «Период», «Входящие» и «Исходящие».
Эти же фильтры являются самыми частыми практически у 100% респондентов.
Также, обязательно нужно показывать платежи «На подпись».
У 60% разбивка фильтров на верхние и боковые вызвала затруднение. Решили, что разбивать их не нужно, так как это сбивает пользователя.
Обилие фильтров рассеивает внимание. Этот вывод отчасти коррелирует с предыдущим, однако стало очевидно, что и само количество (более 4-6) выпадает из зоны внимания.
Итоговый интерфейс
Финальный макет выглядит так:
При разработке интерфейса, мы учли, помимо результатов исследования, фидбэк пользователей, которые работают с большим объёмом платежей.
Размещаем фильтры над лентой операций, так как это самый очевидный паттерн навигации при поиске
Используем самые частотные фильтры
Показываем вкладку «На подпись», так как если таковые платежи есть, их необходимо видеть в первую очередь.
Прочие настройки скрываем под кнопкой «Фильтры» чтобы не перегружать внимание и дать возможность точной настройки при необходимости.
Добавили кнопку сортировки по дате, сумме и контрагенту. Данный функционал необходим при большом объёме операций.
Добавили кнопку одновременного сброса всех фильтров и сортировки.
Увеличили ширину ленты операций, уменьшив боковую область.
На месте, где были боковые фильтры, показываем обороты, так как место логичнее было бы использовать для дополнительной информации.
В появляющемся по клику модальном окне показываем все возможные настройки, которые позволяют точно отфильтровать ленту
В настоящий момент личный кабинет для ИП, ООО и корпоративных клиентов не отличается. В других банках, как правило, интерфейс для корпораций выглядит иначе. Это связано с большими объёмами совершаемых операций, количеством настроек и действий со счетами. Мы ищем баланс, чтобы и МСБ и Корп могли удовлетворять свои потребности внутри нашего интернет банка. По умолчанию мы показываем только базовые настройки, и у пользователя есть возможность раскрыть меню и более точно настроить ленту. Например, найти все отклоненные платежи контрагенту по определённому счёту за прошлый квартал.
Планы на будущее
Вкратце продолжать исследования :-) Функционал уже несколько месяцев в проде, мы видим положительную динамику, основываясь на отзывах и общении с пользователями. Наш NPS растет и удобство интерфейса занимает в этой метрике не последнее место. Если для повышения NPS будет необходимы любые доработки, мы готовы искать новые решения. Это зависит от дальнейших исследований, в которых мы продолжим разбираться в потребностях наших клиентов.