Назад
EPN

EPN. Web app

Fintech / SaaS • Роль: UX/UI / Product Designer • Период: 2022–2025

1. Контекст проекта

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

Продукт работает в high-risk среде, где:

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

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

2. Моя роль и команда

Взаимодействие:

  1. 1 Продукт и приоритеты — совместно с владельцем продукта
  2. 2 Аналитики — формирование гипотез, продуктовых и UX-метрик
  3. 3 QA-инженеры — тестирование сценариев, состояний и edge-кейсов
  4. 4 Разработка — лид разработки, frontend и backend
  5. 5 Дизайн — я отвечал за UX-архитектуру, UI и целостность продукта

Я отвечал за полный цикл редизайна веб-приложения: от формирования UX-архитектуры и проектирования ключевых пользовательских сценариев до финального UI и анализа продуктовых и маркетинговых метрик совместно с командой.

3. Цели проекта

Бизнес-цели:

  1. 1 Повысить конверсию выпуска карты и сократить time-to-first-payment
  2. 2 Сократить время реакции на Decline и снизить потери бюджета
  3. 3 Увеличить удержание активных пользователей
  4. 4 Упростить масштабирование команд
  5. 5 Адаптировать продукт под более молодую, digital-аудиторию

Пользовательские цели:

  1. 1 Быстро выпустить карту под рекламную кампанию
  2. 2 Понимать, почему платеж не прошел
  3. 3 Контролировать расходы, транзакции и причины отклонений в одном интерфейсе
  4. 4 Управлять командой без лишней рутины

4. Исследования и аналитика

Качественная аналитика и наблюдения:

Исследование проводилось в формате качественной аналитики и интервью с активными пользователями продукта — performance-маркетологами, арбитражниками и тимлидами команд, которые ежедневно работают с виртуальными картами и платежными сервисами.

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

  1. 1 Выпуск и перевыпуск карт «на горячую»
  2. 2 Реакция на decline-платежи
  3. 3 Контроль бюджета и транзакций
  4. 4 Управление командами и доступами

В ходе анализа были выявлены ключевые проблемы текущего пользовательского опыта:

  1. 1 Перегруженность интерфейса в критических сценариях
  2. 2 Недостаточная прозрачность причин отказов (decline)
  3. 3 Высокая когнитивная нагрузка при работе с большим количеством карт
  4. 4 Сложность масштабирования командной работы

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

В рамках редизайна также был проведен аналитический разбор существующего интерфейса EPN Web и смежных решений в нише финтех-продуктов для digital-команд и high-risk пользователей.

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

  1. 1 Скорость выполнения ключевых сценариев
  2. 2 Читаемость данных и статусов
  3. 3 Работа с ошибками и отказами
  4. 4 Масштабирование команд

Ключевые проблемы, характерные для большинства решений в нише:

  1. 1 Фокус на экранах, а не на сценариях. Пользователь вынужден «искать решение» по интерфейсу
  2. 2 Недостаточная детализация причин отказов, особенно в high-risk операциях
  3. 3 Слабая поддержка командной работы и ролей
  4. 4 Перегруженные таблицы и сложные интерфейсы, плохо масштабируемые под большие объемы данных

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

Результаты исследования показали, что успешный UX в high-risk fintech должен строиться вокруг сценариев, состояний и решений, а не вокруг отдельных экранов или функций.

На основе исследований были сформированы ключевые принципы редизайна:

  1. 1 Фокус на критических сценариях
  2. 2 Прозрачность данных и причин отказов
  3. 3 Минимизация когнитивной нагрузки
  4. 4 Масштабируемость под рост команд и оборотов

Эти принципы легли в основу UX-архитектуры и всех ключевых решений в продукте.

5. Аудитория и поведенческий контекст

Основная аудитория:

  1. 1 Performance-маркетологи и медиабайеры, работающие с рекламными кабинетами
  2. 2 Арбитражники трафика в high-risk вертикалях
  3. 3 Команды и агентства с распределенным доступом к финансам
  4. 4 Digital-предприниматели и владельцы онлайн-продуктов с регулярными платежными операциями

Контекст использования:

  1. 1 Высокая частота операций и параллельная работа с десятками карт
  2. 2 Крупные обороты и высокая стоимость ошибок
  3. 3 Критическая чувствительность к задержкам, ошибкам и decline-платежам
  4. 4 Необходимость быстро принимать решения в условиях неопределенности и давления

Персоны UX-артефакт:

Performance / Media Buyer

