Редизайн програми Bank of America: концепт

Привіт! У цій статті я розповім, як вирішив зробити редизайн додатки Bank of America, попутно вивчаючи відрізняється від російської банківську систему США і пояснюючи логіку змін і поліпшень.




Глобальна претензія до поточного додатком — воно виглядає несучасним, хочеться його освіжити і зробити «чистіше». Є проблеми з навігацією: наприклад, замість таб-бару використовується бічне меню, що ускладнює перехід між розділами. На головному екрані не вистачає цільових дій по продукту, а у випадку з внесенням коштів з чека — потрібно змінювати черговість екранів.



Екрани поточного додатки з App Store





На екрані авторизації залишаємо тільки найнеобхідніше, позбавляючись від зайвих деталей: чекбоксов для збереження Online ID Touch ID. Online ID автоматично зберігається при першому вході, позбавляючи користувача від необхідності повторного введення, а для Touch ID робимо окремий екран після авторизації.
За результатами тестування, що проводилося під час роботи над додатком для банку «Відкриття», такі функції, як Touch ID, краще показувати на окремому екрані, акцентуючи на цьому увагу. Чекбокси і спливаючі алерти користувачі часто не помічають.
В неавторизованому режимі можна зробити кілька дій:
  1. Внести кошти з чека. За статистикою Bank of America, цією функцією користуються 38% клієнтів.
  2. Відкрити новий банківський рахунок. Економія часу клієнта і співробітників банку.
  3. Поспілкуватися зі службою підтримки в чаті. Як показують дослідження, письмові звернення ефективніше, ніж дзвінки. Автоматично накопичується статистика звернень, немає проблеми із зайнятістю операторів і т. д. (про оптимізацію завантаження операторів: megamozg.ru/post/23036
  4. Подивитися демо-версію. Знайомство з функціоналом програми зручно для потенційного клієнта і вигідно для банку.







У поточному додатку всі розділи сховані в бічне меню. Це погане рішення, тому що до них важко дістатися, і по статистиці це знижує рівень залученості користувачів. Спираючись на гайдлайны 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» з картками-шаблонами дозволяє дуже швидко здійснювати регулярні платежі. Перекази між рахунками стали наочніше, а в процесі сканування чека з'явилася логіка.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.