Редизайн интерфейса панели управления платежной системы beGateway

Платежная система и SaaS-платформа, разработанная компанией eComСharge. beGateway работает на базе собственных серверов и сертифицирован по стандартам международных платежных систем: Visa, MasterCard, American Express.

В платформу интегрированы технологии безопасности данных, хранилища Big Data, распределители нагрузки, репозитории и другие инструменты для обеспечения быстрой, безопасной и надежной обработки платежей.

Задача

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

Контекст задачи

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

Разделяем роли и определяем кейсы

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

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

Ролевой подход

Проводим исследование и выделяем группы пользователей, которые взаимодействуют с интерфейсом.

Кейсовый подход

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

Ролевой подход

Проводим исследование и выделяем группы пользователей, которые взаимодействуют с интерфейсом.

Кейсовый подход

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

Роли

У каждой группы пользователей — свои запросы, представления об удобстве и набор операций. В процессе исследования аудитории выделяем три ключевые роли и одну второстепенную (below the line):

Кейсы

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

Разобрали роли, собрали несколько десятков кейсов — вот что получилось

Настраиваемый дашборд

Дизайн кабинета — единый для мерчанта и менеджера поддержки. Это облегчает онбординг и сокращает время на решение проблем с платежами.

Каждый пользователь может настроить дашборд под свои нужды.

Функции кабинета отличаются для мерчанта, менеджера и администратора. Например, мерчанту не нужно самостоятельно настраивать правила для обработки платежей: ему поможет менеджер. Если у менеджера поддержки нет нужных функций — подключается администратор с полным доступом к платформе.

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

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

Настраиваемый дашборд

Дизайн кабинета — единый для мерчанта и менеджера поддержки. Это облегчает онбординг и сокращает время на решение проблем с платежами.

Каждый пользователь может настроить дашборд под свои нужды.

Функции кабинета отличаются для мерчанта, менеджера и администратора. Например, мерчанту не нужно самостоятельно настраивать правила для обработки платежей: ему поможет менеджер. Если у менеджера поддержки нет нужных функций — подключается администратор с полным доступом к платформе

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

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

Работа мерчанта с платежной системой

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

Только базовые понятные вещи: текущий оборот, список транзакций, обороты по сайтам (проектам) и пять разделов в меню с понятным назначением

Работа мерчанта с платежной системой

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

Только базовые понятные вещи: текущий оборот, список транзакций, обороты по сайтам (проектам) и пять разделов в меню с понятным назначением

Оценка «здоровья» магазинов решена простым виджетом без оперирования сложными понятиями вроде шлюзов, рутинга, фрода и МПС.

Увеличенный красный индикатор — признак большого числа отказов и потери выручки магазина — повод погрузиться в проблему, разобраться с банком, попробовать удержать клиентов, недовольных тем, что покупка не прошла

Оценка «здоровья» магазинов решена простым виджетом без оперирования сложными понятиями вроде шлюзов, рутинга, фрода и МПС.

Увеличенный красный индикатор — признак большого числа отказов и потери выручки магазина — повод погрузиться в проблему, разобраться с банком, попробовать удержать клиентов, недовольных тем, что покупка не прошла

Простой возврат платежей

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

Ежемесячная отчетность для бухгалтеров

Чтобы передать бухгалтерам истории движения по счетам и сверки, достаточно заглянуть в раздел отчетности и настроить выборку по проекту, периоду или скачать выписку целиком.

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

Работа менеджера поддержки с интерфейсом

Служба поддержки работает в интерфейсе панели beGateway 24/7. Дашборд менеджера состоит из виджетов для анализа, контроля и совершения частотных операций. Менеджеры меньше устают, меньше ошибаются, обрабатывают запросы быстрее и качественнее — клиенты получают лучший суппорт, бизнес сокращает издержки. И никакой борьбы с интерфейсом.

Работа менеджера поддержки с интерфейсом

Служба поддержки работает в интерфейсе панели beGateway 24/7. Дашборд менеджера состоит из виджетов для анализа, контроля и совершения частотных операций. Менеджеры меньше устают, меньше ошибаются, обрабатывают запросы быстрее и качественнее — клиенты получают лучший суппорт, бизнес сокращает издержки. И никакой борьбы с интерфейсом.

80% кейсов менеджеров суппорта
определяют внешний вид и функциональность ключевых экранов интерфейса.

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

Управление мерчантами и магазинами

