В статье автор разбирает на практике, как улучшить приложение нигерийского банка GTBank.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/653a42911d377f67d4e5ec04_614c71ac707ed144.webp)
- Методология: Исследование пользователей, разработка вайрфреймов, UX/UI дизайна, прототипирование
- Инструменты: Figma, Illustrator, After Effects, Miro
- Процесс: Обзор существующего продукта и анализ отзывов пользователей в Google Play и Apple App Store, затем создание эскизов и идей вайрфреймов, и, наконец, разработка дизайна и прототипа.
- Результаты: Улучшенный опыт взаимодействия, запрос банковских карт с геймификацией
Обзор
Guarantee Trust Holding Co PLC, также известный как GTBank или просто GTCO, головной офис которого расположен на острове Виктория в Лагосе, является нигерийским многонациональным финансовым институтом, предлагающим банковские услуги онлайн, розничный, корпоративный и инвестиционный банкинги, и управление активами.
В 2019 году они получили награду как банк с лучшей КСО (корпоративной социальной ответственностью) и мобильным приложением, что является удивительным достижением, если принять во внимание, что рыночная стратегия делает его банком с наибольшим количеством клиентов из числа миллениалов и представителей поколения Z. И одной из платформ, которые они используют для обслуживания этого технологичного поколения, является мобильное банковское приложение.
Демография
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/653a42a86ce0432d9fabdced_614c71acaa0b6d4.webp)
Рыночная стратегия GTCO для проникновения в банковскую индустрию Нигерии также была направлена на представителей поколения Z и миллениалов, поскольку они представляют собой крупнейших пользователей мобильного банкинга. В среде старшеклассников и коллег они использовали агрессивный маркетинг для привлечения студентов. С помощью приложения все эти пользователи совершают транзакции или используют такие функции, как оформление платежей и пополнение счета мобильного телефона. Ожидается, что клиенты будут продолжать пользоваться приложением, если оно их устроит.
Выявление проблемы
Давайте признаемся, что все мы ненавидим посещать банк и предпочитаем решать вопросы самостоятельно, не выходя из дома. Но, из моего личного опыта использования приложения, я считаю следующие моменты неудобными:
- При каждом входе в систему мне нужно повторно вводить свой пароль.
- Плохой UI / UX дизайн
- Приложению не хватает адекватного самообслуживания
Несколько простых исправлений мобильного приложения, смогут обеспечить хорошее взаимодействие с пользователем.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/653a42b5215226a976c86ba2_614c71ac38a.webp)
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/653a42bbbbd9309fc9bb6ca7_614c71ac80193e0.webp)
Ситуация 1. При каждом входе в систему мне нужно повторно вводить пароль.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/653a42da140dc2a88f7774ed_614c71adbf99eb1.webp)
На этом экране видно, что существующее приложение предлагает вам только поле ввода пароля для доступа к своей учетной записи, и вы автоматически из нее выходите после пяти минут бездействия. В таком случае вам придется входить в систему более одного раза за сеанс. Не лучший вариант — каждый раз использовать свой пароль, особенно когда уже применяются другие более усовершенствованные методы.
Ситуация 2. Плохой UI / UX дизайн.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/653a42ee32389852cbb67663_614c71ac3302a4.webp)
Некоторым пользователям трудно ориентироваться в пользовательском интерфейсе приложения, в результате чего часть основных функций, которые должны быть безупречными, не работают. В правом верхнем углу экрана есть значок сообщений, который расположен неудачно, и это затрудняет нажатие. Кроме того, используемый значок указывает на сообщения, а не на уведомления. Я предполагаю, что это ошибка команды разработчиков.
Большинство банков уведомляют своих клиентов о том, что они собираются провести плановое техническое обслуживание. Но если в банковском приложении их клиенты не видят, есть ли непрочитанные сообщения, то как они могут узнать об этом?
Ситуация 3. Приложению не хватает адекватного самообслуживания.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/653a4300bb28af1d859824c8_614c71acc811e5f.webp)
Большинство банковских приложений (в качестве примера можно привести банки Нигерии) позволяют пользователям сохранять и отправлять квитанции один раз, сразу после завершения транзакции. Пользователи не могут пересмотреть и сохранить ранее совершенные транзакции, если они забыли сохранить квитанцию сразу.
До сих пор ни запросы на карты, ни выдача карт не производятся за пределами банковских залов, а BVN (от англ. — Bank Verification Number — Банковский проверочный номер. Биометрическая технология с защищенным уникальным идентификатором для анализа характеристик человека в качестве расширенной формы аутентификации для процессов безопасности в режиме реального времени) не связаны со счетами. Оптимизированное мобильное приложение может легко решить подобные вопросы.
Мой процесс проектирования
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/653a43105fdf6b7174dadaa1_614c71ad0d72b5.webp)
В результате тщательно проведенного исследования, основанного на ситуации, которую я выявил как пользователь, и на отзывах, которые я отметил в Google Play и Apple App Store, задачи были решены.
Чтобы изменить дизайн приложения, я начал с наброска идей, затем создал вайрфрейм и визуальный дизайн, а затем — прототип измененного приложения.
Вайрфрейм
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/653a431dd8987268e61dfac5_614c71ad978412e.webp)
Процесс визуального дизайна начался с создания вайрфреймов. Затем каждый вайрфрейм прорисовывался более детально.
Решение Ситуации 1. При каждом входе в систему мне нужно повторно вводить пароль.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/653a432bb4c3cace3e817f0f_614c71ad4a8df14.webp)
Внедрение биометрических логинов улучшает пользовательский опыт при входе в систему, и даже если пользователи выходят из системы в конце каждой сессии в результате бездействия, они могут легко вернуться к ней в течение нескольких секунд, что экономит время и снимает стресс.
Решение Ситуации 2. Плохой UI / UX дизайн.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/653a433c079dbdf6f27b3bae_614c71add01f2b.webp)
Сразу после открытия приложения вы заметите, как странно расположен логотип на заставке, а также как близко к краю экрана находится панель уведомлений, на которую практически невозможно нажать.
Кроме того, на приборной панели не было быстрых ссылок, а они делают работу пользователя более удобной. На самом деле, бессмысленно нажимать на кучу дополнительных кнопок, чтобы найти такие часто используемые функции, как перевод денежных средств, оплата платежей, пополнение счета и самообслуживание.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/653a435477c28e945e611b47_614c71ade4f7.webp)
В результате редизайна были решены существующие проблемы. Начиная от более удобного размещения и компоновки и заканчивая введением быстрых ссылок и возможностью повторно просматривать предыдущие транзакции и генерировать квитанции для них. Улучшен общий пользовательский интерфейс.
Решение Ситуации 3. Приложению не хватает адекватного самообслуживания.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/653a43650fb25bc671f50705_614c71add46f74f9.webp)
В ходе исследований и анализа отзывов клиентов в Интернете было выявлено, что пользователи не могут привязать свои BVN к счетам через систему самообслуживания, также они просили предоставить им возможность запрашивать дебетовые карты через банковские приложения. Проблема была решена раз и навсегда.
Проверив требования для подключения BVN онлайн, я обнаружил, что это можно легко реализовать в банковском приложении. Это является наиболее безопасным методом, вместо того, чтобы предлагать пользователям посещать другие платформы вне банковского приложения.
Обзор экранов
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/653a4373140dc2a88f783e44_614c71ad46665e3a.webp)