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

Создатель приложения — финансово-технологическая компания «Биллинговые системы», которая разрабатывает платёжные решения для «Сбербанка» и Центрального банка РФ. Компания занимается обработкой и защитой платежей, предоставляет решения для 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 человек, и мы должны учесть потребности и ожидания каждого. Новое приложение потребовало нового уровня оперативности у компании.

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