Редизайн приложения Bank of America: концепт
Привет! В этой статье я расскажу, как решил сделать редизайн приложения Bank of America, попутно изучая отличающуюся от российской банковскую систему США и объясняя логику изменений и улучшений.
Глобальная претензия к текущему приложению — оно выглядит несовременным, хочется его освежить и сделать «чище». Имеются проблемы с навигацией: например, вместо таб-бара используется боковое меню, что затрудняет переход между разделами. На главном экране не хватает целевых действий по продукту, а в случае с внесением средств с чека — нужно менять очерёдность экранов.
Экраны текущего приложения из App Store
На экране авторизации оставляем только самое необходимое, избавляясь от лишних деталей: чекбоксов для сохранения Online ID и Touch ID. Online ID автоматически сохраняется при первом входе, избавляя пользователя от необходимости повторного ввода, а для Touch ID делаем отдельный экран после авторизации.
По результатам тестирования, проводившегося во время работы над приложением для банка «Открытие», такие функции, как Touch ID, лучше показывать на отдельном экране, акцентируя на этом внимание. Чекбоксы и всплывающие алерты пользователи часто не замечают.
В неавторизованном режиме можно совершить несколько действий:
- Внести средства с чека. По статистике Bank of America, этой функцией пользуются 38% клиентов.
- Открыть новый банковский счет. Экономия времени клиента и сотрудников банка.
- Пообщаться со службой поддержки в чате. Как показывают исследования, письменные обращения эффективнее, чем звонки. Автоматически накапливается статистика обращений, нет проблемы с занятостью операторов и т.д. (про оптимизацию загрузки операторов: megamozg.ru/post/23036)
- Посмотреть демо-версию. Знакомство с функционалом приложения удобно для потенциального клиента и выгодно для банка.
В текущем приложении все разделы спрятаны в боковое меню. Это плохое решение, потому что до них сложно добраться, и по статистике это снижает уровень вовлеченности пользователей. Опираясь на гайдлайны iOS, согласно которым самым привычным и распространённым навигационным паттерном является таб-бар, я разместил в нём 5 основных разделов. Навигация по приложению стала понятнее и проще.
В нав-баре тоже изменения: вместо бокового меню — вход в юзер-профайл. Для пользователя это более удобный доступ к персональным данным. Справа — уведомления вместо «Sign out». Выйти из приложения и разлогиниться — не самое важное действие, поэтому его прячем в подробную информацию. Банку нужно показывать пользователю новые предложения и уведомлять его о важных изменениях. Кнопки Bill Pay, Transfers и Deposit Checks я убрал в отдельный раздел Transfers. При наличии таб-бара найти их не составит труда.
Первый раздел — Accounts. Здесь все счета, кредитные карты и цели.
Опыт проектирования банковских приложений в Redmadrobot показывает, что у большинства пользователей есть постоянные платежи и частые действия по каждому продукту. Этот опыт мы решили применить и здесь:
- у счёта — оплата конкретной суммы;
- у кредитной карты — ежемесячный платёж;
- у инвестиционного счёта — стандартный перевод;
- а у цели — пополнение на рекомендуемую сумму.
На экране продукта можно посмотреть всю информацию о счёте, выписку с последними операциями и совершить основные действия. В данном случае — пополнить карту на конкретную сумму и сделать перевод (по статистике банка, 49% пользователей совершают переводы между своими счетами). Все банковские счета и карты отображаются визуально, по свайпу можно посмотреть полный список счетов пользователя.
На этом экране собрано всё, что касается платежей, оплаты счетов и переводов. Например, перевести деньги по номеру телефона или по e-mail можно в Instant transfer. Ниже идёт блок с историей. Переходя на экран с переводом между картами, по свайпу мы можем выбрать нужную (добавить новую) и быстро совершить перевод с карты на карту.
Статистика банка Америки по частоте операций.
В Америке до сих пор очень распространены платежи с помощью бумажных чеков. Чаще всего так оплачивают какую-то работу или услугу. Check depositing — один из способов пополнить банковский счёт. Деньги снимаются со счета того человека, который выдал вам чек, и зачисляются на ваш счет.
Моё решение предполагает, что сразу после нажатия на «Deposit a check» открывается камера для сканирования, а уже на следующем этапе можно выбрать счёт зачисления и сумму. После каждого сканирования можно проверить качество снимка и, если оно неудовлетворительное, переснять.
На последнем экране отображается статус операции и небольшой чек, который можно либо распечатать, либо сохранить себе.
В таб-бар я добавил раздел «Favorites», как один из основных. В нём собраны карточки самых частых операций и переводов, а также шаблоны, которые пользователь может создавать сам. Здесь можно оплатить мобильный телефон в один тап, ранее настроенная сумма спишется автоматически с указанного счёта. Удобно совершать регулярно повторяющиеся операции: заплатить за квартиру или, например, сделать перевод своей маме в Нью-Йорк. По статистике 48% пользователей оплачивают счета через мобильный банк.
В итоге приложение удалось освежить, а также усовершенствовать его логику, продумав разные сценарии использования. Главный экран со всеми счетами стал функциональнее — появилось целевое действие по каждому продукту.
Все основные разделы приложения вынесены в таб-бар — навигация стала привычнее и проще. Новый раздел «Favorites» с карточками-шаблонами позволяет очень быстро осуществлять регулярные платежи. Переводы между счетами стали нагляднее, а в процессе сканирования чека появилась логика.
