Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Лидирующее агентство сервисного дизайна для банков и Финтех стартапов в Европе
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
31
Эбиа

Эбиа

www.ebia.ru

23
Enlite

Enlite

enlited.ru

22
YAGLA

YAGLA

yagla.ru

15
likearea

likearea

smm.li

15
SE Ranking

SE Ranking

seranking.ru

14
Cookiezz

Cookiezz

cookiezz.com.ua

13
Venyoo

Venyoo

venyoo.ru

12
Perezvoni.com

Perezvoni.com

perezvoni.com

12
Reader

Reader

Интернет-журнал о современных технологиях.

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк во ВКонтакте

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

308 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.jpg

30 секунд до Марса? Нет, до платежа!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.jpg

iPhone мобильный банк

b_56fe4eb0105d5.jpg

Apple 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
Первые Новые Популярные
Григорий Гриша
Отличный гайд и интересное виденье банкинга. Очень нравятся ваши проекты, ждем новые материалы.
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать