Платежная страница банка

Инструмент для оплаты в интернет-эквайринге Сбера

Роль

Дизайнер

Сфера

Финтех • B2B2C

На проекте

2021-2025

Команда: продакт, аналитик, разработка, команда интеграций

Моя зона ответственности: анализ текущих сценариев, разработка UX-архитектуры единой страницы, прототипы, логика кастомизации, дизайн-система, контроль реализации

Контекст

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

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

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

Задача

Создать единый адаптивный шаблон платёжной страницы, который:

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

UX-решения и логику кастомизации команда формировала самостоятельно − готового решения не было.

Исследование и инсайты

Мы проанализировали 3 существующие версии страницы, данные по их использованию и поведение пользователей.

Выявили:

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

Это подтвердило необходимость единого ядра страницы + гибких настроек

Решение

1. Унифицированный UX и визуальная логика

Привели все версии к одному шаблону с узнаваемым брендингом
Оптимизировали процесс оплаты: сократили количество действий и упростили валидацию
Добавили адаптивную сетку, корректную работу на любых устройствах
Построили структуру методов оплаты по принципу «сначала самый быстрый и вероятный»

2. Новый функционал для пользователей

Сохранение карт для быстрых последующих платежей
Интеграция со Сбер ID − упрощённая авторизация, меньше ручного ввода
Умное определение метода оплаты: на основе истории система заранее выбирает самый подходящий способ

Команда: продакт, аналитик, разработка, команда интеграций

Контекст

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

Задача

Создать единый адаптивный шаблон платёжной страницы, который:

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

UX-решения и логику кастомизации команда формировала самостоятельно − готового решения не было.

Исследование и инсайты

Мы проанализировали 3 существующие версии страницы, данные по их использованию и поведение пользователей.

Выявили:

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

Это подтвердило необходимость единого ядра страницы + гибких настроек

Решение

1. Унифицированный UX и визуальная логика

Привели все версии к одному шаблону с узнаваемым брендингом
Оптимизировали процесс оплаты: сократили количество действий и упростили валидацию
Добавили адаптивную сетку, корректную работу на любых устройствах
Построили структуру методов оплаты по принципу «сначала самый быстрый и вероятный»

2. Новый функционал для пользователей

Сохранение карт для быстрых последующих платежей
Интеграция со Сбер ID − упрощённая авторизация, меньше ручного ввода
Умное определение метода оплаты: на основе истории система заранее выбирает самый подходящий способ

3. Гибкая кастомизация для мерчантов

Переключение элементов страницы (поля, блоки, методы)
Настройка способов авторизации (SMS / push / привязанные карты)
Управление способами оплаты (карты, Pay-сервисы)
Возможность включить или скрыть блок сохранения карты
Кастомизация цветовых акцентов под фирменный стиль мерчанта
Всё это работает в рамках единого API и без изменения логики UX

Безопасность

При кастомизации и новых возможностях сохранили все требования PCI DSS и внутренние стандарты.

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

Результаты

− bounce rate: пользователи перестали сталкиваться с разными версиями страницы
+8% рост конверсии завершённых платежей за счёт сокращения шагов и улучшенного UX
Мерчантам стало проще подключаться: единый API ускорил интеграции и уменьшил количество доработок
Экономия на поддержке: команда поддерживает одну страницу, а не три разрозненные
Платёжная страница стала удобной для клиентов, гибкой для бизнеса и управляемой для команды

Роль и развитие

Разработала UX-архитектуру единой страницы и принципы кастомизации
Синхронизировала дизайн с требованиями безопасности и техническими ограничениями
Работала с многопрофильной командой и мерчантами, вырабатывала универсальные решения
Получила опыт оптимизации сценария на масштабируемом продукте, где дизайн влияет на бизнес-метрики
Проводила проверку гипотез и участвовала в анализе результатов A/B-тестов

Результаты

− bounce rate: пользователи перестали сталкиваться с разными версиями страницы
+8% рост конверсии завершённых платежей за счёт сокращения шагов и улучшенного UX
Мерчантам стало проще подключаться: единый API ускорил интеграции и уменьшил количество доработок
Экономия на поддержке: команда поддерживает одну страницу, а не три разрозненные
Платёжная страница стала удобной для клиентов, гибкой для бизнеса и управляемой для команды

Роль и развитие

Разработала UX-архитектуру единой страницы и принципы кастомизации
Синхронизировала дизайн с требованиями безопасности и техническими ограничениями
Работала с многопрофильной командой и мерчантами, вырабатывала универсальные решения
Получила опыт оптимизации сценария на масштабируемом продукте, где дизайн влияет на бизнес-метрики
Проводила проверку гипотез и участвовала в анализе результатов A/B-тестов

Другие проекты

МультиQR

Универсальное решение бесконтакной оплаты по QR

Гайд для консорциума Единого QR

Разработка единого стандарта проектирования для консорциума банков

Быстрая оплата по QR

Оплата по QR в Сбербанк Онлайн без авторизации в приложении

СберЧаевые

Редизайн сервиса чаевых − от устаревшего решения к гибкой системе

Друг

Маркетплейс сервисов для сотрудников Сбера и экосистемы

Единый поиск

Поиск во внутреннем портале Сбера

Ранние проекты

Подборка ранних работ в сложных и регулируемых доменах: CRM для менеджеров и команд compliance, редизайн ДБО и пользовательских путей, приложение для самозанятых, исследование пользователей такси и мобильных сервисов.

Күннэй Захарова

Күннэй Захарова

Күннэй Захарова