Как с помощью PWA обойти санкции для банков в сторах и сохранить клиентов

Создать мобильный банкинг с нуля сейчас долго и дорого из-за множества факторов - в первую очередь из-за стоимости команд разработки. Плюс часть банков сейчас находится под санкциями, их приложения невозможно разместить ни в Google Play, ни в AppStore. Можно, конечно, оставаться на веб-версии интернет банка, но это значит ограничивать себя в функциональных возможностях и потерять часть клиентов, так как люди уже привыкли к высокому уровню цифровых сервисов.

Для Банка Санкт-Петербург мы разработали мобильное банковское приложение на основе PWA (Progressive Web Application). Как технология PWA имеет ряд ограничений, но при этом позволяет максимально эффективно реализовать часть сценариев. Данные решение не уступает по функционалу классическому нативному приложению, и в то же время существенно экономит ресурсы.

PWA - это технология, которая делает веб-приложения похожими на нативное. PWA не выглядит как типичная веб-страница, у него есть иконка на экране телефона отсутствует строка поиска, но самое главное, там работают многие нативные функции. Например:

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

Несмотря на то, что все еще приходится идти на некоторые компромиссы, самый главный - UI/UX. Сейчас - это полноценный рабочий инструмент.

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

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

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

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

Система построена на основе единого брендбука Банка Санкт-Петербург. Это сделано для того, чтобы все работало на узнаваемость продуктов, когда фирменный стиль моментально считывается и ассоциируется с компанией.

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

Те же паттерны можно использовать не только в банковских, но и в сопутствующих сервисах - страховании, инвестициях и т.п.

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

MVP тестировала фокус-группа из 100 человек: различные сотрудники банка.

На следующем этапе мы доделывали базовые сценарии использования приложения и работали над стабильностью и оптимизацией.

В этой версии мы уже реализовали основные сценарии daily banking, т.е. добавили:

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

На последнем этапе у нас было много технических доработок:

Также в финальной версии мы доделали сбор метрик - как по вопросам “здоровья” приложения, так и по вопросам основных данных для бизнеса. Благодаря этому у нас появилась так называемая тепловая карта (heat map), которая дает представление о том, какие услуги банка наиболее востребованы и помогает в дальнейшем продуктивно работать с цифровыми продажами.

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

Разработка PWA определенно потребовала меньше человеко-часов, чем любое нативное приложение.

Когда еще три года назад мы разрабатывали нативные мобильные приложения параллельно под две платформы - Android и iOS, у нас было аж четыре команды: фулстеки, которые реализуют интернет-банкинг и бэкенд, а также дополнительная команда, которая стыкует бэкенд и нативные приложения.

Сейчас мы обходимся одной командой, что сократило наши затраты на персонал на 30%. Одна ее часть занимается бэкендом, другая - делает PWA на основе дизайн-системы.

Мы выпустили кроссплатформенное приложение, которое реализует все основные сценарии daily banking с элементами digital-офиса. В приложении реализованы:

Также мы доработали функции, о которых особо просили пользователи:

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

Распространяя приложение, мы не сталкиваемся с санкционными блокировками со стороны официальных магазинов. PWA легко устанавливается прямо с сайта - фактически, установка сводится к размещению ярлыка на рабочем столе. Если мы выпускаем обновления, они доступны сразу и на iOS, и на Android, причем клиенты их получают мгновенно. Для бизнеса это упрощает поддержку бэкенда, потому что с его стороны не надо помнить о разных версиях.

Так как мы писали приложение с нуля, мы попутно избавились от всего legacy, переход на PWA полностью “обнулил” наш технический долг.

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