Андрей Щеголев
Андрей Щеголев Кипр, Ларнака

Arival Bank (Mobile)

Редизайн главного экрана в мобильном приложении
Экран деталей карты

Дашборд

Я возглавил редизайн третьей версии мобильного банковского приложения: переработал информационную архитектуру, навигацию и иерархию действий так, чтобы самое нужное было под рукой.

Цель

Банк всегда был в первую очередь про веб, и мобильное приложение отставало. Задача была подтянуть его до того же уровня: упростить взаимодействия, логично сгруппировать информацию и заложить основу для развития на iOS и Android.

Результат

До редизайна активные мобильные пользователи составляли всего 20–30%. После запуска доля выросла примерно до 50%, люди начали пользоваться приложением для повседневных операций. Новые разделы вышли поверх обновленной структуры, и приложение наконец стало ощущаться тем же продуктом, что и веб-версия.

Личный вызов

Я был единственным дизайнером мобильного приложения и параллельно работал над веб-версией. Каждое решение приходилось балансировать между пользовательским опытом, бизнес-целями и ограничениями платформ, а оба продукта держать консистентными.

Процесс

  1. 1 Исследование и аудит

    Собрал обратную связь от пользователей, поддержки и стейкхолдеров, разобрал аналитику, поведение внутри приложения и краш-репорты. UX-аудит навигации, потоков, иерархии и доступности показал главные боли: путаный онбординг и несогласованные паттерны взаимодействия.

  2. 2 Направление

    Обозначил задачи: лучше юзабилити и производительность, мягче онбординг, место под новые сценарии и консистентность с брендом, все в рамках гайдлайнов iOS и Android. Превратил это в гипотезы и проверил их быстрыми прототипами, держа в голове платформенные ограничения.

  3. 3 Дизайн и прототипирование

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

  4. 4 Передача

    Подготовил Figma-компоненты под мобильную платформу, задокументировал поведение и ассеты и работал с разработчиками через дизайн-ревью и проверки реализации, чтобы держать качество по всей сборке.

Дизайн-решения

  1. 1 Навигация и архитектура

    Я собрал основные разделы в таб-бар: Home, Payments, Recipients, Documents и More, а все второстепенное убрал под More. Название компании в левом верхнем углу открывает профиль, где можно посмотреть тариф или переключиться между компаниями без повторного входа.

  2. 2 Структура главного экрана

    Главный экран работает как хаб. У Accounts, Cards, Company limits и History есть свой виджет с сразу видимым ключевым числом, и каждый виджет работает еще и как шорткат: по тапу открывается полный раздел. Балансы разделены на Fiat и Stablecoins, а основные действия стоят прямо под списком счетов. Экраны ниже: именно к ним пользователь попадает с главной в один тап.

    Экран счетов с фиатными балансами
    Экран счетов со стейблкоин-балансами
    Экран деталей счета
    Экран карт
    Экран истории транзакций
    Экран лимитов компании
  3. 3 Визуальная иерархия и взаимодействие

    Упростил типографику, выровнял отступы и держал понятный визуальный ритм. Следовал паттернам взаимодействия iOS, оставляя структуру адаптируемой под Android.

  4. 4 Сканер QR-кода

    Быстрый вход в веб-приложение по сканированию QR-кода, без дополнительного шага двухфакторки.

    Успешное сканирование QR
    Подтверждение входа
    Успешный вход
  5. 5 Глобальный поиск

    Добавил единый поиск по всем разделам для более быстрой навигации.

    Глобальный поиск
    Результаты поиска
  6. 6 Уведомления и журнал действий

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

    Уведомления
    Журнал действий