Сделать редизайн приложения. Упростить UI, облегчить UX мобильного интернет-банкинга для FotreBank.

Данный кейс является личным проектом арт-директора Алимхана Жапар. Проект выполнен бесплатно. Приложение ForteBank выбрано по личным предпочтениям.

Аналитика

• Изучены и протестированы мобильные интернет-банкинги (миб) ForteBank и еще 4 банков Казахстана и России: Сбербанк, Халык банк, Каспи банк, Тинькофф банк.
• Проведен опрос 72 пользователей (25-40 лет, Казахстан, США) на пользование миб.
• Вычитаны и изучены негативные комментарии в Play Market
• Прочитаны статьи в интернете на тему миб ForteBank.
• Детально изучен гайдлайн ForteBank

Дизайн

• Упростили дизайн, добавили фишки.
• Применили эмоциональный дизайн.
• Сделали текст читабельным.
• Облегчили UX.
• Придерживались гайдлайнов ForteBank.

Тестирование

• Провели UI-тестирование приложения и опрос с 21 пользователями (25-40 лет, Казахстан, США).
• Получили и обработали отзывы
• Применили рекомендации для улучшения интерфейса

Опросили 72 пользователей мобильного интернет-банкинга (миб). 95,8% пользуются миб хотя бы раз в день. 62% пользователей в основном переводят деньги, 25% оплачивают услуги. 70,8% пользуются миб Каспи банка. 41,7% пользователям нравится дизайн миб, 16,7% предложили доработать его. 48,8% нравится UX, 29,2% уже привыкли. Пользователи отметили что нравится многофукциональность миб. Можно оплатить, перевести, оформить кредит, заказать услугу онлайн. Оплата по номеру телефона и QR-коду очень удобная функция. Некоторым не понравился медленный отклик, подвисание и разлогирование миб. Жаловались на отсутствие NFC-оплаты. Пользователи хотели бы иметь функцию выгрузки выписки в PDF-файл и возможность скрывать свой баланс при оплате. Получать больше подсказок при оплате государственных услуг. Иметь поиск и функцию управления семейным бюджетом. Пользователи отметили, что хотят видеть удобные миб других банков, как альтернатива Каспи банку.

Обзор приложения Forte

Скачали и установили приложение. Изучили функции и протестировали.

Вывод. Фирменный стиль не выдержан. Похожие активные элементы отличаются по стилю. Много мелкого текста, который тяжело читать.

Исследования

Изучены и протестированы приложения 4 банков Казахстана и России: Сбербанк, Халык банк, Каспи банк, Тинькофф банк.

Платформа

79,4% трафика, создаваемого мобильными устройствами в Казахстане принадлежит Android-смартфонам. Решили делать редизайн приложения для них. Изучили гайдлайны мобильных приложений Google.

Цвета

Использовали 3 основных цвета. Фирменный красный цвет для выделения главных активных элементов интерфейса — поля для ввода информации, кнопки, иконки. Дополнительным синим цветом выделили вспомогательные элементы — стрелки, карточки сторис, пункты меню, статус бар.
Черным цветом выделили основной текст, заголовки, списки, названия. Серым — поясняющий тест, названия меню.

UI-кит

Изучили гайдлайны мобильных приложений Google. Задизайнили готовые шаблоны и сохранили в UI-кит приложения.

Интерфейсы

87% операций (опрос 74 пользователей) в миб это переводы или оплата услуг. В первую очередь разработали интерфейсы этих экранов.

Шрифт/текст

Чтобы было удобно читать текст разместили его на светлом фоне. Использовали 1 шрифт и 5 стилей текста.

Кнопки/активные элементы

Главную кнопку операций оплата/перевод/сохранить сделали круглой. Добавили ей статусбар, чтобы пользователь видел процесс выполнения операции.

Поля ввода

Активные поля выделили красным цветом, чтобы акцентировать внимание пользователя на нужном поле.

UX

Визуально показали пошаговые действия, указывая пользователю последовательность. Статусбар на круглой кнопке и красные линии указывают на какой стадии процесс операции.

На главном экране добавили больше свайпов влево/вправо, чтобы разместить больше информации и полезных действий. Разработали один шаблон для всех карточек.

Основная кнопка расположена в комфортной зоне взаимодействия. Дополнительные свайпы влево/вправо возле нее позволяют выполнить три действия вместо одного. Удобно для правшей и для левшей.

Эмоции

Добавили эмоциональный дизайн используя эмодзи. Пользователь может переименовать услугу или создать личный шаблон используя их.

Стартовый экран

Первое что видит пользователь это экран ввода пин-кода. Разместили там бодрящую фразу с эмодзи. При вводе пароля отображаются эмодзи. При входе видно личное приветствие с изображением локации пользователя. Каждый раз показывается город где используется приложение. Таким образом создаем положительные эмоции при входе в мобильный банкинг.

Фишки

Добавили свайп для скрытия баланса на карте. Пользователь может это сделать на любом шаге операции.

При успешном завершении операции появлется текст "Успешно!" с галочкой.

Паттерн

Блок интерфейса "Мой Forte" выделили фирменным паттерном, особой формой кнопок и красным текстом.

Темная тема

Сделали дизайн "темной" темы для удобства пользования в темное время суток.

Подготовили прототип приложения в Figma и опросник. Провели UI-тестирование c 21 пользователем.

Отзывы

57,2% пользователям понравился новый UI. 42,9% легко разобрались в новом UX. 80,3% сообщили что весь текст читается. У 85,7% пользователей круглая кнопка не вызвала дискомфорта и они легко разобрались со свайпами влево/вправо. 71,4% отметили приятным и жизнерадостным экран приветствия. Пользователям понравились простота UX, обозначение шагов в операциях и ясно видимый баланс на картах. Также оценили хорошую верстку элементов главного экрана. Много информации, но легко найти нужную функцию. Хотели бы видеть не просто онлайн-банкинг, а что-то наподобие супер-приложения все в одном.

Сделаем дизайн интерфейса под любые задачи. Проконтролируем все стадии процесса. Найдем проверенных разработчиков или порекомендуем надежных партнеров.

Наемный работник
Можно нанять арт-директора на проект или срок. Договорится о задачах, установить сроки. Работать удаленно или в офисе.