По итогам исследования МДМ online вошел в пятерку лучших интернет-банков России, поднявшись сразу на 21 позицию по сравнению с результатами рейтинга прошлого года.
Специалисты Markswebb оформили дебетовые карты и оценили интернет-банки более чем по 300 критериям. Для дополнительной оценки были проведены тесты с привлечением более 60 действующих клиентов российских банков.
.png)
Консолидировать лучшие интерфейсные и функциональные практики в новом интернет-банке
Для того чтобы создать новый интернет-банк не обязательно заменять серверную часть. Взаимодействие нового кастомного фронтэнда с имеющейся системой ДБО можно успешно реализовать через API. Такой подход к разработке фронтэнда позволяет реализовать практически любые сценарии взаимодействия и кардинально преобразить интернет-банк без оглядки на технические ограничения и переработки бэкэнда. В МДМ Online, благодаря этому подходу, мы смогли собрать лучший пользовательский опыт и преобразовать его в совершенно новый банк.
В основу интерфейса нового банка мы вложили концепцию одностраничного приложения. Это популярная концепция, которая позволяет использовать единственный HTML-документ как оболочку для всех веб-страниц и организовать взаимодействие с пользователем через динамически подгружаемые HTML, CSS, JavaScript. Для клиента интернет-банка решение обеспечивает высокую скорость загрузки, быстрый доступ ко всем возможностям банка и легкую навигацию.
На этапе проектирования мы составили список функций интрент-банка и проранжировали по приоритетности. Основную часть первого экрана занял блок "мои продукты", "платежи и переводы", "история операций". В нижней части собраны блоки новости, курсы валют и помощь.
.png)
Важное место занимают модули, направленные на кросс-продажи. Формы ненавязчиво вписаны в структуру страницы.
В основном рабочем поле расположена форма для открытия новых продуктов. Через форму можно в два клика оставить заявку на открытие счета, вклада, новый кредит и другие услуги.
Через коммуникационный модуль клиент может получать персональные предложения от банка и новости.
Плиточный дизайн помогает быстро ориентироваться в продуктах банка. Интерактивные элементы и продуманные детали делают управление интуитивно удобным.
Все продукты клиента отображаются в виде крупных плиток в основной части первого экрана. Разные категории продуктов мы разделили с помощью цветов: карты - голубые, расчетные счета и вклады - зеленые, кредиты и кредитные карты - оранжевые.
В правом верхнем углу плитки расположено короткое меню, через которое можно быстро выбрать нужное действие.
Любая инфомрация по продукту раскрывается в всплывающем окне. Боковой слайдер позволяет быстро переходить от продукта к продукту без переключения на рабочий стол.
Мы стремимся сделать интернет-банк особенным инструментом для каждого пользователя. Продуманные интерфейсы должны быть не просто удобными, а привлекательными на эмоциональном уровне. Один из инструментов, который мы для этого используем, это персонализация интерфейса для пользователя.
Продукты и меню могут менять свое положение. Нужно только зажать кнопку мыши и перетащить объект в новое место.
Практически весь контент на рабочем столе настраивается. Можно скрыть часть продуктов, выбрать, какие шаблоны выводить, а какие спрятать. Задать продуктам пользовательские имена и настроить данные, которые будут выводиться на плитках.
Рисунок для рабочего стола пользователь может выбрать по своему вкусу. У банка есть возможность размещать праздничные обои для поздравления клиентов с значимыми праздниками.
Процесс ввода реквизитов для оплаты максимально упрощен. Мы добавили логотипы для операторов услуг, оптимизировали поля для заполнения и ввели систему многошаговых платежей.
В списке переводов самые популярные - переводы между своими счетами. Быстрые кнопки для осуществления этой и нескольких других популярных операций вынесены прямо на рабочий стол.
Пользователь может создавать любое количество шаблонов и выбирать какие из них вывести на рабочий стол. Шаблоны анимированы. При наведении мыши карточки переворачивается. Для осуществления платежа нужно ввести сумму и сделать всего один клик.
Больше половины пользователей заходит в интернет-банк для того, чтобы пополнить баланс сотового телефона. Мы реализовали автоопределение оператора мобильной связи по номеру телефона.
Мы вывели на рабочий стол список последних операций по всем продуктам. Чтобы отсмотреть историю по отдельному продукту, нужно перейти внутрь раздела
Чтобы быстро найти нужный платеж, пользователь может использовать систему фильтров: по продуктам, периоду, видам операций.
Мы предположили, что визуализация истории будет интересным дополнением к классическому виду. На календаре легко оценить периодичность событий и распределение операций по дням недели. Кроме этого на календаре отображаются запланированые платежи.
Пользователь может сформировать сводку за неделю, месяц или 3 месяца. Все расходы автоматически разносятся по категориям. Нагляднее раздел становится благодаря диаграмме.
Короткое обучение помогает пользователю быстро разобраться в основных принципах навигации и сглаживает переход к новому интерфейсу для старых пользователей. Система обучения написана полностью в фронтэнд части, без доработки бэкенда.
Мобильная версия реализована через технологию RESS (Responsive Design + Server Side). Чтобы облегчить страницу для мобильных устройств, мы поместили основные разделы в «аккордеон». Важным элементом в мобильной версии становится голосовой и текстовый поиск, поэтому этот элемент остается довольно крупным.
Мы сделали страницу входа информативной, на ней расположилась не только форма ввода реквизитов, но и крупный слайдер, блок новостей, кнопки перехода на справочную информацию и регистрацию в банке. Форма входа, не смотря на небольшой размер, остается заметной частью страницы, она выделяется цветом и помещена в начало страницы.
Для подключения интернет-банка клиенту нужно ввести минимум информации. Слева на форме индикатор ввода данных, по ходу заполнения формы он перемещается вниз. Легкая анимация оживляет страницу.
Вход в интернет-банк по ссылке
https://online.mdm.ru
Каштанов Дмитрий, Вице-президент, руководитель дирекции электронного бизнеса
.png)
