Новая навигация приложения «Райффайзен Онлайн»

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

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

ENG

We aim to make our mobile app easier and more convenient for users to solve their everyday financial tasks. That's why we're expanding our app's functions and simplifying navigation in all user scenarios.

Как проект изменил жизнь пользователей

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

ENG

Now all everyday mobile scenarios are just 1–2 clicks away. A clear and convenient mobile app decreases users' financial stress by giving them instant access to the most popular services.

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

— Обновить навигацию в приложении и упростить доступ к сценариям
— Собрать точки продаж в единое и масштабируемое решение
— Сделать цветовую палитру, иконки и иллюстрации в характере бренда

1. Изучили потребности пользователей и собрали три концепции навигации

Мы отталкивались от того, какие действия наши клиенты делают в приложении чаще всего, чтобы сделать доступ к этим задачам в 1–2 нажатия. Оценили обратную связь пользователей в каналах поддержки и отзывы в магазинах приложений, чтобы точнее понять базовые потребности и боли, которые возникают у наших пользователей при ежедневном использовании мобильного банка. Изучили российских конкурентов и зарубежный опыт, чтобы собрать лучшие практики и решения, которые мы могли бы взять за основу новой навигации.

2. Исследовали три концепции и решения по каждому навигационному экрану

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

3. Сделали иллюстрации и цветовую палитру ближе к характеру бренда

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

4. Переосмыслили точки продаж на главном экране

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

5. Обновили список продуктов на главном экране

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

6. Улучшили экран «Платежи»

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

7. Разгрузили экран «Еще» и перенесли часть возможности в новый экран «Профиль»

С главного экрана можно попасть на новый экран «Профиль». Он стал нужен, чтобы разгрузить экран «Еще», в котором было трудно ориентироваться из-за большого числа точек входа и настроек. Теперь в «Профиле» можно найти ключевую персональную информацию. Новые пользователи могут познакомиться с возможностями Райффайзен Подписки, а после подключения следить за ее статусом. Премиальные клиенты смогут узнавать о своих привилегиях и возможностях. Из «Колокольчика» на главном экране в «Профиль» переехал и кредитный рейтинг. Наконец, «Профиль» ускорит доступ к персональным настройкам приложения.

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

8. Обновили экраны успеха

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

ENG

— Update app navigation and give easier access to the main scenarios
— Unify all selling points and be able to scale the new solution
— Create a color scheme, icons, and images that align with our brand

1. Studied user needs and created 3 navigation concepts

We started from the most popular user scenarios to make them accessible in 1–2 clicks. We analyzed user feedback in support channels and in stores to understand the needs and pain points better. We also researched our competitors both in Russia and abroad to see the existing navigation solutions we can build on.

2. Tested 3 concepts and solutions for each navigation screen

After we'd studied user needs, we came up with the first prototype for the Raiffeisen Bank app. Then we went through the first round of tests to check the main hypotheses about the structure and the look of the new solution. Next, we tested the particular screens and their color scheme to make sure we take all user scenarios and insights into consideration.

3. Created a color scheme and images that reflect our brand better

Here we started with finalizing the concepts of the future app and adding more character to the screens. We used lighter typography and milder brand colors, and also added images and icons from our brand book. We asked the users to rate 6 design solutions and say how they like them, which is the best, and which is the worst. We used multifactor scoring to ensure that our final design isn't just nice, but it also goes well with our brand positioning.

4. Reimagined selling points on the main screen

We used to have a lot of selling points, and they all looked different. Instead, we created a unified offer system to use across the app. The main screen became much more concise with only the most relevant controls.

5. Updated our product list on the main screen

We kept everything our clients are used to and made it even better: hiding products or balances and opening new products, while keeping it all clear and concise. Our main achievement was simplifying the product list. We were able to remove duplicating accounts and cards and make the list less confusing. We also added more value by showing the main notifications about the products.

6. Improved the Payments screen

We made it easier to pay with a QR code. The Transfer by phone widget was updated not only to save the recent numbers, but also to auto-scan a phone number to transfer money faster. The Favorites section started to remind users about their bills and adding new operations for quick access. And finally, instead of four blocks for all transfers and payments, we added just two lists with a clear difference.

7. Took the load off the More screen and moved some functions to the new profile

The More screen was hard to navigate due to many entry points and settings, so we moved some functions to the new profile (Main → Profile). The profile got all personal data, information about Raiffeisen Subscription and its statuses, and all privileges and functions for premium users. We also moved the credit rating from the Inbox there. And it became easier for users to set up the app to their preference.

The More screen became simpler, but kept the exchange rates, cash ordering, offices and ATMs, and some other functions. At this step, we aimed to improve the transparency of the More screen by moving some functions to the profile and decreasing cognitive load.

8. Updated success screens

We couldn’t leave success screens behind, as every scenario now started with the updated style on the screen. While working on the structure and details, we were looking for a balance between informative and emotional. We organized a brainstorm and were very grateful for everyone’s help in checking our hypotheses. We were also glad to work with our brand team on authentic animations that truly conveyed our brand character. The new animations were released for the most frequent transfers. We’ll update them across the app soon.

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

Мобильное приложение Райффайзен Онлайн — это цифровой офис банка для удаленного решения всех финансовых задач. Пользователи могут стать клиентом банка, открыв карту или счет; переводить без комиссии по номеру телефона, карты и счета; управлять своими картами и счетами, кредитами и инвестициями; получать кредиты и открывать накопительные счета; вести учет расходов и доходов; заказывать справки и подписывать документы; получать онлайн-консультации в чате 24/7 и многое другое.

ENG

Raiffeisen Bank mobile app is a digital bank office that allows to solve all financial tasks. Users can become clients by opening an account or card. They can transfer money by phone, card number, or account number with no fees. The app also allows them to manage their cards, accounts, loans, and investments. It simplifies the process of getting a loan or opening a savings account, keeping track of expenses and income, getting statements, and signing documents. Clients can also get 24/7 help in the chat. All that, and many more.

Текущая доступность работы

Клиентам доступны обновленные навигационные экраны «Профиль», «Платежи», «Еще». Новая версия гланого экрана будет открыта в январе 2024 года.

Скриншоты

Видео