«Цифра»: разработка мобильного приложения с банкингом и функционалом для инвестиций

Главное о кейсе

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

–––––––––
We designed an extensive mobile app with a significant number of features and a complicated functionality that is yet logical and understandable. For the banking design, we used UX patterns that are well-known to the user. The investment UI has become convenient for skilled brokers and comprehensible for newbies.

Бизнес-задача и ее решение

Мы сотрудничаем с «Цифрой» (экс. Freedom Finance) уже несколько лет по многим задачам: от конкурентного анализа до дизайна интерфейсов. Когда у клиента появилась задача на редизайн банковского мобильного приложения с функционалом для инвестирования, они обратились за нашей экспертизой, знакомой им по предыдущим совместным проектам.

При создании нового дизайна нужно было учитывать уже существующие технические наработки клиента и особенности работы финансовых приложений, а еще - плотно сотрудничать с командой разработки «Цифры». И ещё несколько условий:

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

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

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

Курсы валют — одна из «фишек» приложения, так как «Цифра» показывает пользователю более выгодные биржевые курсы. На одном экране можно посмотреть значения по 4 видам курсов валют, и здесь же обменять их.

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

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

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

Работали над библиотекой компонентов в плотной связке с разработчиками. Учли все особенности элементов платформы IOS и Android, сделали элементы понятными для пользователя.

Самостоятельно отрисовали библиотеку иконок в общей стилистике.

–––––––––
We've been working with "Cifra" (ex-" Freedom Finance") for several years already on many tasks: from competitor analysis to UI design. When the client needed to redesign the mobile bank app and add the investment feature, they came to us for our expertise they already knew because of our previous cooperative projects.

While creating the new design, it was essential to bear in mind the existing client's developments and the peculiarities of finance apps and work closely with the "Cifta" dev team. And a few other conditions:
- The app has to be accessible to everyone. So the banking feature had to be implemented according to the patterns users are used to.
- The investment functions had to be convenient for professional brokers and beginning investors. Finding a balance between patterns for those groups was vital to make the app comfortable for both parties.

We've conducted a competitive analysis and selected solutions that would improve the "Cifra" app UX.

We've designed every possible banking scenario and the broker UI. On the main screen, we showed the client products: cards, accounts, broker accounts, savings, and credits. You can also see widgets with operations, investment ideas, and currency rates here.

Currency rate is one of the app’s killer features, as “Cifra” shows users the most profitable exchange rates. You can see the values of four currency rate types and exchange them on the same screen.

We’ve implemented the full functionality of a banking app: our designers created many screens, including notifications, currency exchange, and different transfers. Also, we designed the user’s account with rates, the app chat, transaction history, product screens, templates, and autopayments.

Since the app includes investment features, we added topping up the broker account function and bank and broker accounts transactions. It will allow the users to transfer money between different accounts using one app.

Our team adopted a systematic approach to design. We create interfaces based on the library we compiled at the project's beginning. We still support it according to functionality expansion and the increasing number of scenarios. Our designers assembled the components, systemized them, and added all the states. When designs are systemized and correlate with one another, users find it easy to navigate through the screens and consider the app convenient.

We've worked on the component library together with the dev team. We kept all the features of iOS and Android platforms in mind and made the elements understandable.

In addition, we designed an icon set following the general concept

Прочая информация о кейсе

UX-дизайн для мобильного приложения банка «Цифра» — одного из лидеров рынка частных инвестиций в России. Он одним из первых в России объединил функционал банкинга и инвестиций в единую цифровую экосистему.

–––––––––
UX design for the mobile app of "Cifra," one of Russia's leaders in the private investment market. The app was one of the few in the country to combine banking and investment functions.

Скриншоты