Цель: быстро и стабильно оплачивать рекламные платформы Контекст: несколько кампаний, десятки платежей в день

Боли:

  • Высокий и непредсказуемый Decline
  • Долго выпускать и перевыпускать карты
  • Сложно понять причину отказа

Ключевые сценарии:

  • Выпуск карты
  • Контроль транзакций
  • Анализ Decline

Team Lead / Agency Owner

Цель: контроль расходов и работы команды Контекст: несколько баеров, десятки карт

Боли:

  • Хаос с картами
  • Отсутствие прозрачной аналитики
  • Риски ошибок со стороны команды

Ключевые сценарии:

  • Командные счета
  • Роли и доступы
  • Аналитика по команде

6. Архитектура проекта

Важное уточнение!

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

Глобальная функциональная карта:

Глобальная функциональная карта

UX-логика архитектуры:

  1. 1 Dashboard — контроль и ориентация
  2. 2 Cards — действия
  3. 3 Transactions / Decline — анализ
  4. 4 Teams — масштабирование
  5. 5 Settings — обслуживание

В кейсе разобраны основные пользовательские сценарии:

  1. 1 Выпуск виртуальной карты
  2. 2 Управление картой
  3. 3 История транзакций и выписки
  4. 4 Decline-аналитика и статистика
  5. 5 Работа с командами и байерами

7. UX-архитектура (пример на одном ключевом сценарии)

User Story:

Как пользователь сервиса, я хочу быстро выпустить виртуальную карту, чтобы сразу привязать ее к рекламному кабинету или сервису оплаты.

User Flow: выпуск карты

User Flow: выпуск карты

Принятые UX-решения:

  1. 1 Отказ от тупиковых состояний
  2. 2 Автоматическое ведение пользователя по сценарию
  3. 3 Сохранение контекста после вспомогательных действий
  4. 4 Минимизация количества экранов и решений

8. Ключевые сценарии, решения и UX-аналитика

Сценарий 1. Dashboard

Задача:

Дать пользователю мгновенное понимание состояния аккаунта и текущих рисков по платежам, чтобы он мог быстро принять решение и не терять бюджет на decline-операциях.

Контекст:

Пользователь заходит в сервис несколько раз в день, часто в стрессовой ситуации.

Проблема:

  1. 1 Ключевая информация была разрознена по разным разделам
  2. 2 Decline Rate сложно было заметить и интерпретировать быстро
  3. 3 Пользователь не понимал, где именно проблема: баланс, карта или merchant
  4. 4 Для перехода к действию требовалось слишком много кликов

Гипотезы:

  1. 1 Пользователю важно видеть агрегированное состояние аккаунта
  2. 2 Decline Rate — ключевой триггер для действий, а не просто метрика
  3. 3 Визуальный приоритет проблемных состояний сокращает время реакции
  4. 4 Быстрые CTA на первом экране снижают количество «потерянных» сессий

Решение:

  1. 1 Dashboard с фокусом на состояние, а не на навигацию
  2. 2 Отдельный блок Decline Rate
  3. 3 Приоритет проблемных состояний
  4. 4 Быстрые действия прямо с Dashboard
Сценарий 1. Dashboard

Результат:

  1. 1 Снижено время первичной оценки состояния аккаунта
  2. 2 Пользователи стали чаще начинать сессию именно с Dashboard
  3. 3 Выросли переходы в ключевые сценарии (карты, транзакции, decline-анализ)
  4. 4 Сократилось количество ситуаций, когда проблема обнаруживается «слишком поздно»

Сценарий 2. Выпуск карты

Задача:

Максимально сократить путь от потребности до готовой карты и первого платежа, снизив когнитивную нагрузку и количество ошибок в стрессовом сценарии запуска рекламной кампании.

Контекст:

Выпуск карты часто происходит срочно «на горячую» рекламную кампанию.

Проблема:

  1. 1 Разделение понятий «бин» и «карта» создавало дополнительную когнитивную нагрузку и замедляло принятие решений в критический момент запуска РК
  2. 2 Пользователи регулярно обращались в поддержку с вопросами: какой бин выбрать, подойдет ли карта для конкретного мерчанта и есть ли скрытые ограничения
  3. 3 Непрозрачность условий (комиссии, ограничения, запрещенные расходы)
  4. 4 Просмотр большого количества бинов без контекста создавал визуальное напряжение

