cards
Улучшил раздел с виртуальными картами в финтех сервисе. Раздел используется для контроля всех виртуальных карт пользователя, отслеживания баланса, статуса и т.д. Пользователи жаловались на перегруженность интерфейса и сложности в навигации.
Я разобрался в проблемах, переосмыслил пользовательские сценарии и предложил удобную структуру.
В результате была переработана логика отображения карт, фильтрация и взаимодействие с разделом. Это помогло сократить время сессии на 18%, увеличить долю целевых действий на 21% и снизить нагрузку на саппорт.
B2C / Web
продуктовый дизайнер, UX / UI
Задача
Улучшить раздел «Карты», который используется для управления виртуальными картами. Cделать интерфейс понятным, удобным и функциональным в условиях большого количества карт.
Решение
Я провёл аудит текущего интерфейса и проанализировал обращения в поддержку. Переработал структуру: вынес основные фильтры в отдельную панель, адаптировал интерфейс под типичные сценарии и добавил визуальные индикаторы для быстрой оценки состояния карты.
Вводные
Продакт пришёл с задачей переработать раздел, основываясь на нескольких сигналах:
Пользователи жаловались в саппорт на запутанность текущего интерфейса
Таблица не умещалась в экран, требовала горизонтального скролла и затрудняла восприятие информации
Из продуктовой аналитики стало видно, что в этом разделе часто возникают длинные сессии без целевого действия, пользователи будто бы зависают, не совершая действий
Было явно сказано: фильтрация неудобна, нужную карту найти сложно
гипотеза
Если переработать интерфейс раздела «Карты», сфокусироваться на ключевых сценариях и улучшить логику фильтрации, то пользователям станет проще ориентироваться, а путь до целевого действия сократится. Это снизит фрустрацию, количество обращений в поддержку и время на выполнение задач.
Было
Раздел был выполнен в классическом табличном виде, это приводило к ряду проблем со считыванием информации: данные выглядели перегруженными, визуальные акценты отсутствовали, присутствовал горизонтальный скролл таблицы, из-за чего не вся информация была доступна с первого взгляда.
Пользователю приходилось тратить много времени, чтобы найти нужную карту или понять её статус. При этом поиск и фильтрация работали формально, незначительно помогая сузить выбор до релевантных вариантов. Всё это усложняло выполнение базовых задач и вызывало обращения в саппорт.
Стало
Интерфейс получил новую структуру и визуальный ритм, информация теперь представлена в логически сгруппированном и легко считываемом виде.
Обновлённая таблица подчёркивает ключевые характеристики карт, облегчает навигацию за счёт визуальных маркеров и позволяет быстрее находить нужные данные.
Фильтрация и групповые действия стали интуитивнее и быстрее, с учётом реальных сценариев использования.
Сделано
Объединение некоторых характеристик в одну: "Информация о карте"
Визуальное разделение характеристик между собой для улучшения восприятия
Добавление визуальных маркеров для характеристик: платежная система, тип карты, номер карты, команда, статус
Переосмысление порядка характеристик
Избавление от ненужных свойств характеристик: отсутствие команды / 3ds
Переработка ui, добавление чередования фона строк
Добавление сортировки по балансу в хедер столбца
Переосмысление логики работы элементов "Выбрать все" и "Групповые действия с картами"
Переосмысление логики работы элементов фильтра
Переработка блока фильтра: добавление табов для быстрого взаимодействия с ключевыми сценариями, создание фильтра отвечающего запросам юзера
Проработаны визуальные маркеры для обозначения фильтра не по умолчанию
Результаты
Удалось превратить громоздкий и слабо читаемый интерфейс в инструмент, с которым удобно работать. Я пересобрал структуру отображения, улучшил визуальную иерархию и сократил фрустрацию при работе с таблицей.
Овервью
После переработки раздела пользователи стали быстрее находить нужные карты, время сессии сократилось на 18%, а доля целевых действий возросла на 21%.
На 46% уменьшилось количество обращений в саппорт по этому разделу, а сам интерфейс стал чище и проще для восприятия, горизонтальный скролл больше не требуется, фильтрация работает предсказуемо.