78% времени, которое клиенты проводят в отделениях банков, можно считать потраченным впустую. Зачем мне, клиенту банка, куда-то ехать и стоять в очереди, чтобы выполнить ту или иную операцию? И, конечно, я бы ни за что не стал этого делать, если бы можно было решить все вопросы онлайн.
Я ценю свое время, а онлайн операции можно делать в дороге или из дома — это очень удобно. В теории. На практике же мое банковское приложение такое сложное, что я даже историю платежей могу найти не сразу. Приходится ковыряться в 24 разделах на панели задач — а это утомительно и долго.
А вас устраивает ваше банковское приложение?
В вопросах качественных цифровых услуг банки продвигаются очень медленно. С одной стороны, банки располагают значительными ресурсами, которые вполне можно было бы вложить в финтех; с другой же стороны, консерватизм и бюрократия отрасли препятствуют быстрому внедрению новых технологий. Есть банки, которые не верят, что большинство клиентов уже давно пользуются мобильными приложениями. Что уж тут говорить о приложениях для планшетов и умных часов! Может быть поэтому многие банки до сих пор не выпустили свое мобильное приложение, а те, кто выпустил — не до конца проработали функционал и дизайн.
Конечно, есть на рынке банки-инноваторы, которые уже предлагают многоканальный цифровой банкинг, но и им часто недостает удобства и привлекательности. Мы проводили опрос, в котором просили людей описать их самый приятный опыт цифрового взаимодействия. Удивительно, но ни один человек не упомянул банковские продукты, хотя 18% людей пользуются ими каждый день. Среди ответов фигурировали только Mint и Moven. Почему же так?
У банков огромные бюджеты — они могли бы поручить конструирование своих сервисов лучшим экспертам в области UX и дизайн-мышления! И тем не менее, мы не видим ярких результатов в этой области. Возможно, мы не на те банки смотрим, а может быть не все банки готовы перейти с продукто-ориентированного мышления на клиенто-ориентированное. Вне зависимости от причины, проблема налицо. Мы в UX Design Agency решили поделиться своим видением идеального банковского приложения под сенсорные экраны. В этой статье мы расскажем, какой подход к работе использовали, и покажем результаты.
1. UX исследование пользователей нашего будущего банковского приложения
Давайте начнем наш редизайн пользовательского опыта с исследования некоторых реальных “болей”, с которыми сталкиваются клиенты банков. В этом нам поможет Twitter: в постах часто встречаются жалобы на мобильный банкинг.
Для чего же люди используют мобильный банкинг?
- 88% — Проверить баланс по счету
- 58% — Оплатить счета и перевести деньги
- 43% — Посмотреть историю операций
- 41% — Найти отделение и банкомат
- 15% — Посмотреть курсы валют и провести рассчеты
- 7% — Обменять валюту
- 7% — Связаться с банком
* По результатам исследования, проведенного TNS agency
Далее, давайте выясним, что думают о будущем финтех отрасли эксперты. Для этого мы залезли на Slideshare и проанализировали кучу презентаций о том, как должен работать цифровой банкинг. Мы обнаружили, эксперты выделяют 7 ключевых принципов банкинга, которые будут особенно актуальны в будущем:
- Персонализация
- Прозрачность
- Самообслуживание
- Ориентация на мобильные устройства
- Простота
- Эстетика
- Комплексность
Мы положим эти принципы в основу нашей стратегии и архитектуры. На базе этих важных факторов мы сформируем показатели эффективности (KPI), через которые будем оценивать качество нашего решения.
Теперь пора проанализировать конкурентов, чтобы составить полный список существующих банковских продуктов и возможных функций онлайн банкинга.
Основная проблема всех банков: они предлагают слишком много функций, в которых пользователям невероятно сложно ориентироваться.
Мы пересмотрели 2000 разных разделов в 20-ти банковских приложениях — и, поверьте, это тяжелая работа! Кроме того, мы проанализировали множество функций, но нам еще хотелось добавить эмоций. Чего-то, что понравится нашим пользователям, будет их вдохновлять и сделает процесс использования приложения полезным. Поэтому мы решили выяснить, чего хотят наши потенциальные клиенты от банковского приложения. Мы провели несколько интервью и опросов и выявили такие потребности и интересы.
Отлично. Мы почти готовы предложить пользователям приятный опыт взаимодействия. Мы сами миллениалы, поэтому мы создавали решение для миллениалов: старались охватить все ключевые архетипы и даже рисовали пользовательские сториборды. Мы хотели чувствовать то, что чувствуют наши клиенты — буквально встать на их место.
Знание психологии — это ваше преимущество.
Теперь пора выявить горячие задачи. Нам нужно понять, чего люди ждут от интерфейса банковского приложения и как они будут использовать его для решения своих проблем. Мы выявили ключевые сценарии, которые должны работать в приложении максимально быстро и просто.
2. Конструируем банковское приложение по шагам
Итак, все готово. Мы знаем наши бизнес-цели и KPI, у нас есть список функций, а также мы собрали боли и потребности наших клиентов. Пора соединить все точки на карте пути пользователя (user journey map) — это поможет нам спроектировать идеальный пользовательский опыт.
Так выглядит карта пути пользователя
Составление карты пути пользователя (user journey map) — это один из самых сложных этапов процесса.
Разработка стратегии почти закончена. Финальный шаг — отметить на карте взаимодействия, чтобы было понятно, как клиенты будут использовать продукт для закрытия своих потребностей.
Теперь представим все полученные инсайты в виде информационной архитектуры и проработаем вайрфреймы. Далее сделаем прототипы — с их помощью будет проще тестировать юзабилити и собирать обратную связь. После этого, внесем необходимые коррективы в прототипы и приступим к дизайну интерфейса.
Вайрфреймы — это схематические наброски скринов, которые представляют собой скелет нашего будущего интерфейса.
Далее идет непосредственно графический дизайн.
Как правило, дизайнеры используют одни и те же инструменты, но выдают совершенно разный результат.
3. Создаем главный экран банковского приложения под iPad
Наш главный экран должен быть красивым и, главное, полезным — даже если пользователь еще не вошел в аккаунт. Мы решили добавить следующие блоки:
- Форма входа
Для входа в аккаунт и доступа к счетам
- Контакты банка
Нужно дать пользователям возможность легко связаться с банком, если у них возникла проблема или вопрос
- Создание аккаунта
На случай, если посетитель решит стать клиентом банка
- Расположение филиалов и банкоматов на карте
Важно убедиться, что пользователь может быстро и без авторизации найти ближайшее отделение, банкомат и даже информацию о партнерах. Кроме расположения отделений и банкоматов, прямо на карте можно схематично указать часы работы и примерное время ожидания в очереди. Таким способом можно распределять трафик между отделениями, что здорово не только для клиентов, но и для сотрудников банка.
- Блок с предложениями банковских продуктов
Акции и новые продукты банка для новых и существующих клиентов
- Конвертер валют
Пригодится тем, кто едет за границу или ведет дела с иностранными партнерами.
- Новости
Возможно, неподалеку от вас открылся новый филиал?
4. Проектируем экран истории платежей и баланса по счету
Итак, пользователь авторизовался. На главном дэшборде разместим следующие функции:
- Балансовый отчет
- Доход за месяц
- Расходы за месяц
- Категории расходов
- История операций
- Меню быстрого доступа по каждой операции
За 10 секунд пользователь может получить представление о состоянии счета, а также о доходах и расходах за месяц. Еще 10 секунд — и он четко понимает, какие суммы можно спокойно потратить на те или иные категории расходов (обязательные расходы уже вычтены из этой суммы). Мы также показываем среднюю сумму возможных расходов в день.
Кстати, нам не нравятся графики типа “пирог”, которые используют другие банки. Нам кажется, что они не очень информативны. Какая мне разница, сколько процентов бюджета я раньше тратил на еду? Мне важно знать, сколько я могу потратить сейчас, с текущим состоянием счета. В нашем интерфейсе, если пользователь сэкономил сегодня, сумма на завтра увеличивается — и наоборот. Мы помогаем клиентам отслеживать и планировать траты в режиме реального времени.
А что насчет операций? В нашем интерфейсе не нужно искать их по разным разделам — они все собраны в одном месте. Пользователь может проверить список последних транзакций, найти нужную операцию при помощи поиска или отсортировать список по расходам или поступлениям.
Для каждой транзакции доступно меню быстрого доступа в виде слайдера. Через это меню можно, например, найти похожие транзакции или сделать платеж в один клик.
Вот как это выглядит в деталях:
5. Добавляем смарт-бюджетирование и возможность подключения нескольких аккаунтов
На главный экран банковского приложения можно добавить еще несколько полезных функций:
- Поддержка нескольких аккаунтов и нескольких карт
- Меню для быстрых платежей под каждый аккаунт
- Сортировка по категориям
- Возможность открытия нового аккаунта
- Доступ к целям по сбережениям
- Расширенные возможности управления бюджетом
С нашей системой у пользователя может быть сколько угодно карт и счетов. Чтобы переключиться, нужно только кликнуть на нужный счет/карту (включая корпоративные счета).
Хотите посмотреть общий балансовый отчет по всем счетам? Выбираете “Все счета” и видите сводный баланс, бюджет и историю операций. Больше не нужно стоять в очереди в офисе, потому что новые счета можно открывать, лежа на диване.
Форму оплаты можно быстро открыть все так же, потянув строку вправо. При создании платежа, система автоматически выбирает указанный счет. Информацию о платеже можно мгновенно отправить друзьям или, скажем, поставщикам. В меню редактирования можно переименовать аккаунт, установить уведомления или поменять лимиты на снятие в банкоматах.
Когда вы выбираете какую-то категорию бюджета, на графике в главном окне автоматически отражаются операции по этой категории. Среди расширенных возможностей по управлению бюджетом есть отчет о расходах по дням и по месяцам, бюджетные ограничения, цели по сбережениям и бюджетные сравнения (со среднестатистическими данными клиентов банка, похожих на вас)
6. Реализуем быструю оплату счетов и подключаем консультации
Готовы пойти еще дальше? Если вы помните, для наших клиентов оплата счетов и перевод денег — второй по популярности сценарий сценарий взаимодействия с приложением. Так что мы тщательно проработали эту часть. Наши платежи “в три клика” — это:
- Мгновенный доступ к популярным платежам
- Автоматическое определение популярных платежей
- Счета, заполненные по умолчанию
- Персональная консультация от ассистента банка
- Доступ к службе видео-поддержки
- Напоминания о регулярных платежах
- Комиссии по переводам
В этом разделе пользователь в первую очередь видит свои самые частые платежи. Чтобы оплатить все счета, достаточно просто войти в систему — и не надо ничего искать. Можно вручную добавить в Избранное любую операцию. Повторяющиеся платежи добавляются в список автоматически.
У каждого банка есть шаблоны для оплаты счетов и совершения операций. Популярные платежи обозначаются иконками и проводятся в три клика. Чтобы найти нужный аккаунт для оплаты, достаточно воспользоваться поиском с автозаполнением.
Конечно, тут же предоставлена полная информация о комиссиях по разным платежам и операциям.
Еще одна приятная фишка — система запоминает регулярные операции и напоминает, когда приходит время очередного платежа.
А если возникнут какие-то вопросы, пользователь может обратиться к ассистенту банка за консультацией. Персональный ассистент в чате или по видео расскажет, как совершать платежи, как составлять план по финансам и как устанавливать цели. Кроме того, ассистенты банка будут держать в курсе всех обновлений и выгодных предложений.
Категории, шаблоны, уведомления и персональный консультант.
7. Обеспечиваем возможность переводить деньги с карты на карту и через социальные сети
Представьте, что можно послать деньги другу за считанные секунды. Например, рассчитаться за счет в ресторане. В нашем приложении это возможно:
- Переводы с карты на карту
- Внутренние и международные переводы
- Переводы по электронному адресу, по аккаунту в Facebook и Twitter
- Пополнение с карты другого банка
- Прозрачная комиссия за перевод
Благодаря короткой и емкой форме, можно быстро проводить платежи с карты на карту. Плюс, приложение сразу показывает комиссию за перевод. На той же странице можно пополнить свою карту с карты другого банка.
Приложение позволяет импортировать контакты из Facebook, Twitter, Gmail и iCloud. Далее нужно просто выбрать нужного человека из списка контактов. Их платежная информация не нужна: когда вы отправляете контакту деньги, ему приходит простая инструкция, как получить перевод. Классно, правда?
8. Вовлекаем в использование онлайн услуг через финансовый маркетплейс
Через онлайн банкинг можно не только проверять баланс и совершать платежи. Средний банк предлагает порядка 100 других банковских услуг. Встает вопрос: как представить все эти услуги в приложении и мотивировать клиентов ими воспользоваться? Мы предлагаем такое решение:
- Онлайн-маркетплейс вместо банального списка услуг
- Поиск с функцией автозаполнения
- Предложения по категориям и по цели
- Иллюстрированные карточки продуктов
- Персонализированные предложения и популярные продукты
- Кнопки социальных сетей
- Поддержка сообщества
Мы переосмыслили продвижение банковских продуктов через карточки. “Карточный” интерфейс выглядит современно и привычно для миллениалов. На смену банковским филиалам и консультантам приходит самообслуживание. В результате пользователи начинают лучше разбираться в финансовых продуктах, сами исследуют предложения и быстрее достигают своих целей.
Первое, что видит пользователь — это специально подобранные под его профиль банковские продукты. Система может подбирать продукты автоматически или это можно сделать вручную при помощи консультанта. Мы уверены, что благодаря персонализированному подбору продуктов, клиенты охотнее интересуются возможностями, которые предоставляет банк.
В приложении также есть возможность подключить социальные сети. Пользователи могут обратиться к сообществу за помощью, поделиться опытом использования банковских услуг, изучить обсуждения и отзывы в социальных сетях.
Благодаря интеграции с социальными сетями, банкинг становится более прозрачным. Пользователи комментируют услуги и оставляют обратную связь. О выгодных предложениях можно тут же рассказать друзьям.
Анимированный дизайн мобильного приложения
Концепция приложения в действии — в этом видео:
Проектируем универсальное банковское приложение
Кроме того, очень важно, чтобы онлайн решение для банкинга было достаточно универсальным. Пользователи должны иметь возможность зайти в приложение с любого устройства, будь то ПК, ноутбук, планшет, смартфон или умные часы. В прошлом году, 57% пользователей смартфонов в США использовали своим девайсы для мобильного банкинга.
Банкинг через iPhone
Банкинг через Apple Watch
Результаты
Мы сравнили наше решение с тремя типичными интерфейсами для онлайн-банкинга. Нам удалось в два раза уменьшить количество шагов по выполнению ключевых задач через приложение. Кривая обучения стала более крутой: раньше для освоения всех функций приложения требовался 1 час 45 минут, а теперь — 15 минут.
Показатель удовлетворенности пользователей вырос на 320%. Заинтересованность сопутствующими банковскими услугами выросла на 85%. Готовность порекомендовать приложение друзьям увеличилась на 460%. Желание обратиться в другой банк снизилось на 26%.
Основные выводы
1. Нужно прислушиваться к клиентам
Внимательно слушайте своих клиентов: их жалобы, переживания и потребности. Отвечайте на вопросы, ищите самые быстрые и простые способы решить задачи пользователей. Возможно, это звучит страшно, но попробуйте на шаг отступить от своих личных ожиданий и амбиций. Вы удивитесь, что на самом деле думают пользователи о вашем решении.
2. Не бойтесь нарушить статус кво
Меняйте стандарты отрасли, чтобы найти новые возможности — даже если речь идет просто о более удобном сервис-дизайне.
3. Ориентируйтесь на клиента
Переключитесь с продукто-ориентированной стратегии на клиенто-ориентированную. Предлагайте услугу, которая закрывает потребности пользователей так как им надо, а не проталкивает устаревшие услуги через дорогие рекламные кампании.
4. Обновляйте свою digital-стратегию
Узнайте, какие digital-каналы ближе вашим пользователям и адаптируйте под них свое приложение. Пусть ваши услуги станут более доступными и привлекательными для пользователей.
5. Обеспечьте клиентам великолепный пользовательский опыт
Порадуйте пользователей простым и современным интерфейсом. Сейчас на рынке столько классных приложений, что клиенты давно привыкли к хорошему.