Гипотезы:

  1. 1 Пользователю важно видеть не абстрактный бин, а готовую карту с понятными условиями и рисками
  2. 2 Явное отображение комиссий, ограничений и особенностей использования снижает тревожность и количество отказов на шаге выпуска
  3. 3 Инструмент предварительной проверки прохождения платежа (по мерчанту) снижает количество ошибок и обращений в поддержку
  4. 4 Структурированная подача списка карт ускоряет выбор и повышает уверенность в действии

Решение:

  1. 1 Линейный сценарий выпуска карты
  2. 2 Минимум обязательных полей
  3. 3 Прозрачные подсказки по тарифам и комиссиям
  4. 4 Инструмент проверки прохождения платежа
  5. 5 Табличный вид списка карт
Сценарий 2. Выпуск карты
Сценарий 2. Выпуск карты

Результат:

  1. 1 Рост конверсии выпуска карт на ~20–30%
  2. 2 Снижение отказов на этапе выпуска за счет прозрачных условий
  3. 3 Сокращение времени сценария от идеи до готовой карты
  4. 4 Существенное уменьшение обращений в поддержку, связанных с выбором бина

Сценарий 3. Управление картой

Задача:

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

Контекст:

Пользователь управляет десятками карт одновременно (личные, командные, под разные источники трафика). Работа происходит в режиме высокой нагрузки, где важны скорость, точность и минимальное количество действий.

Проблема:

  1. 1 Потеря времени на поиск нужной карты в большом списке
  2. 2 Сложность выполнения массовых и повторяющихся операций
  3. 3 Отсутствие контекста по карте
  4. 4 Недостаток детализированной информации по операциям конкретной карты

Гипотезы:

  1. 1 Если объединить визуальный карточный вид и табличную структуру, пользователь быстрее ориентируется при большом количестве карт
  2. 2 Если добавить фильтрацию по статусу, типу и команде, время поиска нужной карты сократится
  3. 3 Если дать быстрый доступ к реквизитам и истории операций прямо из карточки карты, снизится количество лишних переходов

Решение:

  1. 1 Гибридный интерфейс. Сетка карт + табличный список
  2. 2 Фильтрация по ключевым параметрам (статус, тип, команда)
  3. 3 Групповые действия и избранные карты для операционных сценариев
  4. 4 Детальная карточка карты с реквизитами, историей и аналитикой
Экран: список карт
Экран: детальная карточка карты

Результат:

  1. 1 Сокращено время выполнения операционных действий с картами
  2. 2 Пользователи начали активно использовать фильтры и групповые действия
  3. 3 Повысилась прозрачность работы с картами и транзакциями
  4. 4 Снизилось количество ошибок при работе с большим пулом карт

Сценарий 4. История транзакций

Задача:

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

Контекст:

Анализируется ежедневно, иногда в режиме «пожара».

Проблема:

  1. 1 Сырые списки транзакций
  2. 2 Отсутствие быстрых фильтров
  3. 3 Сложно найти причину отказа
  4. 4 Нет группировки по смыслу

Гипотезы:

  1. 1 Пользователю важна причина отказа, а не сам факт decline
  2. 2 Фильтрация по времени и типу операции must-have для ежедневной работы
  3. 3 Визуальное разделение типов операций ускоряет анализ
  4. 4 Группировка по карте, команде и причине отказа ускорит поиск аномалий и паттернов

Решение:

  1. 1 Фильтры по типам операций
  2. 2 Отдельные статусы decline
  3. 3 Поиск по описанию
  4. 4 Отдельные вкладки: Declines, Holds
  5. 5 Детализация каждой операции
  6. 6 Связь транзакций с картой, командой и мерчантом для быстрого принятия решений
Сценарий 4. История транзакций

Результат:

  1. 1 Улучшена структура истории транзакций. Данные стали читаемыми и осмысленными, а не просто логом
  2. 2 Объединенный селект по счетам, командам и картам сократил время фильтрации и уменьшил количество кликов
  3. 3 Снижено количество обращений в поддержку по вопросам отказов и списаний
  4. 4 Пользователи начали быстрее реагировать на проблемные платежи, что снизило потери бюджета

Сценарий 5. Decline board

Задача:

Дать пользователю быстрый и однозначный ответ на вопрос: где именно ломаются платежи и что делать дальше, без ручного анализа сырых логов.

Контекст:

Decline board ключевой инструмент для масштабирования рекламных кампаний. Используется в ситуациях, когда каждая ошибка платежа напрямую влияет на бюджеты, ROI и скорость принятия решений.

