Главное Авторские колонки Вакансии Образование
Выбор редакции:
998 1 В избр. Сохранено
Авторизуйтесь
Вход с паролем

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

Иллюстрированный пошаговый case-study по разработке банковского сервиса для планшетов на основе пользовательского опыта взаимодействия (UX) от ведущего агентства финансового дизайна в Европе.
Мнение автора может не совпадать с мнением редакции

Автор: Alex Kreger, UX Design Agency CEO/Основатель

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

А вы полностью довольны своим онлайн банком?

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

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

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

Мы спрашивали людей об их наиболее приятном онлайн опыте, и никто не вспомнил про интернет банки, хотя 18% используют их ежедневно. Чаще вспоминались небанковские финансовые сервисы наподобие Mint и Moven. Почему это так?

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

Проводим исследoвание интернет банка

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

b_56fe4e835c416.jpgВ Twitter очень много жалоб на онлайн банки

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

1. Персонализация

2. Прозрачность

3. Самообслуживание

4. Приоритет мобильному формату

5. Простота

6. Красота

7. Целостность

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

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

b_56fe4e84c6351.jpgОсновная проблема большинства банков слишком сложная и запутанная навигация

Поверьте, если вы попытаетесь понять как все работает в 2000 разделов у 20 банков, вы можете сойти с ума. Но мы сделали это для вас, так что не бойтесь и продолжайте чтение.

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

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

Привлекательный дизайн и легкость в использовании от которых должно перехватывать дыхание.3. Банк должен заботиться

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

b_56fe4e8597f6a.jpgА вы знаете точки страсти своих пользователей?

Великолепно. Мы уже в нескольких шагах от разработки восхитительного опыта взаимодействия. Как представители поколения Y мы будем разрабатывать решение для своих сверстников. Именно они активно осваивают новые технологии и будут ключевыми потребителями ближайшие 10 лет.

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

b_56fe4e86c88f5.jpgЗнание когнитивной психологии станет вашим преимуществом

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

b_56fe4e8807bcd.jpgИдентифицируйте приоритетные сценарииb_56fe4e883170e.jpg

Проектируем идеальный интернет банк

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

b_56fe4e893f5ef.jpgЭто одна из самых сложных частей, но мы разработали собственную методику

И финальный шаг определения стратегии это разработка карты взаимодействий. Теперь нам ясно как пользователи будут использовать приложение и как удовлетворить их потребности.

b_56fe4e8a3f47f.jpgВам необходимо достичь ясного видения как это должно работать

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

b_56fe4e8b610ab.jpgПрототипы это схематические чертежи которые показывают скелет будущего интерфейса

Вот теперь настало время для крутого дизайна.

b_56fe4e8c5623a.jpgРазные дизайнеры зачастую используют одни и те же программы, но результат кардинально отличаетсяb_56fe4e8c7d2e9.jpg

Создаем загрузочную страницу мобильного банка

Наша загрузочная страница должна быть полезной без авторизации. Поэтому мы решили разместить на ней:

1. Форму авторизации

2. Контактную информацию

3. Форму регистрации

4. Карту отделений и банкоматов

5. Рекламу банковских услуг

6. Калькулятор валюты

7. Новостную ленту

b_56fe4e8db64fc.jpgЗагрузочная страница

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

Вам ведь нравится периодически изучать App Store или Google Play в поисках интересного приложения? Представьте если бы это было возможно в вашем банке. Просто наслаждайтесь просмотром красивых карточек банковских сервисов и выбирайте тот, что вам подходит.

Конечно наши пользователи могут без проблем связаться с банком в случае проблемы, или если они захотели стать клиентами.

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

Новости во время загрузки? Почему бы нет, может рядом с вами открылся новый филиал.

b_56fe4e8ed9d0e.jpgЗагрузочная страница помогает даже без авторизацииb_56fe4e94bc2ca.jpg

Разрабатываем экран баланса и истории транзакций

Итак, вы авторизовались. Мы подготовили для вас кое-что интересное:

1. Баланс счета

2. Месячные поступления

3. Месячные затраты

4. Уровень доступных в этом месяце, и сегодня, средств

5. Бюджеты по категориям

6. История последних перечислений

7. Меню быстрого доступа для каждой транзакции

b_56fe4e95c8e28.jpgПервая страница

10 секунд достаточно что-бы увидеть понятный и заметный индикатор баланса. Еще несколько секунд и вы четко понимаете сколько еще денег можете безопасно потратить в каждой категории. Это включает как сумму которую можно потратить в этом месяце (регулярные платежи по счетам автоматически вычитаются), так и сумму на каждый день месяца.

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

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

Готовы для большего? Надеемся вы найдете наше краткое и интуитивное меню восхитительным.

b_56fe4e96edab2.jpgФинансовый статус на первой страницеb_56fe4e979961a.jpg

Обеспечиваем работу со счетами и контроль расходов

Это еще не все, что вы можете найти на нашей первой странице. Здесь есть еще больше полезных функций:

1. Поддержка множественных счетов и карт

2. Меню быстрого платежа для каждого счета

3. Сортировка транзакций по категориям

4. Открытие нового счета в один клик

5. Доступ к целям по сбережению

6. Расширенное управление расходами

7. Ежедневная и ежемесячная статистика расходов

b_56fe5233af081.jpgБольше функций на первой странице

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

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

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

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

b_56fe4e9d9ba59.jpgВсе счета и карты на одной страницb_56fe4e9e49128.jpg

