Arival Bank (Mobile)
Дашборд
Я возглавил редизайн третьей версии мобильного банковского приложения: переработал информационную архитектуру, навигацию и иерархию действий так, чтобы самое нужное было под рукой.
Банк всегда был в первую очередь про веб, и мобильное приложение отставало. Задача была подтянуть его до того же уровня: упростить взаимодействия, логично сгруппировать информацию и заложить основу для развития на iOS и Android.
До редизайна активные мобильные пользователи составляли всего 20–30%. После запуска доля выросла примерно до 50%, люди начали пользоваться приложением для повседневных операций. Новые разделы вышли поверх обновленной структуры, и приложение наконец стало ощущаться тем же продуктом, что и веб-версия.
Я был единственным дизайнером мобильного приложения и параллельно работал над веб-версией. Каждое решение приходилось балансировать между пользовательским опытом, бизнес-целями и ограничениями платформ, а оба продукта держать консистентными.
Процесс
- 1 Исследование и аудит
Собрал обратную связь от пользователей, поддержки и стейкхолдеров, разобрал аналитику, поведение внутри приложения и краш-репорты. UX-аудит навигации, потоков, иерархии и доступности показал главные боли: путаный онбординг и несогласованные паттерны взаимодействия.
- 2 Направление
Обозначил задачи: лучше юзабилити и производительность, мягче онбординг, место под новые сценарии и консистентность с брендом, все в рамках гайдлайнов iOS и Android. Превратил это в гипотезы и проверил их быстрыми прототипами, держа в голове платформенные ограничения.
- 3 Дизайн и прототипирование
Пересобрал модель навигации и структуру информации, затем сделал прототипы ключевых экранов и виджетов. Протестировал на реальных устройствах и с бета-пользователями, дошлифовал зоны нажатия, анимацию и микровзаимодействия и держал дизайн-систему синхронной на обеих платформах.
- 4 Передача
Подготовил Figma-компоненты под мобильную платформу, задокументировал поведение и ассеты и работал с разработчиками через дизайн-ревью и проверки реализации, чтобы держать качество по всей сборке.
Дизайн-решения
- 1 Навигация и архитектура
Я собрал основные разделы в таб-бар: Home, Payments, Recipients, Documents и More, а все второстепенное убрал под More. Название компании в левом верхнем углу открывает профиль, где можно посмотреть тариф или переключиться между компаниями без повторного входа.
- 2 Структура главного экрана
Главный экран работает как хаб. У Accounts, Cards, Company limits и History есть свой виджет с сразу видимым ключевым числом, и каждый виджет работает еще и как шорткат: по тапу открывается полный раздел. Балансы разделены на Fiat и Stablecoins, а основные действия стоят прямо под списком счетов. Экраны ниже: именно к ним пользователь попадает с главной в один тап.
- 3 Визуальная иерархия и взаимодействие
Упростил типографику, выровнял отступы и держал понятный визуальный ритм. Следовал паттернам взаимодействия iOS, оставляя структуру адаптируемой под Android.
- 4 Сканер QR-кода
Быстрый вход в веб-приложение по сканированию QR-кода, без дополнительного шага двухфакторки.
- 5 Глобальный поиск
Добавил единый поиск по всем разделам для более быстрой навигации.
- 6 Уведомления и журнал действий
Сделал детальный журнал, в котором владельцы аккаунта могут отслеживать действия участников команды: создание транзакций или редактирование получателей.
Модуль документов
Я спроектировал и собрал раздел Documents с нуля. Он сводит загруженные пользователем файлы и сгенерированные банком документы в одно место. Найти, загрузить и обработать документ можно прямо в приложении, с учетом требований законодательства и хранения.
Раньше документы были разбросаны по разным разделам: отчеты, платежные реквизиты и загруженные файлы хранились отдельно, из-за чего навигация путала и тормозила работу. Задача была создать единый, хорошо структурированный хаб, где пользователи получают доступ ко всем файлам, закрепляют важные, добавляют заметки, архивируют или удаляют устаревшее и эффективнее работают вместе.
После запуска все документы оказались в одном месте. Поиск и навигация ускорились, команды стали вести заметки прямо на файлах, которые обсуждают, и за несколько месяцев больше 20% активных пользователей начали регулярно пользоваться разделом.
Главный вызов был спроектировать структуру, понятную с первого взгляда, и при этом уложиться в юридические ограничения и политики хранения файлов. Плюс нужно было сбалансировать два разных потока (загруженные пользователем документы и сгенерированные банком), чтобы оба работали в единой логике. Каждый тип генерируемого документа требовал своего оптимального потока, а это требовало продуманной архитектуры и деталей взаимодействия.
Процесс
- 1 Исследование и анализ
Изучил, как люди ищут, загружают, просматривают и делятся документами с телефона. Опирался на фидбэк, обращения в поддержку, поведенческие данные и технические ограничения по хранению файлов.
- 2 Направление
Задал задачи: единый хаб, проще навигация, полный комплаенс и безопасность, с учетом особенностей iOS и Android. Определил категории документов (личные, банковские, юридические) и логику навигации, потом проверил раннюю идею быстрыми прототипами и юзабилити-сессиями.
- 3 Дизайн и прототипирование
Собрал макеты и интерактивные прототипы вокруг мобильного использования: табы, поиск, закрепленные файлы, загрузка, плюс сценарии генерации, архивирования и шаринга. Протестировал на устройствах на скорость и ясность, дошлифовал детали и адаптировал паттерны под iOS HIG и Material Design ради единого ощущения на обеих платформах.
- 4 Передача
Передал детальные Figma-спеки, библиотеки компонентов и экспортируемые ассеты, потом поддерживал разработку через реализацию и последующие итерации, по мере выхода новых типов документов.
Дизайн-решения
- 1 Единая точка входа
Отдельный таб Documents в основной навигации: все файлы доступны из одного места.
- 2 Понятная категоризация
Я сгруппировал файлы в пять категорий: Statements, Bank letters, Account details, Legal и Uploaded. Предсказуемо и легко сканировать.
- 3 Карточная раскладка
- 4 Поток генерации документов
Ввел отдельный поток генерации банковских документов. Пользователь мог задать параметры (период выписки, тип письма), а система автоматически создавала и сохраняла файл в нужном разделе. Это сократило обращения в поддержку и дало полный контроль над генерацией и повторным использованием документов.
- 5 Загрузка нового документа
Пользователи теперь могут загружать свои документы прямо в приложении.
- 6 Заметки
Заметки находятся внутри карточки документа и видны всей команде, поэтому обсуждение остается привязанным к самому файлу.
- 7 Карточка деталей
У каждого типа документа свой экран с действиями и деталями, которые действительно к нему применимы.
- 8 Консистентность между платформами
Все следует гайдлайнам iOS и Android, поэтому раздел ощущается нативным на обеих платформах.