Лого vc.ru

Кейс из России: Редизайн платёжного приложения «Центральная касса»

Кейс из России: Редизайн платёжного приложения «Центральная касса»

Команда платёжного приложения «Центральной кассы» написала для рубрики «Интерфейсы» колонку, в которой рассказала, как велась работа над редизайном iOS-приложения, с какими проблемами столкнулась и как их решала.

Создатель приложения — финансово-технологическая компания «Биллинговые системы», которая разрабатывает платёжные решения для «Сбербанка» и Центрального банка РФ. Компания занимается обработкой и защитой платежей, предоставляет решения для B2B- и B2C-рынков. С помощью приложения «Центральная касса» пользователь может оплатить различные услуги: ЖКХ, штрафы, интернет и многое другое. Главная задача платежной системы – доставить платежи вовремя. Поставщики получают деньги уже на следующий день.

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

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

Андрей Рычков, руководитель платежной системы Центральная касса

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

Приложение не помогало плательщикам. Пользователям было неудобно совершать платежи, а мы не могли наращивать обороты. Команда взялась за аналитику и выделила главные проблемы:

  • Пользователям было трудно найти поставщика услуги. У компаний может быть несколько названий, наименование юридического лица может отличаться от бренда. В нашей базе более 5 000 поставщиков и их количество растёт каждый день.
  • Большинству владельцев смартфонов было непонятно, как настроить важные функции – автоплатёж, «Избранное» и так далее. Самые настойчивые звонили в техподдержку, но остальные просто отказывались от ряда функций.
  • Пользователи тратили на оплату в среднем 1-2 минуты. Большая часть времени уходила на «ошибочные» нажатия и просто раздумья над следующим действием. Для платёжной системы это непозволительная роскошь.

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

У любого продукта есть свой жизненный цикл, спустя определённое время необходимо меняться, чтобы успеть за быстрым развитием технологий и решений. Такое время наступило и для приложения «Центральная касса»

Андрей Рычков, руководитель платежной системы Центральная касса

Команда и инструменты

Основное ядро команды приложения – 5 человек: руководитель проекта, арт-директор, дизайнер, программист и маркетолог. Арт-директор живет в Москве, остальные находились в Перми. Основная работа велась онлайн, выездные сессии проходили редко. Нам помогли несколько инструментов:

  • Интерактивная доска Realtimeboard. Все участники процесса выкладывали идеи, предложения, интересные решения конкурентов. Там же мы обсуждали прототипы и дизайн.
  • Таск-трекер Youtrack. Он помогал выстроить взаимодействие, прописать задачи и отследить сроки.
  • Мессенджер Telegram. В нём мы общались и перекидывались идеями.

Анализ и прототипирование

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

Далее мы проанализировали аудиторию и составили её поведенческий портрет. В результате у нас получилось интересное разделение:

  • Часть аудитории просто оплачивала необходимые услуги, используя безналичный расчёт, например, пластиковые карты.
  • Другая часть пользовалась внутренним электронным кошельком, оплачивала услуги и выводила деньги на банковские карты.

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

Каждый экран проходил несколько итераций. Мы постоянно вели дискуссии о каждой функции или кнопке. Очень много предложений так и не было реализовано, потому что это было невозможно; часть нововведений мы приберегли для будущих релизов.

Для создания прототипов мы использовали Axure RP. После того, как макет экрана был согласован, он передавался дизайнеру. Дальше этот экран тестировался в интерактивном прототипе на мобильном устройстве. Таким образом, сразу можно было определить, удобно ли пользователю, понятна ли функция на интуитивном уровне. Приведем несколько вариантов, которые мы решили трансформировать после тестирования.

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

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

История платежей

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

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

Подтверждение платежа

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

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

Кирилл Гуляев, руководитель проекта

Главный экран

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

Задача первого экрана платёжного приложения – быстро перейти к процессу оплаты и сократить время платежа от поиска поставщика до уведомления об оплате. Поэтому экран был разделён на несколько блоков.

В верхней части экрана расположены сменяемые баннеры с напоминаниями для пользователей. Сюда выводится предложение о проверке штрафов ГИБДД, оплате счетов за ЖКХ, мобильный телефон – то, чем чаще всего пользуется аудитория и то, что проще всего забыть.

В средней части экрана, куда в первую очередь падает взгляд, расположены избранные платежи. Как правило, люди повторяют одни и те же платежи. Пользователь просто кликает на иконку платежа и попадает на экран, где уже есть все реквизиты. Это максимально быстрый способ – 5 секунд до оплаты.

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

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

Экран ввода реквизитов

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

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

Звуки

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

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

Сканер

Справа — стало: пользователь видит, когда приложение зафиксировало код и начало его сканировать

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

При сканировании штрих-кода «колесо загрузки» мы заменили анимацией: появляется полоса, как в сканере. Это позволяет скрыть загрузку данных и сделать внешний вид приложения приятнее.

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

Кирилл Гуляев, руководитель проекта

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

Автоплатёж

Теперь настроить автоплатеж стало проще. При этом, параметров стало больше.

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

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

