Необанкинг, Flutter и детские копилки: как мы создаём финтех-приложения и удивляем пользователей

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

Популярность мобильных банков подтверждает и статистика: за последние пять лет в России выросло количество пользователей цифровых банковских сервисов. Доля пользователей увеличилась в два раза с 2018 года и составила 70% в 2023 году.

Финтех — одна из фокусных отраслей компании Surf наряду с e-commerce, фудтехом и разработкой корпоративных решений. Мы уже более 10 лет работаем с банками и понимаем все тонкости создания приложений для них.

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

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

Поехали 😉

• Как устроено первое в России банковское приложение на Flutter
• Почему семейный банкинг развивается: приложение, которым пользуется более 9 000 человек
• Как миллениалы помогают банкам цифровизироваться
• Как мы создавали веб-клиент для платёжной системы
• Можно ли создать приложение для всех платформ и сэкономить 60% бюджета
• Бонус: на чём сосредоточиться финтеху при запуске мобильного приложения

Дано: крупнейший российский банк с клиентской базой более 80 тысяч и 220 отделениями по всей стране.

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

Задача. Наша команда должна была сделать первую версию нового приложения в концепции смарт-банка. Дальше «Росбанк» планировал развивать проект самостоятельно силами своей команды.

Что мы сделали. Разработали первое в России приложение на Flutter. Тогда ещё мало кто слышал о кроссплатформе от Google, но команда «Росбанк Бизнеса» хорошо знала рынок технологий и ориентировалась в трендах.

Flutter выгоден для развития продукта на длинной дистанции: проще собрать инхаус-команду, относительно двух команд разработчиков нативных приложений. Численность Flutter-команды будет меньше и управлять ею легче. Разработка на Flutter тоже быстрее, чем нативная, так как одна кодовая база служит основой сразу для двух платформ: Android и iOS. Так сокращается time to market и продукт до конечного пользователя доставляется быстрее.

Пока наша команда работала над первой версией приложения, «Росбанк» собирал свою команду Flutter-разработчиков, для которых Surf помогал провести технические собеседования и онбординг.

О том, как мы передаём проекты в инхуас, можно прочитать в этой статье.

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

Результат:

• Приложение «Росбанк Бизнес» — первое банковское приложение в России и второе в мире, написанное на кроссплатформенной технологии Flutter.
• Мы передали Flutter-разработку в инхаус — Росбанк успешно развивает приложение самостоятельно.
• В 2021 году приложение «Росбанк Бизнес» получило первое место среди мобильных приложений в категории «Банки, финансы и страхование» по версии Tagline Awards 2020-2021.

Дано: банк из международной группы SBI Holdings. Головная организация управляет инвестфондами объёмом в $29,8 млрд и входит в рейтинг Forbes Global 2000.

Задача. Банк обратился к нам, чтобы создать новое нативное приложение. Приложение у банка уже было, но оно морально устарело и им пользовались всего 400 клиентов (сейчас им пользуется более 9 тысяч клиентов банка ежемесячно).

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

О том, что такое нишевание, и почему современные банки выбирают этот путь, можно прочитать в нашей статье.

Что мы сделали. Команда банка пришла к нам с основными идеями концепции «семейный банк»:

• на какие семейные функции нужно сделать акцент;
• где и как нужно отобразить личные продукты клиента;
• как упростить клиентские пути.

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

1. Дать доступ к общим семейным счетам и функциям. Мы реализовали совместный доступ к счетам. При этом владелец может устанавливать лимиты всем участникам «Своего круга». Для детей мы добавили отдельный счёт с копилкой и доступом к заданиям, выполняя которые ребёнок получает звёздочки — они конвертируются в деньги или ценные награды.

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

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

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

Результат:

• Мы сделали банковский продукт, которым пользуются более 9 тысяч клиентов банка ежемесячно — это в 23 раза больше, чем было в предыдущей версии мобильного приложения.
• Вместе с командой банка мы постоянно анализировали продукт с точки зрения удобства для пользователей. Так мы внесли несколько изменений, которые помогли увеличить число клиентов банка и конверсию по отдельным операциям.

Дано: финансовый стартап из Пакистана, резидент бизнес-акселератора Y Combinator. Оценивается в 100 млн долларов. По данным Всемирного банка, Пакистан входит в ТОП-3 стран мира по численности населения без банковских счетов. Привычных нам удобных банковских сервисов и мобильных приложений в стране нет, они только развиваются.

Задача. Нам предстояло создать приложение для одного из первых онлайн-банков Пакистана. Команда банка хотела удобный инновационный сервис, сравнимый с приложением банка «Тинькофф». Так команда хотела популяризировать банковские услуги в Пакистане и сделать онлайн-платежи доступными.

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

Что мы сделали. Разработали и выпустили современное банковское приложение для миллениалов. В нём можно за пару кликов зарегистрироваться, а после проверки документов — получить виртуальную карту и в тот же день оплатить ею покупки в магазине.

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