Унифицированное представление карточки магазина и проекта для мерчанта и менеджера поддержки — важное стратегическое решение. Мерчант и менеджер видят одинаковый интерфейс и состав информации и могут решить проблему в формате дистанционной связи «Нажмите на вторую транзакцию в списке».

В разделе — информация о магазине, ИП, компании. На дашборде нужные данные: контакты, информация о сотрудниках и их правах в кабинете, данные и аналитика по транзакциям.

Изменение настроек магазинов или управление пользовательскими правами не частотные, но периодические кейсы. Гораздо чаще Служба поддержки занята обработкой проблемных платежей: не проходит транзакция, срабатывает двойное списание, не функционируют рекуррентные платежи. Иногда менеджеру достаются и специфические случаи — целые расследования, с которым не справился сам магазин.

Учет транзакций и возвраты

Раньше, если операцию не удавалось найти по временным меткам или сумме, менеджеры записывали коды транзакций в тетрадку и выискивали по ним. Ошибиться в такой последовательности цифр и букв легко:

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

Связанные транзакции

На странице транзакций платежи можно отфильтровать по статусу, увидеть «висяки» и так отследить проблему на этапе ее возникновения.

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

В кабинете ID транзакции копируется, его можно вбить в поиск и найти нужные данные.

В связанных транзакциях отображаются записи, похожие по набору признаков: тот же плательщик, похожие суммы, время, частичное совпадение реквизитов карты. Оператору мегаудобно, даже если он нашел не ту самую операцию, то через «Связанные транзакции» легко перейти к искомой.

Раньше у плательщика проходили и более крупные суммы. Что не так с последними транзакциями? — так, понятно IP попал под антифрод.

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

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

В кабинете ID транзакции копируется, его можно вбить в поиск и найти нужные данные.

В связанных транзакциях отображаются записи, похожие по набору признаков: тот же плательщик, похожие суммы, время, частичное совпадение реквизитов карты. Оператору мегаудобно, даже если он нашел не ту самую операцию, то через «Связанные транзакции» легко перейти к искомой.

Раньше у плательщика проходили и более крупные суммы. Что не так с последними транзакциями? — так, понятно IP попал под антифрод.

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

Процесс работы администратора

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

Контактные данные, привязанные проекты, номера и статусы магазинов — вся необходимая информация для оперативного решения рабочих задач.

Процесс работы администратора

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

Контактные данные, привязанные проекты, номера и статусы магазинов — вся необходимая информация для оперативного решения рабочих задач.

Управление мерчантами

У администратора расширенные полномочия. Он даже может отключить платежные инструменты и магазины. Но конечно же чаще добавляет и первично активирует новых мерчантов.

У администратора много ответственности и прав в чувствительных настройках, затрагивающих финансовую эффективность и управление рисками. Для управления безопасностью и оптимизации издержек бизнеса в beGateway реализованы два крупных и сложных модуля по управлению и обработке транзакций: Smart Routing и beProtected.

Управление транзакционным трафиком через Smart Routing

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

Администратор создает алгоритм сортировки транзакций по параметрам для отправки по оптимальным шлюзам для бизнеса.

Управление транзакционным трафиком через Smart Routing

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

Администратор создает алгоритм сортировки транзакций по параметрам для отправки по оптимальным шлюзам для бизнеса.

Безопасная работа с высокорисковыми сегментами

beProtected — модуль безопасности, который помогает отслеживать нежелательные, мошеннические и подозрительные операции; устанавливать безопасные лимиты на платежи; работать с «черными» и «белыми» списками покупателей. Это позволяет работать в высокорисковых сегментах, например гемблинге и гейминге.

Управляя рисками, бизнес снижает свои потери. Если правила настроены слишком жестко, то могут не проходить платежи и вполне добропорядочных клиентов. Задача администратора — оптимизировать эти настройки и обеспечить транзакциям свободный ход или укрепить безопасность, если идет лавина фрода.

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

Но бывает, что сложные правила порождают конфликты условий безопасности. Разрешить их помогает третья линия поддержки и особый режим представления правил String View.

Но бывает, что сложные правила порождают конфликты условий безопасности. Разрешить их помогает третья линия поддержки и особый режим представления правил String View.

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

Дизайн-система для счастья разработчиков и задел на будущее

Все артефакты, созданные в процессе работ — от инпутов и кнопок до огромных флоу SmartRouting — бережно собраны в дизайн-систему beGateway для планомерного и последовательного развития продукта командой разработки.

Удобный интерфейс для продавцов, менеджеров и администраторов, меньше времени на обучение сотрудников и самое главное — никаких тетрадок