Немного футуристики

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

Кроме того, мы занимаемся анализом Big Data. Это работает на уровне умных подсказок: пользователь оплатил квитанцию за электричество, и мы тут же предлагаем ему оплатить квитанцию за газ. Подсказки строятся на основании персонального поведения пользователя и групповом анализе.

Итоги

«Биллинговые системы» находятся в Перми. Для нас история редизайна – не просто модернизация, которая идёт на пользу компании. Мы защищаем честь Пермского края как столицы российских ИТ-разработок: Xsolla, «Макроскоп», «Танки Онлайн» появились именно здесь. Мы стремимся сделать «Центральную кассу» одной из лучших российских платёжных систем, и только что сделали один большой шаг на этом пути.

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

  • количество уникальных пользователей в месяц увеличилось на 88%;
  • количество ежедневных активных пользователей – на 148%;
  • пользователи на 16% стали чаще привязывать карты;
  • добавление платежа в избранное увеличилось на 207%;
  • выросло количество рекуррентных платежей на 136%.

Приложение – это не статичный продукт, он будет меняться на основе поведения пользователей. Уже запланированы следующие изменения:

  • аналитика по платежам;
  • индивидуальный платежный календарь, составленный на основе истории пользователя;
  • оплата «корзиной» сразу за несколько услуг;
  • автоматические платежи по штрафам ГИБДД;
  • создание чат-бота.

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

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

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru.

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

А мне не нравится. Лучше стало только цветовое решение. Но информация стала считываться хуже. Крупные заголовки заменили на мелкие, сделав акцент на непонятные иконки. Светло-серый цвет дат в календаре делает ощущение, что по календарю тапнуть нельзя, так как выглядит словно он в неактивном состоянии. В истории платежей даты и пояснительная информация к платежу (номера телефонов) содержит слишком мелкий шрифт. Пусть дизайнеры прочитают гайды — там четко указано, что для @1x шрифт должен быть не менее 11px (соответственно, @2x — 22px, @3x — 33px). В таббаре цвет подписей к неактивным иконкам и самих иконок почти сливается с цветом фона. Есть, в общем, что улучшать.

0

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

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

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

0

Интересное замечание, но в том исследовании рассматривались индикаторы во время старта приложения. В таком случае можно "грешить" на систему за её медленный запуск. Поэтому не совсем корректно делать вывод о том, что во всем приложении должны использоваться только стандартные спиннеры.

0

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

Кто-нибудь может разъяснить?)

Мне удобно пользоваться «Центральной кассой», потому что у меня карты нескольких банков. Признаться, далеко не у всех из них есть нормальное приложение.
Да и от случая к случаю, плачу разными картами. Если все делать в разных интернет-банках, то можно не понять, где какой платеж был сделан. А в данном случае все в одном месте.

0

У меня тоже несколько карточек (зарплатная и личная).
Но я все отлично помню — какие платежи по картам.

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

0

Каждый выбирает то, что ему удобно. Мне не нравится, когда мои платежи раскиданы по разным местам.
Еще тут очень удобно – все чеки сохраняются и дублируются на почту. Недавно меня это очень выручило.

0

Кристина, возможно в нашем списке поставщиков Вы сможете найти тех, кого нет у Сбера и Альфы, например ваш ЖКХ или интернет-провайдер. Более того, если в нашем сервисе не найдется подходящей услуги, то Вы всегда сможете оставить заявку, и мы быстро её подключим.

0

Кристина, низачем. Дурацкий вопрос на самом деле. Вас устраивают банковские приложения? ОК, пользуйтесь.

Почему *другие* люди будут пользоваться приложухой? Обычно основных ответа три
- в банке нет вменяемой витрины платежей
- приложение от банка говно
- в приложении от банка нет нужных поставщиков (хотя хз как с этим у кассы т.к. ясно что все в первую очередь берется у кибера/рапиды или реселлеров)

Кстати любопытная тема, сбер (вот идиоты) в куаре шифрует все платежные реквизиты. Ребята додумались парсить куар и давать оплатить специфические заточенные под сбер квитанции другими картами. Это круто т.к. как показывает практика ни у кого кроме сбера нет этой тучи мелких ТСЖ. У меня например сбера нет, только тиньков (потому что сбер УГ и приложение то там нормальное, но в целом ездить в отделение по тем или иным вопросам, связанным с обслуживанием, приходится раз в несколько месяцев)

Да уж, ребятки скопировали чужой интерфейс и еще статью написали :)

0

Скрин с "Ваш платеж принят к исполнению", что значит добавить в избранное? Принятие к исполнению или перевод, если перевод то не очевиднее делать такое предложение после проверки реквизитов и готовности к отправке?

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

0

Добавление в избранные позволяет вам сохранить реквизиты и сделать повторить платёж или перевод буквально в 2 касания. В одном из следующих обновлений избранные платежи вы можете совершать платежи нажатием на одну кнопку с главного экрана или через виджет.

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

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

Прямой эфир
Узнавайте первым важные новости
Подписаться