Внедряем простую оплату счетов и консультационную поддержку

Готовы двигаться дальше? Как вы помните вторым популярнейшим сценарием для наших пользователей является оплата счетов и перечисление денег. Так давайте дадим им это. Наши платежи в три клика включают:

1. Мгновенный доступ к популярным платежам

2. Автоматическое определение популярных платежей

3. Заранее подготовленные шаблоны платежей

4. Индивидуальные рекомендации от банковского ассистента

5. Доступ к видео консультациям

6. Напоминания о регулярных платежах

7. Прозрачные комиссии за перечисление

b_56fe4e9f4ffb6.jpgСтраница типовых платежей

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

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

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

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

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

b_56fe4ea071752.jpgДоступ к вашим популярным платежам в три клика

b_56fe4ea19f1f7.jpgКатегории, типовые платежи, уведомления, и индивидуальный консультантb_56fe4ea243a75.jpg

Предоставляем мгновенные перечисления на карту и в социальные сети

Представьте если вы можете после вечеринки отдать долг другу за 30 секунд. Мы уверены, что только так и должно быть. Поэтому сюда мы включили:

1. Перечисления с карты на карту

2. Местные и международные переводы

3. Перечисления на электронную почту, Facebook, Twitter, и контактам в телефоне

4. Пополнения с карточки другого банка

5. Понятная комиссия за перечисление

b_56fe4ea2f3a67.jpgСтраница денежных перечислений

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

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

b_56fe4ea416638.jpg30 секунд до Марса? Нет, до платежа!b_56fe4ea4b6d1e.jpg

Вовлекаем в уникальную торговую площадку банковских сервисов

Вообще-то банки, это не только баланс, история и платежи. Средний банк может предложить до 100 разных сервисов. Но как сообщить о них клиентам и вовлечь в их использование? Похоже мы нашли решение:

1. Торговая онлайн площадка вместо списка

2. Поиск с автоподсказками

3. Разделение по категориям и целям

4. Карточки Сервисов основаны на ярких фото

5. Индивидуальные и самые популярные сервисы

6. Возможность поделиться в социальных сетях

7. Поддержка от сообщества пользователей

b_56fe4ea6344c1.jpgБанковский маркетплей

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

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

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

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

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

Может пора обогатить опыт пользователей и включить банк в их социальный контекст?

b_56fe4ea769ba8.jpgВсе банковские услуги на ладониb_56fe4eae42c45.jpg

Анимированный UX дизайн концепт мобильного банка

Если вы хотите увидеть данный дизайн приложения для мобильного банка в движении — посмотрите анимацию которую мы подготовили:

b_56fe4eaed272a.jpg

Внедряем омниканальный онлайн банк

И напоследок, чрезвычайно важно обеспечить кросс-платформенное решение для онлайн банка. Пользователи должны иметь доступ к своим финансам через любое удобное им и подходящее устройство. На сегодняшний день мы говорим о компьютерах, планшетах, разработке мобилных приложений и носимых устройствах типа Apple Watch. По статистике, в прошлом году 57% владельцев смартфонов из Америки использовали свое устройство для мобильного банкинга.

b_56fe4eaf1d568.jpgiPhone мобильный банк

b_56fe4eb0105d5.jpgApple Watch мобильный банк

Результаты

Данное дизайн решение было протестировано пользователями в сравнении с 3 типичными онлайн интерфейсами банков из ТОП10. Необходимое количество шагов для приоритетных сценариев снизилось в два раза в сравнении с традиционными онлайн банками. Кривая обучения по использованию основных функций и поиску ключевых сервисов сократилась в 7 раз (с 1 часа 45 минут до 15 минут). Общее индекс удовлетворенности взаимодействием с сервисом повысился на 320%. Вовлечение в использование дополнительных банковских сервисов увеличилось на 85%. Готовность рекомендовать повысилась на 460%. Готовность переключиться на другой банк снизилась на 26%.

Основные выводы

1. Необходимо слышать пользователей

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

Пересмотрите стандарты своей индустрии, чтобы найти окно возможности. Даже если речь идет просто об упрощении и улучшении дизайна интерфейса.3. Станьте ориентированными на пользователей

Переключите свою бизнес стратегию с продукт-ориентированной на клиент-ориентированную позицию. Предоставляйте сервис своим клиентам в соответствии с их реальными потребностями вместо навязывания морально и технически устаревших услуг привычных для вашего бизнеса.4. Обновите свою цифровую стратегию

Ну или разработайте если ее еще нет. Изучите каналы которые предпочитают ваши пользователи и сделайте сервис максимально удобным в них.5. Сделайте опыт использования своего сервиса потрясающим

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

Мы европейское агентство по проектированию дизайна финансовых сервисов на основе потребительского опыта (user experience design agency) uxdesignagency.com, и это наше видение того каким должен быть современный онлайн банк.

© Данный дизайн-концепт разработан в UXDesignAgency.com и является собственностью BofI Federal Bank. Все права зарезервированы.

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

Скажите в комментариях, что вы думаете об этом, я буду рад услышать!

b_56fe4eb3c1263.jpg

Alex Kreger

Основатель UX Design Agency, UX стратег и архитектор

Добавьте меня к своим контактам в LinkedIn

info@uxdesignagency.com

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Григорий Гриша
Отличный гайд и интересное виденье банкинга. Очень нравятся ваши проекты, ждем новые материалы.
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.