Gazprom Pay: как мы спроектировали приложение для бесконтактной оплаты

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

Задача: создать решение для удобных и безопасных покупок. Когда российские пользователи потеряли возможность оплачивать покупки с помощью Apple Pay и Google Pay, стало очевидно, что собственные пэй-сервисы необходимы. Поскольку в устройствах на базе ОС Android есть NFC-модуль, прежде всего банк хотел перенести функциональность веб-версии Gazprom Pay в приложение для Android.

Глобально перед «Газпромбанком» стояла задача вернуть клиентам возможность удобной бесконтактной оплаты покупок офлайн. К нашей команде клиент обратился с запросом спроектировать дизайн приложения.

Мы провели исследование конкурентов, разработали дизайн-концепцию, протестировали её и вывели на рынок красивый и удобный продукт.

Во всех проектах мы стремимся к тому, чтобы стать клиенту партнёром, а не простым исполнителем ТЗ, от которого нельзя отступать. Так было и в работе с Gazprom Pay. Вместе с командой продукта нам было важно сделать удобный сервис. Поэтому, несмотря на то, что у банка уже был готовый UI kit и нам нужно было ему следовать, мы старались генерировать нестандартные идеи. В итоге мы остановились на решениях в рамках предложенной «Газпромбанком» дизайн-системы, но передали команде клиента наработки, которые можно использовать в будущем для развития продукта.

В марте 2022 года «Газпромбанк» запустил веб-версию платёжного сервиса для онлайн-оплаты покупок под брендом Gazprom Pay. Для масштабирования платёжного решения нужно было разработать мобильное приложение и перенести туда функции веб-версии.

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

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

1. Мы посмотрели, какие конкуренты есть на российском рынке. Тогда были только SberPay и MirPay.

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

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

Из-за того, что офлайн-оплата должна была работать только с картами платёжной системы «Мир», сначала мы хотели добавить сегментированный элемент управления и разделить карты для бесконтактной оплаты на кассах («Мир») и для онлайн-оплаты (Visa, Mastercard и другие платёжные системы).

Но просто добавить карту «Мир» недостаточно. Её нужно токенизировать, чтобы подключить бесконтактную оплату. Поэтому, чтобы не усложнять пользовательский опыт, мы отказались от segmented control и оставили на экране обычный список с тремя разделами карт:

1. «Подключена бесконтактная оплата» — токенизированные карты «Мир».

2. «Доступно для подключения» — нетокенизированные карты «Мир».

3. «Только для оплаты в интернете» — карты других платёжных систем.

А ещё мы предусмотрели экран для пользователей с устройствами, не поддерживающими бесконтактную оплату: для них оставили один раздел — «Только для оплаты в интернете».

Так приложение видят пользователи смартфонов без NFC:

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

Некоторые экраны ключевых краевых сценариев добавления, работы и токенизации банковских карт:

Пока карта не токенизирована, мы не можем подтянуть в приложение её реальный скин, но по номеру можем определить банк и платёжную систему. Поэтому мы взяли 15 банков, которые покрывают 90% российского рынка, и отрисовали скины их карт и логотипы. Так пользователи быстрее понимают, какую карту выбрать, а внешний вид приложения становится консистентным.

Во всех проектах мы стремимся к тому, чтобы стать клиенту партнёром, а не простым исполнителем ТЗ, от которого нельзя отступать. Так было и в работе с Gazprom Pay. Вместе с командой продукта нам было важно сделать удобный сервис.

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

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

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

Ещё нужно было выявить сложности во взаимодействии пользователя с сервисом:

- при регистрации,

- на главном экране,

- во время добавления карты,

- в момент оплаты через кошелёк,

- при удалении карты.

Несмотря на то что наша команда занималась только разработкой дизайна приложения, нам было важно проверять разные гипотезы, чтобы сделать интерфейс удобным. Например, гипотезу о том, что не нужно выводить все карты на главный экран, мы проверяли на пользователях, которые расплачивались Apple Pay и Google Pay раньше, и на тех, кто продолжает пользоваться сервисами и сейчас за границей.

Собрали два прототипа: в одном на главный экран были выведены все карты, а в другом — только токенизированные, для быстрого доступа к оплате на кассе. Гипотеза подтвердилась — большое количество карт на главном экране запутывало пользователей, поскольку бесконтактная оплата доступна только для платёжной системы «Мир», а вчитываться на кассе в объяснения того, почему Visa или Mastercard не работают, — неудобно.

В декабре 2021 года сервис запустился в тестовом режиме, в 2022-м состоялся официальный релиз веб-версии сервиса, а осенью 2023-го в сторах появилось приложение Gazprom Pay.

За 3,5 месяца мы спроектировали сервис, который позже разработала команда банка, а также проанализировали рынок платёжных сервисов в России, создали множество сценариев отображения карт в приложении и выбрали лучший подход к оплате с помощью внешних и внутренних тестов. Сейчас Gazprom Pay — это приложение, которое позволяет бесконтактно оплачивать покупки в офлайне с помощью смартфона с ОС Android картами «Мир» «Газпромбанка».

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

В планах у команды Gazprom Pay разработать приложение для iOS, сделать сервис основным способом оплаты и добавить в приложение все необходимые функции, которые позволят пользователям полностью отказаться от физических кошельков.