Проблема:

  1. 1 Decline-операции воспринимались как «черный ящик» без структуры и причин
  2. 2 Пользователь не понимал, что именно вызывает отказы: карта, мерчант или условия
  3. 3 Отсутствовала агрегация по мерчантам и причинам отказов
  4. 4 Решения принимались интуитивно, а не на основе данных

Гипотезы:

  1. 1 Агрегация по мерчантам и причинам ускоряет диагностику проблем
  2. 2 Проценты и соотношения важнее абсолютных значений для принятия решений
  3. 3 Визуальные индикаторы позволяют быстрее реагировать в стрессовых сценариях

Решение:

  1. 1 Decline board с агрегацией по мерчантам
  2. 2 Отдельная статистика по каждому мерчанту
  3. 3 Список конкретных decline-операций с причинами и суммами
  4. 4 Связь decline-операций с картой, командой и аккаунтом
Сценарий 5. Decline board

Результат:

  1. 1 Существенно ускорено выявление проблемных мерчантов
  2. 2 Снижен общий decline-rate за счет оперативных решений
  3. 3 Повышена эффективность платежей и стабильность рекламных кампаний

Сценарий 6. Командная работа

Задача:

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

Контекст:

Продукт используется командами от 3 до 20 человек: медиабайеры, тимлиды, операционные менеджеры. Платежи совершаются ежедневно, часто в режиме масштабирования и под давлением сроков.

Проблема:

  1. 1 Нет прозрачного понимания, кто и сколько тратит в рамках команды
  2. 2 Сложно управлять доступами, ролями и лимитами
  3. 3 Высокий риск ошибок, злоупотреблений и ручного контроля со стороны владельца

Гипотезы:

  1. 1 Пользователю важно видеть агрегированную картину по команде, а не разрозненные карты
  2. 2 Разделение ролей, лимитов и балансов снижает операционные риски
  3. 3 Четкие границы ответственности уменьшают необходимость ручного контроля и микроменеджмента

Решение:

  1. 1 Командные счета с отдельным балансом, независимым от личных карт
  2. 2 Доверенные участники с ограниченными правами
  3. 3 Индивидуальные лимиты и балансы на участника
  4. 4 Быстрые управленческие действия
  5. 5 Агрегированный обзор по команде + детализация по каждому участнику
Сценарий 6. Командная работа — экран 1
Сценарий 6. Командная работа — экран 2
Сценарий 6. Командная работа — экран 3

Результат:

  1. 1 Управление командами стало централизованным и предсказуемым
  2. 2 Пользователи начали активнее использовать командные счета вместо личных карт
  3. 3 Снизилось количество ошибок и инцидентов при работе с несколькими участниками
  4. 4 Уменьшилась нагрузка на владельца за счет отказа от ручного контроля

9. Результаты проекта

В результате переработки UX-архитектуры и ключевых пользовательских сценариев продукт стал более управляемым и предсказуемым в условиях высокой нагрузки и частых платежных операций.

Ключевые результаты проекта:

  1. 1 Упрощен и ускорен сценарий выпуска и перевыпуска виртуальных карт. Путь от идеи до готовой карты стал линейным и без тупиковых состояний
  2. 2 Существенно снижено количество пользовательских ошибок в критических сценариях
  3. 3 Повышена прозрачность транзакций и причин отказов за счет структурированной аналитики и визуального разделения состояний
  4. 4 Улучшена работа с командами: управление доступами, лимитами и балансами стало масштабируемым
  5. 5 Снижена нагрузка на службу поддержки за счет понятных сценариев и объяснимых состояний системы
  6. 6 Сокращено время реакции пользователей на проблемы с платежами и decline-операции

Внесенные изменения положительно повлияли на конверсию ключевых действий, скорость запуска рекламных кампаний и удержание активных пользователей.

10. Вывод

Работа над EPN Web App показала, что продуктовый UX в финтехе строится не вокруг отдельных экранов, а вокруг сценариев, данных и управления рисками. В high-risk среде дизайн становится инструментом принятия решений, а не визуальным слоем над функциональностью.

Основные выводы проекта:

  1. 1 Пользователь мыслит целями и сценариями, а не интерфейсами
  2. 2 Прозрачность данных важнее их количества
  3. 3 Корректная UX-архитектура снижает финансовые и операционные риски
  4. 4 Дизайн напрямую влияет на бизнес-метрики и доверие к продукту
  5. 5 Масштабируемость продукта закладывается на уровне сценариев

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