• регистрация и авторизация с помощью удалённой верификации;
• профиль пользователя;
• заказ физической карты;
• информация по транзакциям;
• межбанковские переводы;
• переводы внутри банка по номеру телефона;
• установка лимитов по картам;
• оплата счетов;
• быстрый чат с оператором;
• push-уведомления.

Команда банка сразу знала, что хочет приложение на кроссплатформенном фреймворке Flutter, потому что это одна из активно растущих технологий мобильной разработки. Банк хотел реализовать свой проект «по последнему слову технологий».

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

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

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

Результат:

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

Дано: крупный финансовый стартап, который создаёт в России новую международную платёжную систему.

Задача. Мы должны были разработать платёжный веб-клиент, который бы связывал пользователей с процессингом платёжной системы.

Что мы сделали. На реализацию у нас было четыре месяца: за первые два мы создали MVP (минимально жизнеспособный продукт) веб-клиента с основной функциональностью. В следующую итерацию доработали систему и наполнили её функциональностью для разных видов переводов и сервисных возможностей.

Мы разрабатывали не только frontend, но и backend сервисы, и это пригодилось в проекте. Обычно backend на стороне другой команды усложняет коммуникацию: не всегда есть понимание, что происходит в «голове» сервиса. Из-за этого может тормозить клиентская часть — frontend.

Тут же мы полностью отвечали за всю разработку с нуля. Решили первым делать backend, а затем дополнить его frontend-частью. Иногда уходило чуть больше времени на то, чтобы синхронизировать команды. Но учитывая, что команда работала в максимально сжатые сроки, справилась она отлично. Все правки и замечания клиента отрабатывались оперативно за счёт слаженной работы и прямого управления внутри компании.

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

Результат:

• За 4 месяца сделали веб-клиент для выплаты денежных переводов по основным странам.
• В развитие заложено увеличение функций и детализация денежных переводов.
• Далее планируется расширение географии присутствия и увеличение количества стран, куда будут доступны переводы.

Дано: концепт универсального приложения. Мы его придумали и реализовали сами.

Задача: нам предстояло создать концепт универсального приложения, масштабировать его на разные платформы, и показать — как можно сэкономить на разработке. Мы разобрались, как это можно сделать, и запустили концепт-прототип сразу для 3 площадок: смартфонов, веба и десктопа.

Что мы сделали. Разработали кликабельный прототип современного банка, которому не страшны санкции и блокировки.

Для реализации выбрали Flutter, ведь адаптивность — его сильная сторона. Приложение может подстроиться под любое пользовательское окружение и работать на любых операционных системах и браузерах. Веб-приложение будет на 100% иметь ожидаемое поведение, и будет идентичным приложениям на Android и iOS.

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

Кроме обеспечения привычной визуальной среды, Flutter подходит для создания мобильного банка со всеми базовыми функциями с помощью PWA (Progressive Web Application — прогрессивных веб-приложений). О том, почему мы считаем, что PWA и Flutter созданы друг для друга, можно прочитать здесь. Развернуть веб-версию, не меняя процесс разработки и не переписывая всё с нуля — возможно для PWA, написанного именно на Flutter.

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

• В разделе «Карты» — отображаются карты с общим и разделённым балансом.
• «Счета и «Цели» с привычными функциями «копилки» и доступных счетов: дебетового и кредитного.
• «История» показывает траты каждого месяца по категориям.
• Доступны привычные автоплатежи, переводы по номеру телефона и оплата по QR-коду.

Результат:

• Мы придумали, как можно снизить скорость разработки и сэкономить бюджет на создание банковского приложения. С использованием единой кодовой базы можно «раскатать» цифровой банковский продукт на все популярные платформы, без ущерба для функциональности и визуальной части.
• Там, где владельцу бизнеса потребовалось бы три команды разработчиков (Android, iOS и веб), Flutter-команда может сделать продукт в среднем в два раза быстрее. Это существенно приблизит дату релиза проекта.

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

1. Всегда помните о пользователях: внедряйте привычные (ожидаемые) функции и новые, которые облегчат взаимодействие с финансами.
2. Если ваш банковский продукт попал под санкции — не бросайте своих пользователей в неведении. Ищите альтернативные каналы дистрибуции, их сейчас достаточно: альтернативные сторы, PWA, установочные APK-файлы для пользователей Android.
3. Расставляйте приоритеты: на первом плане — стабилизация существующих направлений, адаптация их к новым реалиям и защита от угроз. При развитии онлайн-каналов сосредоточьтесь на настройке стабильной работы и доставке обновлений всем пользователям, включая владельцев техники Apple, и только потом — на добавлении новых фич.
4. Развивайте концепцию нишевания, если она вписывается в вашу бизнес-модель. Фокус на конкретной нише поможет конкурировать за пользователей и привлечь новую аудиторию. Это может быть предложение для отдельной целевой группы (пример — семейный банкинг) или для конкретного сектора бизнеса.