Данный проект является тестовым и был выполнен бесплатно в декабре 2020 года. Приложение ForteBank не использовало этот дизайн.
Задача
Провести исследование поведения пользователей в банковских приложениях. На основе исследований переработать интерфейс Forte. Трансформировать главную страницу в единую точку входа ко всем сервисам экосистемы. Обновить дизайн для повышения удобства использования и скорости выполнения ключевых операций пользователями.
О проекте
ForteBank - это цифровая экосистема Forte, которая вклюяает в себя: мобильный интернет-банкинг, собственный маркетплейс ForteMarket, платформа для туризма ForteTravel, страхование, биржа Forex.
Результат
Переосмыслили подход к интерфейсу Forte, переработав навигацию и иерархию информации для повышения юзабилити. Внедрили корпоративную айдентику, усилив узнаваемость бренда. Оптимизировали ключевые взаимодействия пользователя, обеспечили более интуитивный и эффективный опыт использования приложения.
Исследование
Провели качественное исследование с 72 активными пользователями мобильного приложения банков. Выявили ключевые достоинства: широкий спектр функций (платежи, переводы, кредитование, услуги), удобные способы оплаты по номеру и QR-коду. Идентифицировали критические боль-поинты: задержки отклика, нестабильность сеанса, отсутствие NFC-платежей. Пользователи запросили: выгрузку выписок в PDF, скрытие баланса при операциях, контекстные подсказки для госуслуг, встроенный поиск и управление семейным бюджетом. Исследование показало необходимость повышения конкурентоспособности относительно аналогов на рынке.
95,8% пользуются приложением банка хотя бы раз в день
Провели анализ мобильного ландшафта Казахстана и выявили доминирование Android-платформы (79,4% трафика). На основе этого инсайта определили приоритет разработки под Android для максимального охвата пользовательской базы. Изучили актуальные Material Design Guidelines и Google Human Interface Guidelines для обеспечения соответствия лучшим практикам платформы.
Аудит приложения ForteBank
Провели углубленный аудит приложения ForteBank. Функциональное тестирование всех ключевых сценариев и визуальный анализ консистентности. Выявили критические проблемы: нарушение фирменного стиля, вариативность стилизации одноименных компонентов, чрезмерное использование микрошрифтов, затрудняющих восприятие. Дополнительно провели:
Пользовательское исследование с 72 респондентами (25-40 лет, Казахстан)
Детальный разбор актуального гайдлайна ForteBank
Проанализировали отзывы в Play Market
Изучили медиа-освещение бренда
В приложении используется 2 шрифта и более 20 стилей
Много мелкого текста, который тяжело читать
Используется более 8 видов кнопок и ссылок
На главном экране более 7 видов
Интерфейсы разделов Мой Forte отличаются по UX/UI.
Паттерны и декор-элемент используется разнотипно
Часть объектов не выровнены по модульной сетке.
На главном экране ряды блоков не совпадают по размерам и расстояниям
Используются не корпоративные цвета Forte
На главном экране более 8 цветов
На момент проведения исследования (декабрь 2020) приложение ForteBank имело критически низкий рейтинг в Play Market — 2,8 из 5 звезд. Анализ пользовательских отзывов выявил систематические жалобы на сложность выполнения базовых операций, наличие критических багов и общее неудобство взаимодействия с приложением. Часть пользователей выражала недовольство недавними изменениями интерфейса и запрашивала откат на предыдущую версию или возможность параллельного использования легаси-приложения. Эти данные подтвердили критическую необходимость переработки UX и визуальной системы приложения.
Аудит сторонних приложений
Провели конкурентный анализ, изучив интерфейсы приложений 4 банков-конкурентов.
ПЛЮСЫ
Выдержанный фирменный стиль.
На стартовом экране личное приветствие на фоне красивого пейзажа, который меняется в зависимости от времени суток.
У шрифтов достаточный контраст и размер. Удобно читать.
Карты и услуги можно переименовать с использованием эмоджи.
Комментарии к многим полям помогают лучше разобраться в приложении.
Выбор до 5 языков. Казахский, русский, английский, китайский, турецкий
Есть поиск
МИНУСЫ
Тему оформления приложения нельзя поменять
ПЛЮСЫ
Фирменный стиль выдержан. Использованы основные цвета банка
Иконки красивые и приятные. Нарисованы в фирменных цветах и четко иллюстрируют контент. В платежах используются родные иконки компаний.
Карты и услуги можно переименовать с использованием эмоджи.
Есть поиск
МИНУСЫ
Тему оформления приложения нельзя поменять
Язык только русский
Стартовый экран перегружен информацией.
Для авторизации приходится выполнять больше действий
ПЛЮСЫ
Фирменный стиль выдержан. Использованы основные цвета банка
Иконки ясные и контрастные. Нарисованы в фирменных цветах. В платежах используются родные иконки компаний.
Шрифт крупный и контрастный. Удобен для чтения для людей с плохим зрением.
Некоторые платежи можно переименовать
Платежи можно переименовать с использованием эмоджи
Есть поиск
МИНУСЫ
Меню расположено в самом труднодоступном месте. Не удобно нажимать и выбирать пункты подменю
Язык основной русский. Казахский только в меню "Мой банк"
Имя пользователя нельзя поменять
Тема приложения только белая. Нельзя поменять.
Карту переименовать нельзя
При отправке денег на переименованный перевод (новое имя с эмодзи) отображается системное название получателя (старое имя с именем получателя).
ПЛЮСЫ
Платежи в виде карточек (свайпы)
Экран платежа/перевода интуитивно понятен
Темы приложений две: темная и светлая.
Интерфейс простой и понятный, не перегруженный
Иконки ясные и контрастные. В платежах используются родные иконки компаний.
Шрифт крупный и контрастный. Удобен для чтения для людей с плохим зрением.
Есть поиск. Головой поиск.
Мануал приложения в виде коротких сторис
Комментарии к полям помогают лучше узнать о банковской операции (комиссии, сроки платежа и тп)
МИНУСЫ
Не выявлено. Тестировалась демо-версия.
UX-дизайн
Переработали архитектуру взаимодействия, применив принцип активной зоны как основу для организации интерфейса. Переместили все критичные элементы управления в зону комфортного досягаемости большого пальца, обеспечив эргономичность использования одной рукой. Визуально усилили основные действия (оплата, перевод, сохранение операции), сделав кнопку подтверждения крупной и центрированной в активной зоне. Внедрили дополнительные жесты (swipe-действия) и процесс-индикаторы для повышения прозрачности и управляемости операций.
Основная кнопка расположена внутри активной зоны
Добавили процесс бар, чтобы видеть процесс выполнения
Кнопку подтверждения операции сделали визуально крупной и разместили в центре активной зоны
Дизайн
Начали разработку с наиболее критичных пользовательских сценариев (переводы, оплата услуг). Применили принцип информационной иерархии, минимизируя визуальный шум и выделяя только элементы, требующие немедленного внимания пользователя. Расширили главный экран путем введения горизонтальной навигации (свайп влево/вправо), обеспечивая доступ к дополнительным информационным блокам и действиям без загромождения интерфейса. Разработали унифицированную систему карточек.
Информационная иерархия: выделять только один элемент
Главный экран с горизонтальной навигацией — свайп влево/вправо
Выделение элемента, требующего внимания пользователя
Функция отображения/скрытия денежнего баланса
Экраны успешно выполненной операции
Фирменный паттерн с айдентикой Forte
Дизайн-система
Изучили Material Design Guidelines от Google и определили лучшие практики для разработки Android-приложений. Подготовили систему готовых компонентов и собрали полный UI-кит приложения. Определили ограниченную цветовую палитру из трех основных цветов для обеспечения визуальной контрастности. Монохромную палитру (черный и серый) закрепили за типографикой (текст, заголовки, списки, названия).
Эмоциональный дизайн
Внедрили стратегию эмоционального дизайна для повышения привлекательности и лояльности пользователей. Предоставили возможность кастомизации сохраненных платежных шаблонов с помощью эмодзи. На экране аутентификации разместили мотивирующие сообщения и эмодзи, создавая позитивное первое впечатление. Интегрировали персонализированное приветствие и изображение города пользователя, формируя позитивный эмоциональный контекст для использования приложения.
Мотивирующая фраза и персонализированное приветствие
Кастомизированные платежные шаблоны
Тестирование
Разработали полнофункциональный интерактивный прототип в Figma, воспроизводящий все критичные пользовательские сценарии и взаимодействия. Подготовили специализированный опросник и провели модерируемое пользовательское тестирование для валидации дизайн-решений.
Результаты исследования показали высокую оценку пользователями упрощенной архитектуры UX, интуитивной системы шагов операций и четкого отображения баланса на платежных картах. Тестировщики отметили качественную организацию главного экрана. Подчеркнули баланс между информационной насыщенностью и интуитивностью навигации. Однако пользователи выразили амбицию видеть в приложении не только функции онлайн-банкинга, но и расширенную экосистему услуг, позиционируя Forte как супер-приложение "все в одном".
57,2% пользователям понравился новый дизайн
42,9% легко разобрались в новом UX-дизайне
80,3% сообщили что весь текст отлично читается
85,7% пользователей круглая кнопка не вызвала дискомфорта и они легко разобрались со свайпами влево/вправо
71,4% отметили приятным и жизнерадостным экран приветствия.