red_mad_index: исследование качества интерфейсов интернет-магазинов
Написать нам
Меню

Назад к главному

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

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

Задача: создать решение для удобных и безопасных покупок

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

У нас уже был успешный опыт разработки веб-сервиса с командой red_mad_robot, поэтому мы пришли с запросом на современное мобильное приложение, которое поможет вывести существующее платёжное решение на новый уровень.

Ангелина Соболева
исполнительный директор АО «Газпромбанк»

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

Gazprom Pay мы создавали силами кросс-команды в паре с банком. «Газпромбанк» занимался разработкой, роботы — исследованиями, проектированием и разработкой дизайна приложения.

Ксения Земскова
директор проектов финтех-портфеля red_mad_robot

От «домашнего» сервиса к многофункциональному приложению

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

Когда мы начали работу над Gazprom Pay, хотели сделать качественный «домашний» платёжный сервис, который помог бы удобно и безопасно совершать оплату на разных площадках холдинга «Газпром». Но в итоге сервис стал востребован у большего количества людей и получил развитие за пределами холдинга.

Елена Глазачева
Product Owner Gazprom Pay

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

Роадмап проекта<br>
Роадмап проекта

Большое исследование было не нужно, поэтому мы сфокусировались на анализе конкурентов

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

  1. 1_

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

  2. 2_

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

Мы ориентируемся на концепцию «lose your wallet» — хотим максимально избавить пользователей от обычных кошельков, наполнив Gazprom Pay всем необходимым.

Елена Глазачева
Product Owner Gazprom Pay

Как предусмотреть множество ключевых сценариев

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

Варианты главного экрана приложения<br>
Варианты главного экрана приложения

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

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

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

  1. 1_

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

  2. 2_

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

  3. 3_

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

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

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

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

Некоторые экраны ключевых краевых сценариев добавления, работы и&nbsp;токенизации банковских карт<br>
Некоторые экраны ключевых краевых сценариев добавления, работы и токенизации банковских карт

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

Нарисовали скины всех карт, чтобы было удобно и&nbsp;красиво<br>
Нарисовали скины всех карт, чтобы было удобно и красиво

Во всех проектах мы стремимся к тому, чтобы стать клиенту партнёром, а не простым исполнителем ТЗ, от которого нельзя отступать. Так было и в работе с 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, сделать сервис основным способом оплаты и добавить в приложение все необходимые функции, которые позволят пользователям полностью отказаться от физических кошельков.

***

Над материалом работали:

  • текст — Алина Ладыгина;

  • обложка — Марина Черникова.

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

Да пребудет с тобой сила роботов! 🤖

Наша рассылка
В ней только самое важное: новости, кейсы, немного аналитики. Присылаем два раза в месяц.
Политика обработки персональных данных
По вопросам работы с персональными данными и подписками пишите на [email protected]
© red_mad_robot, 2008— 
Сделано роботами для людей
Разработка —