Arival Bank (Web)
Флоу отправки денег
Я переработал процесс оплаты с нуля, чтобы он был быстрее и понятнее. Короче путь, перестроенная информационная архитектура и понятный экран ревью. У повторяющихся платежей появились гибкие настройки, а новый таймлайн показывает детали и статус транзакции на каждом этапе.
Цель Со временем флоу разового платежа перегрузился. Пользователи сталкивались с повторяющимися шагами, перегруженным экраном ревью и слабым контролем над повторяющимися транзакциями. С прозрачностью тоже была проблема: сложно понять, на каком этапе платеж и что дальше. Задача была сократить путь, сделать статусы очевидными и дать повторяющимся платежам нормальные настройки.
Результат Новый флоу стал короче, чище и предсказуемее. Пользователи завершали платежи быстрее и с меньшим числом ошибок, а путаница на этапе ревью почти исчезла. Это сразу отразилось на поддержке: вопросов про переводы стало заметно меньше.
Личный вызов Вызов был в том, чтобы превратить разрозненный набор B2B-требований (роли, правила доступа, согласования, лимиты) в один простой логичный флоу, который работает и для обычных пользователей, и для сложных бизнес-кейсов. Ключевым был баланс ясности и гибкости.
Процесс
- 1 Аудит
Собрал фидбэк от пользователей, поддержки и стейкхолдеров и сверил его с аналитикой. Картина складывалась однозначная: повторяющиеся шаги, перегруженный экран ревью и почти никакого контроля над повторяющимися платежами.
- 2 Пересборка
Перегруппировал поля, чтобы сократить путь до решения. Пересобрал этап ревью, чтобы перед отправкой все было понятно. Спроектировал настройки повторяющихся платежей в рамках бизнес-правил по ролям, лимитам и согласованиям.
- 3 Прототипы и крайние случаи
Собрал сквозные прототипы для разовых и повторяющихся платежей и прогнал их с командой и реальными пользователями. В каждом раунде что-нибудь находилось: непонятный лейбл, пропущенный крайний случай, лишний шаг.
- 4 Передача
Передал Figma-спеки со всеми состояниями и крайними случаями и остался на дизайн-ревью и QA, чтобы финальная сборка совпала с задумкой.
Дизайн-решения
- 1 Единые экраны ревью и успеха
Я собрал один общий паттерн экранов ревью и успеха для всех денежных флоу, включая Receive Money, Invoices и Internal Transfers. Один паттерн вместо четырех и предсказуемый опыт по всему продукту.
- 2 Повторяющиеся платежи
Пересобрал повторяющиеся платежи с гибкими настройками. Пользователи теперь независимо задают частоту, общее число транзакций и суммы, а более понятная визуальная обратная связь снижает шанс настроить что-то неправильно.
- 3 Обзор платежей
Новый экран обзора показывает все повторяющиеся платежи: частоту, даты и итоговые суммы. Он дает полную видимость и упрощает управление текущими транзакциями.
- 4 Навигация сайдбаром
Сайдбар показывает каждый шаг процесса, поэтому пользователи всегда понимают, где они в многошаговом флоу. Меньше возвратов, меньше сомнений.
- 5 Таймлайн транзакции
Детали транзакции теперь показаны таймлайном с историей и текущим статусом каждого платежа. Больше 40 статусов свел в понятную, читаемую структуру.
- 6 UX-детали и микровзаимодействия
Подтянул анимации, переходы и мелкие детали взаимодействия по всему флоу: выбор получателя, ввод суммы, состояния полей.
Модуль Teammates
Собрал раздел Teammates с нуля: роли, права, приглашения, согласования. Сложность была в том, чтобы сделать управление доступом достаточно мощным для B2B-команд и при этом простым в ежедневной работе. Владелец выдает ровно те права, которые нужны.
Цель В продукте не было управления доступом команды. Владелец не мог пригласить коллег, назначить роли или контролировать, кто что согласует. Все это нужно было спроектировать как единую систему, которая при этом ощущается частью продукта.
Результат Теперь владелец может приглашать участников, назначать роли, задавать лимиты и правила согласования под каждую операцию. Никто не получает доступ, пока его не выдали явно. Модель простая, чтобы читаться с одного взгляда, но гибкая под сложную структуру компании.
Личный вызов Спроектировать ролевую модель, гибкую под сложные B2B-схемы, но не пугающую того, кто просто хочет добавить коллегу. Этот баланс дался не с первого захода.
Процесс
- 1 Скоуп
Разложил сценарии с бизнесом и операционкой: приглашения, роли, доступ, согласования, журнал действий. Посмотрел, как это устроено в других B2B-продуктах и где их схемы становятся неудобными.
- 2 Ролевая модель и флоу
Два уровня, Owner и Employee, с явными правами и ничем по умолчанию. Поток приглашений построил вокруг временных ссылок. Путь администратора сделал последовательным: всегда понятно, что настраивать дальше.
- 3 Прототипы и крайние случаи
Прогнал основные сценарии с командой и реальными пользователями, потом отдельно проработал случаи, где ошибка стоит доверия: конфликты прав, смена ролей у активных пользователей, истекшие приглашения.
- 4 Дизайн-система и передача
Добавил новые паттерны в дизайн-систему со всеми состояниями (роли, таблицы доступа, статусы приглашений), затем передал спеки и полную матрицу ролей. Остался на ревью и QA.
Ключевые экраны и сценарии
- 1 Список пользователей и статусы
Список показывает каждого участника с понятным статусом: Active, Invited, Inactive. Строка открывает карточку участника с его данными и доступными действиями.
- 2 Вкладка Roles
Показывает название роли, количество людей с ней и описание. Владелец может создавать, редактировать и удалять роли и добавлять участников прямо отсюда.
- 3 Activity log
Центральный журнал с фильтрами по пользователю, событию и датам. Фиксирует отправленные транзакции, изменения получателей и другие ключевые действия.
- 4 Флоу добавления участника
Пошагово: ввести данные, выбрать или создать роль, задать личные лимиты, проверить, подтвердить. Частый случай проходится за минимум шагов.
- 5 Флоу создания роли
Сначала права (доступ к счетам, согласование платежей), потом название и описание роли, потом ревью перед сохранением.
Редизайн дашборда
Я полностью переработал дашборд: как пользователи ориентируются, находят ключевые данные и делают повседневные действия. По ходу мы ввели модульные виджеты, стандартизировали их структуру и добавили переменные в дизайн-систему.
Цель Редизайн пришелся на период быстрого роста компании и смены позиционирования. Нужен был современный и простой в работе продукт: удобный в ежедневных задачах, со свежей дизайн-системой и запасом для роста бизнеса.
Результат Ключевые сценарии стали быстрее и интуитивнее. Новая дизайн-система упростила выпуск фич и развитие навигации и компонентов, снизила стоимость поддержки.
Личный вызов Одним из самых сложных моментов было перестраивать продукт и одновременно создавать масштабируемую дизайн-систему с нуля. Это значило пересобрать сложную библиотеку компонентов, унифицировать паттерны и ввести переменные. Каждый экран приходилось аккуратно мигрировать, чтобы все оставалось консистентным между разными сценариями и разделами продукта.
Процесс
- 1 Исследование и аудит
Собрал обратную связь от пользователей, стейкхолдеров и поддержки, потом разобрал аналитику и провел UX-аудит. Проблемы сходились вокруг навигации, иерархии и плотности контента, а старой раскладке некуда было расти.
- 2 Направление
Определили с командой цели: удобнее в ежедневном использовании, поддержка новых бизнес-сценариев и интерфейс в логике обновленного бренда. Оформил редизайн в конкретные гипотезы и проверил каждую с учетом технических и организационных ограничений.
- 3 Дизайн и прототипирование
Пересобрал информационную архитектуру и навигацию, затем сделал прототипы основных экранов и виджетов и прогнал сквозные сценарии внутри команды и с реальными пользователями. Через пару раундов фидбэка дизайн-система, ключевые паттерны и токены встали на место.
- 4 Передача
Передал все компоненты и спеки в Figma и остался на дизайн-ревью и QA, чтобы реализация совпала с задумкой. Система продолжает расти новыми виджетами и фичами.
Дизайн-решения
- 1 Навигация и информационная архитектура
Горизонтальное верхнее меню переехало в левый сайдбар: навигацию стало проще охватывать взглядом, а у макета появилось место для роста. Декоративную иллюстрацию убрали и освободили место под виджеты. У счетов появился свой раздел, поэтому дашборд фокусируется на сводных данных и быстрых действиях, а детали вынесены на отдельные страницы. Переключатель аккаунтов остался в левом верхнем углу: по тапу открывается меню, где можно переключиться между компаниями и частными лицами, посмотреть текущий тариф или перейти к настройкам и Teammates.
- 2 Типографика
Упростил текстовую иерархию и стандартизировал отступы. Проще читать, проще сканировать.
- 3 Виджеты
- Available balance & Payments: теперь объединены в один главный виджет с мультивалютностью и быстрыми действиями: отправить, получить, внутренний перевод, сгенерировать документы.
- Промо-баннер: переиспользуемый закрываемый баннер в правом верхнем углу, под разные акции и анонсы.
- Company limits: новый виджет с остатком месячного лимита и прогресс-баром.
- Recipients: переработаны по данным использования: лучше обзор и быстрее доступ.
- 4 Модель статусов
Обновил модель статусов, чтобы точнее отражать этап онбординга пользователя. Всего пересмотрено шесть статусов.
