Shape 2 Created with Sketch. Shape 2 Created with Sketch. Shape 2 Created with Sketch. 539A0822-23D1-4EB0-A2B6-ADC1427D73FD Created with sketchtool. BE83D970-80BD-429F-8FEF-15320EFC25BD Created with sketchtool. fb Created with Sketch. Imported Layers Copy 4 Created with Sketch. Page 1 Created with Sketch. 8E691C04-FCB2-4D28-A161-E18CE8F4274A Created with sketchtool. icon-increase2 icon-mail icon-phone Oval 20 Created with Sketch. icon-research icon-research2 Group 36 Created with Sketch. Imported Layers Copy 6 Created with Sketch. Imported Layers Copy 5 Created with Sketch. LOGO 50B11FD7-22F2-4934-A094-70A3E7FBFD64 Created with sketchtool.
Ко всем проектам

РайффайзенБанк

Разработка концепции нового интернет-банка «Райффайзен-Онлайн» с блочной структурой, основанной на виджетах

60+

прототипов страниц

400+

часов работы в офисе «Райффайзен»

Коротко о компании
Дочерняя структура крупнейшего австрийского банковского холдинга, в России работает с 1996 года. Предлагает широкий спектр услуг корпоративным и частным клиентам. После присоединения в 2007 году розничного "ИМПЭКСБанка" стабильно занимает позиции в ТОП-15 российских банков, как по размеру активов, так и по объему частных вкладов и кредитов физическим лицам.
Адрес сайта
Победитель в конкурсе Золотой сайт
Руководитель отдела развития электронного бизнеса, Райффайзенбанк Наталия Масарская (НМ), Руководитель дирекции обслуживания физических лиц и малого бизнеса Райффайзенбанка
Андрей Степаненко (АС), CX-директор Аеро Виктор Антонов (ВА)
В чем особенность нового интернет-банка?
ВА: Когда мы делали интернет-банк Райффайзенбанка, то исходили из концепции «интерфейс для человека». Нам были важны потребности людей, которые придут в банк,
и нужно было сделать так, чтобы банк разговаривал с посетителем на одном языке, отвечающим этим потребностям. Интерфейс мы предложили построить не на базе банковских предложений, “продуктов” и формулировок, как это обычно происходит,
а отвечающим на простые вопросы. Правильная формулировка этих вопросов и стала для нас одной из главных задач.
Цитата НМ:
Везде, где мы отстаем от рынка, не запускаем вовремя какой-то сервис, мы теряем деньги, теряем лояльность. Единственный вариант, чтобы быстро меняться на уровне интерфейса и функциональности, был написать все заново. Причем не только front-end, но и back-end. От старого интернет-банка у нас не осталось ничего.
Цитата АС:
В новом банке интерфейс и структура стали более понятными. Так, на одном экране объединены продуктовое и операционное меню. Таким образом, пользователям стало проще ориентироваться в системе. В основе обновленного интерфейса — гибко настраиваемая модульная система, в которой каждый продукт представлен в виде виджета. Это позволяет осуществлять самые востребованные операции по каждому продукту в пару кликов.
ВА:  Обычно в приложениях и личных кабинетах банков встречается множество длинных цифр и сложны аббревиатур: БИК, ИНН, КПП, КБК и тд и тд. Наша идея была максимально всё упростить: у обычного человека есть всего несколько операций, которые ему нужны от банка: что-то оплатить, перевести деньги, посмотреть остаток денег на счете.

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

Вертикальное меню мы сделали традиционным, продуктовым. К этому меню посетитель обращается редко, когда нужно что-то очень специфичное.
Предпроектные исследования
Посетитель при заходе в интернет-банк мыслит в категориях действий (оплатить, перевести), либо в категориях продуктов (зайти на свою карту).
Значительная часть существующих клиентов привыкла к продуктовой структуре.
Вся информация и доступные действия по одному продукту/услуге в одном месте (концепция дашборда). Оптимальным числом информационных элементов меню является 5-7, большее число должно быть разбито на логические категории.
Цель и польза проекта
Разработать новой версии интернет-банка "Райффайзен-Онлайн"
Увеличить конверсионность: количество повторных входов в систему и количество проводимых операций
Реализовать поддержку индивидуальных предпринимателей
Реализовать доступ для держателей дополнительных карт, не являющихся клиентами банка
Снизить нагрузку на сотрудников банка, ответственных за проведение операций, недоступных в прежней версии системы
Задачи
Реализовать возможность персонализации внутреннего пространства по категории клиента, его местонахождению и поведению в системе
Полностью переработать визуальную часть
Расскажите подробнее о виджетах. Как они устроены?
ВА:  В них отображаются карты, которые есть у клиента в банке и информацию: какие операции в последнее время совершались, сколько денег на счете, какие суммы заблокированы. Посетитель сам может настраивать свои виджеты так, чтобы это было удобно именно ему, двигать их. Но они также предоставляют множество возможностей для маркетологов банка и автоматизированных рекомендательных сервисов: преднастройки клиент-банка могут значительно повышать просматриваемость и частоту использования продуктов и специальных предложений.

Цитата НМ:
Значительная часть клиентов, около половины, не хочет заниматься настройками. И мы сделали так, что, заходя в первый раз в новый онлайн-банк, пользователи получают полноценно настроенный рабочий стол. С ним, в принципе, можно ничего и не делать — все уже под руками. Но в то же время существуют все возможности для персональной настройки. Если есть время и желание — пожалуйста.
Какие были сложности в реализации проекта?
ВА:  Иногда мы были ограничены возможностями реализации изменений. Чтобы точнее понимать ограничения и специфику, наш аналитик работал на территории банка и был интегрирован в команду клиента. Это существенно облегчило нашу работу.

Одна из неожиданных проблем, которая возникла при работе – это фотографии, используемые в проекте. Райффайзенбанк требует абсолютного эксклюзива на все используемые материалы, поэтому нам пришлось отказались от фотографий из фотобанков и искать другие эмоциональные способы оформления разделов.
Решения и процессы
Новый подход к организации интерфейса на основе потребностей пользователя: «Я хочу...»
Блочный дизайн, состоящий из виджетов, позволяющий легко пересобирать страницы и делать персонализированные предложения для отдельных сегментов или каждому клиенту
Контекстная помощь по всем операциям в интерфейсе виджета
Цветовая дифференцация интерфейса по категории клиентов
Маркетинговые и рекламные места в единой сетке с виджетами (Native Ads)
Сохранение состояния, настроек интерфейса и заполненных данных
Адаптация структуры для удобства отображения на мобильных устройствах и терминалах самообслуживания
Виджеты для использования возможностей разных банковских продуктов в рамках одного интерфейса
Разработка при тесном взаимодействии с заказчиком в режиме аутстафинга
Общий результат
Реализована технологичная структура интернет-банка с богатыми возможностями персонализации
Дизайн виджетов позволяет сократить количество действий при выполнении операций и эффективнее пользоваться банковскими продуктами
Продумана система оповещений, маркетинговой коммуникации и контекстной помощи клиентам
Разработана концепция адаптивности интерфейса для всех типов устройств и поддержки мультиязычности
Поддержан принцип омниканальности, позволяющий вносить данные и пользоваться едиными интерфейсами на сайте, в мобильном приложении и в отделениях банка
Расскажите о проекте
Подпишитесь на рассылку о eCommerce