3 проекта

Internet Banking Rank 2016 — самое масштабное исследование интернет-банков в России

По итогам исследования МДМ online вошел в пятерку лучших интернет-банков России, поднявшись сразу на 21 позицию по сравнению с результатами рейтинга прошлого года. ​

Специалисты Markswebb оформили дебетовые карты и оценили интернет-банки более чем по 300 критериям. Для дополнительной оценки были проведены тесты с привлечением более 60 действующих клиентов российских банков.

Ведущие отраслевые СМИ написали об успехе проекта

                          

 

Задача


Консолидировать лучшие интерфейсные и функциональные практики в новом интернет-банке

Особенности проекта

Лучшие пользовательские сценарии без смены системы ДБО

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

online.mdm.ru/cabinet
МДМ Online
before
after

Архитектура Single Page Application

В основу интерфейса нового банка мы вложили концепцию одностраничного приложения. Это популярная концепция, которая позволяет использовать единственный HTML-документ как оболочку для всех веб-страниц и организовать взаимодействие с пользователем через динамически подгружаемые HTML, CSS, JavaScript. Для клиента интернет-банка решение обеспечивает высокую скорость загрузки, быстрый доступ ко всем возможностям банка и легкую навигацию.

Удобный рабочий стол

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

Кросс-продажи внутри банка

Важное место занимают модули, направленные на кросс-продажи. Формы ненавязчиво вписаны в структуру страницы.

Заявка на открытие продукта

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

Коммуникационный модуль

Через коммуникационный модуль клиент может получать персональные предложения от банка и новости. 

Представление проектов

Плиточный дизайн помогает быстро ориентироваться в продуктах банка. Интерактивные элементы и продуманные детали делают управление интуитивно удобным.

Интерактивные плитки

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

Сервисное меню

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

Управление продуктами

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

Индивидуальные настройки

Мы стремимся сделать интернет-банк особенным инструментом для каждого пользователя. Продуманные интерфейсы должны быть не просто удобными, а привлекательными на эмоциональном уровне. Один из инструментов, который мы для этого используем, это персонализация интерфейса для пользователя.

Мобильные элементы

Продукты и меню могут менять свое положение. Нужно только зажать кнопку мыши и перетащить объект в новое место.

Настройки отображения

Практически весь контент на рабочем столе настраивается. Можно скрыть часть продуктов, выбрать, какие шаблоны выводить, а какие спрятать. Задать продуктам пользовательские имена и настроить данные, которые будут выводиться на плитках.

Фоновые рисунки

Рисунок для рабочего стола пользователь может выбрать по своему вкусу. У банка есть возможность размещать праздничные обои для поздравления клиентов с значимыми праздниками.

Быстрые переводы

В списке переводов самые популярные - переводы между своими счетами. Быстрые кнопки для осуществления этой и нескольких других популярных операций вынесены прямо на рабочий стол.

Оплаты в один клик

Пользователь может создавать любое количество шаблонов и выбирать какие из них вывести на рабочий стол. Шаблоны анимированы. При наведении мыши карточки переворачивается. Для осуществления платежа нужно ввести сумму и сделать всего один клик.

Автоопределение оператора

Больше половины пользователей заходит в интернет-банк для того, чтобы пополнить баланс сотового телефона. Мы реализовали автоопределение оператора мобильной связи по номеру телефона. 

История операций

Лента на рабочем столе

Мы вывели на рабочий стол список последних операций по всем продуктам. Чтобы отсмотреть историю по отдельному продукту, нужно перейти внутрь раздела

Расширенные поиск

Чтобы быстро найти нужный платеж, пользователь может использовать систему фильтров: по продуктам, периоду, видам операций.

Календарь

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

Анализ расходов

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

Обучение

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

Мобилизация

Мобильная версия реализована через технологию RESS (Responsive Design + Server Side). Чтобы облегчить страницу для мобильных устройств, мы поместили основные разделы в «аккордеон». Важным элементом в мобильной версии становится голосовой и текстовый поиск, поэтому этот элемент остается довольно крупным.

Смартфон
Планшет

Страница входа в интернет-банк

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

Страница регистрации

Для подключения интернет-банка клиенту нужно ввести минимум информации. Слева на форме индикатор ввода данных, по ходу заполнения формы он перемещается вниз. Легкая анимация оживляет страницу.

Вход в интернет-банк по ссылке

https://online.mdm.ru

  • Команда Artsofte показала способность решать нетривиальные технологические задачи, даже при наличии определенных ограничений, обусловленных сложными банковскими бизнес-процессами и высокими требованиями к безопасности продукта. Artsofte предложили множество современных решений в области UI/UX, которые позволили решить сложные пользовательские задачи и сценарии поведения клиентов.
    Каштанов Дмитрий, Вице-президент, руководитель дирекции электронного бизнеса

Понравилась работа — расскажите друзьям!

online.mdm.ru

Спасибо за внимание!