Банк Зенит

Что получилось

У банковской группы Зенит появилось банковское приложение. У него современный дизайн, который постоянно дорабатывается в соответствии с новыми стандартами индустрии, и удобный интерфейс. Сейчас у приложения 200 тысяч пользователей. По сравнению со старым приложением активность клиентов по платежам и переводам возросла на 20%. 

В приложении удобно осуществлять все базовые банковские операции: открывать и закрывать счета, делать платежи, оформлять заявку на кредит или рассрочку. Также через приложение банк может отправлять пользователю персональные предложения. Кроме того, Зенит в числе первых внедрил оплату через СБП и интеграцию с ГИС ГМП. 

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

Недавно у Зенита появилась система лояльности: пользователи могут копить баллы и компенсировать ими покупки. 

Подготовка к переходу в мобайл

Зенит пришел с высокоуровневым бэклогом требований. Но это были бизнес-требования, не оптимизированные под мобильный продукт.  Аналитики Surf провели большую работу, чтобы доработать их и подготовить к технической реализации. 

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

В ходе проекта использовали Remote Config: с ним можно менять возможности приложения, не обновляя весь сервис и не дожидаясь выгрузки в стор. Процесс выглядел так: Surf выпускал фичу, но пользователям она была не доступна. Банк адаптировал под нее бэкенд, мы вместе проверяли, что все работает, и только после этого она становилась доступна пользователю. 

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

Оптимизация для запуска приложения за полгода

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

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

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

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

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

Параллельная разработка для Android и iOS и открытые стандарты кода позволили уложиться в срок. В какой-то момент мобильный банк даже обогнал веб по функциональности.

Дизайн

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

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

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

Приложение без багов

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

Всё для удобства пользователя: карта, онлайн-чат и оплата по QR-кодам

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

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

Онлайн-чат. Онлайн-чат дает клиентам возможность обратиться в банк без долгого ожидания ответа от колл-центра и не выходя из дома. Чат для клиентов Зенита реализовали на базе сервиса Webim.Он подходит для онлайн-общения с клиентами через любой канал связи и его можно интегрировать с CRM и HelpDesk системами. В чат можно отправлять текстовые сообщения, прикладывать фото или документ. 

Оплата по QR—кодам. Чтобы клиенты банка смогли оплачивать квитанции по QR-коду, в приложении настроили работу сканера. 

Быстрые переводы через СБП и оплата штрафов в ГИС ГМП

ГИС ГМП. Интеграция с ГИС ГМП (Государственная информационная система о государственных и муниципальных платежах) — очень востребованная функциональность. В ней пользователь может узнать о своих задолженностях перед бюджетом, а через приложение банка — быстро и удобно оплатить их. Интеграцию настроили через веб-API. В результате, в разделе «Платежи» клиент банка может получать информацию о начисленных штрафах и налогах. Оплачивать их можно вручную или с использованием QR-кодов.

Система быстрых платежей (СБП). СБП позволяет мгновенно переводить деньги по номеру телефона клиенту любого банка. Зенит подключил систему для своих клиентов одним из первых. Для этого нам пришлось внести изменения в логику работы приложения и его дизайн.

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

Банку нужно соблюсти эти требования и при этом сохранить логику и единый стиль своего приложения. Чтобы найти компромисс, потребовалось много времени. Дизайн приложения Зенита переделывали и адаптировали под требования НСПК 4 раза. А само внедрение СБП заняло почти полгода. Но в итоге у клиентов банка появилась удобная возможность для быстрого перевода денег в любой банк по номеру телефона.  

В ближайших планах по развитию СБП в приложении Зенита — реализовать оплату через qr-коды и сервис me2me — он позволит клиенту аккумулировать средства с разных счетов, в том числе в других банках. 

Онлайн-заявка на кредит — сложная, но необходимая функциональность

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

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

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

Для оптимизации кредитной заявки мы предложили несколько последовательных этапов:

• Все вопросы анкеты поделили на тематические разделы, в которых объединили сразу несколько относящихся к ним вопросов. Например, раздел про работу включал вопросы про место работы и доход.
• Сократили число вопросов, на которые банк хотел бы получить ответы для своей статистики, но они напрямую не влияют на решение по кредиту.
• Избавились от всех необязательных полей.

Эти шаги помогли нам сделать онлайн-заявку на кредит более удобной для пользователя. 

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

Персональные предложения как продвижение новых продуктов банка

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

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

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

Учет требований безопасности без ущерба удобству пользователей

В банковском приложении важно учесть все требования безопасности. И при этом сохранить его удобство для пользователей. Чтобы соблюсти этот баланс, приходится детально продумывать каждый юзкейс. Один из примеров — экран подтверждения операции при помощи SMS. 

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

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

Платежи: новый дизайн

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

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

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

Программа лояльности — must have для современного банка

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