История транзакций — один из самых посещаемых разделов финансового сервиса
Пользователи регулярно заходят в него чтобы:
проверить списания
найти нужную операцию
отследить регулярные платежи
скачать или проверить детали перевода
контролировать личные расходы
Несмотря на высокую частность использования, текущий интерфейс вызывал сложности при поиске операций и анализе расходов. Проект был направлен на переосмысление сценария работы с историей операций для веб и мобильных платформ
Роль
Отвечала за полный цикл переработки сценария истории операций: анализ поведения пользователей, формирование гипотез, проектирование решения и дизайн интерфейса
UX-аудит текущего решения;
проведение discovery
анализ пользовательских сценариев
проектирование новой структуры раздела
создание user flow
проектирование desktop и mobile интерфейсов
проработка дизайн-системных компонентов
Зона ответственности:
Продуктовая проблема
История операций являлась одним из самых используемых экранов продукта, однако пользователи регулярно сталкивались со сложностями:
было трудно быстро найти нужную транзакцию
фильтрация была перегруженной и малозаметной
пользователи теряли контекст при просмотре длинного списка операций
интерфейс плохо масштабировался под разные сценарии
мобильная версия не позволяла эффективно работать с фильтрами и деталями операций
Это влияло не только на пользовательский опыт, но и на восприятие
прозрачности финансового сервиса
Цели проекта
1. Бизнес-цели
2. Продуктовые цели
3. UX-цели
снизить количество обращений в поддержку, связанных с поиском операций
повысить удобство контроля финансов
увеличить доверие пользователей к сервису
улучшить usability одного из самых посещаемых разделов продукта
сократить время поиска транзакций
упростить сценарий фильтрации
улучшить читаемость истории операций
сделать сценарий единым для web и mobile
уменьшить когнитивную нагрузку
повысить скорость выполнения ключевых действий
улучшить визуальную иерархию
сделать интерфейс более предсказуемым
_________________________________________________________________________________________________________________________
_________________________________________________________________________________________________________________________
Исследования
/ UX-аудит:
Позволил выявить проблемы навигации, визуальной иерархии и структуры интерфейса
/ Анализ пользовательских сценариев:
Помог определить основные действия внутри раздела истории операций
/ Competitive research:
Были изучены решения банковских и fintech-продуктов для сравнения подходов
к фильтрации, поиску и отображению транзакций
/ Интервью и обратная связь:
Были проанализированы повторяющиеся пользовательские проблемы
и паттерны поведения
Что важно было понять
Перед началом проектирования было важно определить:
какие сценарии наиболее важны для пользователей
какие проблемы возникают чаще всего
какие действия пользователи совершают регулярно
где именно пользователи теряют время
какие части интерфейса создают перегрузку
Основные боли пользователей
1. Сложно найти нужную операцию
2. Фильтры были перегружены
Большое количество параметров усложняло взаимодействие
и создавало ощущение перегруженности
__________________________________________________________________________________________________________
3. Не хватало визуальной структуры
4. Mobile-сценарий был неудобным
При большом количестве транзакций пользователи тратили слишком
много времени на поиск нужного платежа
Список операций воспринимался как однотипный поток данных
без акцентов и приоритетов
На мобильных устройствах пользователям приходилось совершать
слишком много действий для фильтрации и просмотра деталей операций
___________________________________________________________________________________________________________
__________________________________________________________________________________________________________
JBTD
Когда
Я хочу быстро отфильтровать и распознать нужную транзакцию
Я хочу видеть понятную структуру операций
Я хочу выполнять ключевые действия одной рукой и без сложной навигации
Когда я анализирую расходы
Когда я пользуюсь мобильным приложением
Чтобы контролировать свои финансы без лишнего стресса
Чтобы быстро понимать, куда уходят деньги
Чтобы не тратить лишнее время
мне нужно быстро проверить или найти конкретную операцию
___________________________________________________________________________________________________________
___________________________________________________________________________________________________________
Гипотезы
Гипотеза 1
Гипотеза 2
Гипотеза 3
Почему мы так посчитали:
Если упростить систему фильтрации, пользователи смогут быстрее
находить нужные операции
Почему мы так посчитали:
фильтры были визуально перегружены
пользователи редко использовали расширенные параметры
ключевые сценарии требовали слишком много действий
операции выглядели одинаково
важные данные не имели визуального приоритета
пользователи тратили больше времени на сканирование списка
текущий mobile flow содержал лишние шаги
взаимодействие с фильтрами занимало слишком много времени
Если улучшить визуальную иерархию списка, пользователи будут быстрее считывать информацию
Почему мы так посчитали:
Если адаптировать mobile-сценарий под быстрые действия, пользователи смогут
эффективнее работать с историей операций на ходу
___________________________________________________________________________________________________________
___________________________________________________________________________________________________________
Trades off
Во время проектирования было важно сохранить баланс между:
скоростью выполнения основных сценариев
гибкостью фильтрации
масштабируемостью интерфейса
Изначально рассматривался вариант с отображением всех фильтров
одновременно. Однако такой подход перегружал интерфейс и усложнял
быстрые пользовательские сценарии
В результате фильтрация была разделена на быстрые фильтры и расширенные параметры.
Это позволило сохранить функциональность без перегрузки интерфейса
Information architecture
Была пересобрана структура раздела:
фильтры получили более логичную группировку
основные действия стали заметнее
детали операций были вынесены в отдельный понятный сценарий
список транзакций стал легче для сканирования
User flow
Пользователь открывает историю операций и:
просматривает список транзакций
использует быстрые фильтры
находит нужную операцию
открывает детали транзакции
Целью было сократить количество лишних действий и сделать сценарий
максимально прямолинейным
Итерации
Первая концепция
Что показал review
В итоговом решении
В первоначальной версии фильтры занимали отдельную крупную область интерфейса
и содержали большое количество параметров одновременно. Такой подход делал
интерфейс функциональным, но визуально тяжелым
Во время анализа стало понятно, что пользователи тратят слишком много времени на взаимодействие с фильтрами. Интерфейс выглядел сложнее, чем был на самом деле
основные фильтры стали компактнее
второстепенные параметры были вынесены отдельно
visual hierarchy была усилена
список операций стал легче для scanability
___________________________________________________________________________________________________________
___________________________________________________________________________________________________________
UX-решения
1. Упрощение фильтрации
3. Оптимизация mobile UX
2. Улучшение визуальной иерархии
уменьшить перегрузку интерфейса
ускорить основные сценарии
сохранить гибкость для продвинутых пользователей
были сокращены лишние действия
улучшена работа с bottom sheet
упрощен доступ к фильтрам
улучшена читаемость списка
типографика
приоритеты информации
spacing
состояния элементов
тип операции
сумму
статус
дату
категорию
Фильтры были разделены на быстрые и расширенные. Это позволило:
В мобильной версии:
Для списка операций были переработаны:
Теперь пользователи быстрее различают:
___________________________________________________________________________________________________________
___________________________________________________________________________________________________________
Десктопная и мобильная адаптации
1. Десктоп
Мобильная
улучшена структура таблицы
упрощена навигация
добавлены быстрые фильтры
улучшено отображение деталей операции
повышена читаемость больших объемов данных
переработан сценарий просмотра операций
упрощен доступ к фильтрации
улучшено взаимодействие одной рукой
адаптирована визуальная иерархия под маленький экран
___________________________________________________________________________________________________________
Оценка эффективности
После редизайна основное внимание уделялось:
Ключевыми индикаторами успешности стали:
После редизайна сценарий стал:
скорости выполнения ключевых сценариев
удобству поиска операций
снижению количества ошибок
уменьшению нагрузки на поддержку
сокращение обращений по поиску операций
снижение спорных обращений
рост вовлеченности пользователей
сокращение времени выполнения действий
быстрее
визуально проще
более предсказуемым
удобнее для mobile usage
масштабируемым для будущих изменен
___________________________________________________________________________________________________________
___________________________________________________________________________________________________________
Результаты
−18% обращений в поддержку по вопросам транзакций и списаний
−13% повторных возвратов в раздел истории операций
+18% рост скорости нахождения нужной операции (по времени выполнения сценария)
+22% увеличение доли самостоятельного решения задачи без обращения в поддержку
+15% снижение случаев сомнений в корректности отображаемых данных (по обращениям с уточнениями)
Cценарий использования стал более линейным: сканирование → при необходимости
фильтр → детали
Review
Этот проект помог мне глубже поработать с:
data-heavy интерфейсами
fintech UX
системным проектированием
mobile/desktop consistency
масштабируемыми решениями
Главным результатом для меня стало создание интерфейса, который не только выглядит чище визуально, но и действительно помогает пользователям быстрее решать свои задачи