Приложение для СМП Банка
Клиент
СМП Банк входит в 30 крупнейших российских банков по размеру активов и занимает 20 место в финансовом рейтинге по методике Banki.ru. Работает с 2001 года.
Задача
Изначально банк пришел к нам, чтобы доработать уже имеющееся у них нативное приложение. У приложения был устаревший дизайн, у пользователей возникали проблемы при авторизации и регистрации. При детальном обсуждении проекта стало понятно, что создать с нуля новое приложение на Flutter и заложить крепкую основу для его дальнейшего масштабирования будет проще и дешевле, чем дорабатывать существующее. Кроме того, такое приложение будет гораздо эффективнее решать задачи банка.
Помимо этого, клиент хотел, чтобы мы реализовали автотесты и инфраструктуру для них — этот инструмент сокращает сроки тестирования каждого этапа и позволяет разработчикам править баги практически моментально. Приложение будет развиваться годами, а автотесты позволят не терять в покрытии кода тестами и держать общую планку качества.
За 9 месяцев мы разработали для СМП Банка новое приложение на Flutter с автотестами и инфраструктурой для них. Есть версия для смартфона и планшета. Пользователи хвалят его за современный дизайн и удобную навигацию.
Сейчас развитие приложения продолжается, каждый месяц выходят новые фичи. Кроме того, на базе исходного кода приложения мы реализовали второе приложение — для Мособлбанка, также входящего в группу СМП Банка.
Вызовы
Большое число задач для первого релиза
В первый релиз вышли с самым большим скоупом среди наших проектов мобильных банков:
- 4 способа авторизации
- 2 способа регистрации
- Просмотр и управление продуктами
- Открытие продуктов: карт, счетов, вкладов
- Модуль «Мои финансы», в котором можно оценить своё финансовое состояние в разрезе всех банковских продуктов
- Платежи и переводы
- Автоплатежи
- Избранные платежи
- История операций и действий
- Аналитика расходов
- Чат для поддержки пользователей
- Просмотр офисов и банкоматов
- Управление личными данными
Ускорить проект позволила разработка на кроссплатформенном фреймворке — с Flutter можно сэкономить до 40% времени разработчиков. Важными слагаемыми успеха стали также слаженная работа всех участников проекта и сокращение времени тестирования за счет автотестов. Кроме того, Surf привнесли в проект свою экспертизу и сыгранную команду, проверенную более, чем 10 проектами с крупными банками.
Flutter-проект с автотестами и инфраструктурой для них
В этом проекте мы внедрили во Flutter-приложение автотесты и инфраструктуру для них. Это сокращает время на тестирование и устранение багов и, в целом, повышает качество приложения.
Один код для приложений 2 разных банков
Приложение Мособлбанка мы реализуем на базе кода приложения СМП Банка. Но при этом они будут отличаться дизайном, набором функций и точкой доступа API. Переиспользование кода сократит сроки и стоимость проекта до 70%.
Как мы это сделали
Обновили дизайн
Банк пришёл со списком требований для MVP-версии и дизайном старого приложения в miro. С продуктовой точки зрения дизайн был проработан хорошо, но выглядел устаревшим.
Когда мы заявили, что хотим создать новое приложение за 9 месяцев, причём, не просто изменить дизайн, а поменять технологию, нам никто не поверил. Скепсис исходил как от коллег, так и от рынка. Но мотивация рабочей группы, а также профессионализм нашего нового партнёра были настолько высоки, что в итоге мы справились. Начав переговоры в ноябре 2020, первый релиз сделали в августе 2021. И приложение сразу же понравилось клиентам!
Денис Краснолуцкий, руководитель Управления электронных каналов IT СМП Банка
Мы провели большую работу, чтобы обновить дизайн для приложения банка:
- «Осовременили» дизайн и адаптировали его под Flutter-разработку.
- Проработали с точки зрения UX: проанализировали решения, которые предлагал банк, использовав свою десятилетнюю экспертизу в работе с банковскими приложениями.
- Предложили несколько более оптимальных вариантов, чтобы сделать приложение удобней для пользователей. Например, проработали вариант интерфейса для маленьких экранов: предложили варианты расположения элементов, при котором на экране нет ненужных скроллов.
Ревью нового дизайна делали сразу несколько департаментов СМП Банка, каждый из которых отвечает за конкретный продукт: счета, вклады, дебетовые и кредитные карты. В результате, в дизайн внесли некоторые изменения, касающиеся содержания конкретных продуктов: например, где-то не хватало информации или она была расположена не на тех экранах. Но в части UX все наши решения показали себя как удобные и функциональные.
В итоге, получился сдержанный дизайн в фирменных цветах банка — это белый, синий и оттенки серого. Также отрисовали версию для планшета.
Реализовали автотесты
В приложении СМП Банка мы реализовали автотесты и инфраструктуру для них, чтобы банк мог запускать тесты самостоятельно. Применение автотестов повышает качество приложения и позволяет экономить время на этапе тестирования.
Сейчас примерно 65% кода приложения покрыто автотестами E2E. E2E (сквозное тестирование, End-to-end) — это процесс тестирования, при котором происходит подробная эмуляция пользовательской среды. Это означает, что имитируются разные действия пользователей: щелчки мышью, нажатия на кнопки, заполнение форм, переходы по экранам и т.д. Такое тестирование запускается перед релизными сборками, занимает много времени, но позволяет достаточно детально проконтролировать качество приложения.
В ближайшее время планируем добавить второй вид автотестов — виджет. Их можно будет запускать на каждую итерацию добавления нового кода. С виджет-тестами можно на раннем этапе обнаружить баги, которые видны обычно только при ручном тестировании. Разработчик может сразу оперативно их пофиксить, что сильно повышает скорость разработки и качество кода.
Главный экран — визитная карточка приложения
На главном экране приложения пользователь видит все свои банковские продукты: карты, счета, вклады, кредиты. Чтобы пользователю не приходилось прокручивать длинный список, мы добавили возможность скрыть ненужные продукты: например, неиспользуемые карты.
Открытие продуктов
В приложении реализовали возможность открыть любой продукт банка — карту, счет, кредит, вклад.
В некоторых регионах доступны не все банковские продукты. В приложении учли этот юзкейс: поле этого продукта будет неактивно и сместится в самый низ списка.
История операций и действий
В приложении пользователю доступна полная история операций и других действий. Их можно отсортировать по пополнению или списанию, добавить фильтры на конкретные операции или выбрать нужную дату.
Также в приложении реализовали аналитику расходов. На уже ставшем привычном многим «бублике» можно наглядно увидеть, какую сумму за период пользователь потратил на конкретную категорию.
Чат
При реализации чата в приложении мы неожиданно столкнулись с одним из главных технических вызовов этого проекта. Чат реализовали на базе готового SDK от Webim. На наш взгляд, Webim предлагает один из самых удобных SDK. Его используют Тинькофф, Райффайзенбанк, Delivery Club. Его легко масштабировать под потребности даже самого крупного клиента и кастомизировать под бизнес-процессы компании.
Но при интеграции его с приложением обнаружили, что версия Webim на Android работает с ограниченными возможностями. У нас не получалось подключить на Android необходимую библиотеку, возникала проблема с сертификатами.
В итоге, мы нашли выход: создали свою библиотеку и опубликовали ее в публичном репозитории GitHub. Чат в приложении заработал.
А через некоторое время к нам обратились представители нескольких компаний, которые столкнулись с такой же проблемой при запуске чата и нашли наше решение в репозитории. Так решение стало публичным, нашу библиотеку переиспользуют другие разработчики, включая представителей самого Webim.
Динамические формы для платежей и переводов
Для платежей и переводов СМП Банк использует динамические формы: они собираются по принципу мозаики из динамических компонентов. Это значит, что пользователь может в любой момент гибко менять любой из них — номер телефона, номер карты получателя, сумму. Например, если нужно, вернуться на экран назад и исправить сумму.
Реализация таких форм происходит на бэкенде. На стороне мобильного приложения — только отрисованные готовые компоненты. По сути, мобильное приложение просто визуализирует данные, приходящие с бэкенда. Это удобно, так как банк может гибко менять любые компоненты, их наименования и все изменения будут сразу отображаться в приложении.
Но из-за такого формата работы с переводами у банка возникли сложности при реализации СБП в мобильном приложении. Процесс перевода в СБП происходит совсем по другой логике, она строго регламентирована и менять ее банк не может. Если пользователь начал переводить деньги, он должен идти по экранам строго последовательно:
Он не может вернуться на предыдущий экран и исправить сумму.
Такая схема не совпадала с логикой работы приложения банка, где все запросы собирались как пазл из гибких компонентов и могли легко меняться пользователем на любом этапе. Поэтому СМП пришлось адаптировать бэкенд.
В числе последних реализованных фич у пользователей появилась возможность использовать новый инструмент СБП — me2me. Он позволяет переводить между своими счетами в разных банках.
Контроль за своим финансовым состоянием
В блоке «Мои финансы» пользователь может проанализировать свое текущее финансовое положение: посмотреть, сколько у него свободных денег или обязательств по кредитам. Анализ можно настроить в разбивке по продуктам и валютам. При этом для объективности картины можно исключить из списка средства, находящиеся на кредитной карте.
Оценка приложения в нативных диалогах
Чтобы пользователи могли влиять на развитие приложения и быстро оценивать его, не переходя в стор, мы реализовали диалоги обратной связи. Прямо в приложении пользователь может поставить оценку, написать комментарии по тому, что стоит улучшить.
По нашему опыту, такие нативные диалоги повышают оценку приложения в сторах, так как теперь для того, чтобы проставить нужное количество баллов, пользователю не нужно выходить из приложения.
Развитие проекта
Проект с СМП Банком продолжается. Кроме того, используя ту же кодовую базу, мы реализовали второе приложение — для Мособлбанка, входящего в группу СМП Банка. Приложения отличаются дизайном, набором функций и точкой доступа API. Но благодаря переиспользованию кода срок проекта существенно сократился.
Директор IT СМП Банка
