Новая дизайн-система для Converse Bank и обновление мобильного приложения

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

Наша команда создала комплексную дизайн-систему, которая стала основой для разработки мобильного приложения в соответствии с новым визуальным и смысловым позиционированием банка. Этот инструмент упрощает работу дизайнеров и разработчиков, обеспечивая единообразие интерфейсов и удобство взаимодействия пользователей с цифровыми сервисами банка. В результате Converse Bank получил современное мобильное приложение, соответствующее высоким стандартам UX/UI и отражающее новую стратегию бренда.

Converse Bank поставил перед собой амбициозную цель — не просто обновить цифровые продукты, а стать флагманом и трендсеттером рынка. Для реализации этой стратегии была необходима унифицированная дизайн-система для цифровых каналов, которой ранее не существовало. Мы создали её с нуля, обеспечив гибкость и масштабируемость. В первую очередь система была внедрена в мобильное приложение, а затем адаптирована для веб-версии.

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

На момент старта проекта у Converse Bank уже было действующее мобильное приложение. Однако с точки зрения UX/UI, функциональности и визуального соответствия обновлённому бренду оно требовало трансформации. Мы переработали пользовательские сценарии, обновили интерфейс и внедрили новые функции, сохранив при этом привычную логику взаимодействия. Итог — современный, удобный и адаптивный цифровой продукт, отвечающий как текущим, так и будущим задачам банка.

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

Мы сформировали перечень основных компонентов, которые закрывают 90% потребностей в создании любого продукта. Остальные 10% — это специфические сложные компоненты, которые создаются специально под задачи. В результате у нас получились две версии компонентов для темной и светлой темы, которые могут использовать как дизайн-команда, так и команда разработки. Это позволит делать работу проще, быстрее и эффективнее.

Библиотеку компонентов разработали на армянском языке. И дело тут не только в локализации: у армянского языка своя специфика в смысле UI, которую нужно было учитывать. Некоторые стандартные решения, которые мы уже использовали, в том числе на международных проектах, для Converse Bank не подходили из-за длины армянских слов. Поэтому мы искали альтернативные варианты вординга, которые будут хорошо работать при любом количестве символов. В итоге погрузились в специфику банковского сленга и написали все тексты для интерфейсов на английском и русском, а затем перевели на армянский с помощью коллег из Converse Bank. 

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

Блочный принцип использовали и в интерфейсе для пользователя. Визуальной частью приложения можно управлять кастомно, адаптируя под свои нужды и цели отдельные страницы. Все возможности приложения упакованы в комфортный и приятный UI. 

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

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

Стандартная функция профиля в банковских приложениях — дать возможность менять пароль, добавить аватарку или сменить тему со светлой на темную. У Converse Bank в профиле кроме настроек есть разделы «Документы» и «Имущество».

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

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

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

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