Редизайн B2B-app для платежей
Редизайн приложения для международных IBAN и B2B платежей в Европе— мобильная и десктоп версия веб-приложения с более 800 экранов за 8 недель.
Key poins
Обзор проекта
Финтех-приложение для B2B-сегмента, предназначенное для международных переводов в Европе. Поддерживает IBAN-платежи, мультивалютные операции (GBP, EUR) и криптовалюту. Разработано как для физических, так и для корпоративных клиентов, с прохождением KYC при регистрации. Приложение запустилось в формате mobile-first, затем расширилось до адаптивной веб-версии — сейчас работает в продакшене и активно набирает пользователей.
Команда: продуктовый дизайнер в лице меня, 3 разработчика, PM, системный аналитик, CEO
Платформы: нативный mobile-first, адаптивный веб
Рынок: Великобритания, Европа
Клиент: финтех-компания из Великобритании (под NDA)
ВАЖНО! Коммерческая информация, экраны и конфиденциальные данные в этом проекте защищены NDA, поэтому некоторые части показаны в обезличенном виде или описаны в общих чертах.
8
недель
от аудита до готовых макетов
800+
экранов
спроектировано и описано
~1
месяц
разработки сэкономили за счёт точной дизайн-системы
Моя роль
Я была единственным продуктовым дизайнером на проекте и отвечала за весь сквозной процесс дизайна.
За что я отвечала:
  • Аудит продукта и анализ конкурентов
  • Созвоны с заказчиком и стейкхолдерами на английском
  • Информационная архитектура и flow в 7 разделах
  • Дизайн-система с нуля — токены, компоненты, паттерны
  • Весь UI-дизайн для мобильной и адаптивной веб-версий
  • Документирование экранов передача в разработку и сопровождение дизайна в процессе реализации
  • Дизайн-ревью
Вызовы
Финтех-MVP, построенный с нуля за 8 недель: без существующей дизайн-системы, без предварительных пользовательских исследований, без дизайн-поддержки. Регуляторный слой требовал KYC для физических и юридических лиц, а также дизайна с учётом требований AML.
Только флоу «Send Money» дал более 20 вариантов флоу с учётом четырёх платёжных сетей (SWIFT, SEPA, Faster Payments, CHAPS), двух типов клиентов и нескольких пороговых значений.
Помимо этого я столкнулась с тем, что процессы оплаты в сегменте РФ и Европы сильно отличались в юридической части — мне пришлось детально изучать их документации и созваниваться со специалистом из команды комплаенса по юридическим вопросам в Великобритании и Европе. Я не боялась задавать вопросы и уточнять все моменты, потому что моя цель была не просто сделать макеты, а сделать их так, чтобы потом не пришлось разработчикам самостоятельно переделывать и додумывать варианты.
Этапы работы
Поскольку времени на классические пользовательские исследования не было, работа была выстроена через анализ конкурентов, инсайты из аудита и тесное взаимодействие с технической командой.
  1. Аудит
Анализ исходной версии приложения
2. Конкуренты
Сбор референсов и конкурентов
3. Презентация
Согласование с клиентом из Великобритании плана редизайна
4. Дизайн-система
Построение дизайн-системы на основе атомарного дизайна
5. Дизайн макетов
Дизайн более 800 макетов с раскладкой на флоу и корнер-кейсы
6. Согласование
Каждый экран был презентован команде разработчиков
7. Документация
Добавлены аннотации на макетах с описанием поведения и логики
Дизайн-решения
Пошаговый флоу перевода
Проблема. Более 20 полей в одном модальном окне, которые динамически меняются в зависимости от типа платежа, суммы и типа клиента. Интерфейс прыгал, окно можно было случайно закрыть.
Решение. Последовательный степпер на отдельной странице. На каждом шаге появлялись только те поля, которые нужны были после предыдущих выборов. Выход из флоу запускал диалог подтверждения.
Результат. Пользователи двигаются линейно и не теряют данные. Количество обращений в поддержку по платёжным флоу заметно снизилось (точная метрика под NDA).
Дизайн-решения
Дизайн-система
Проблема. Сжатые сроки на разработку и не большая команда разработки.
Решение. Атомарная система с явными токенами (отступы, типографика, цвет) и самодокументируемыми компонентами. Аннотации структурированы так, чтобы их могли парсить ИИ-инструменты.
Outcome. Developers fed the system into AI coding assistants and shipped consistent UI without back-and-forth. ~1 month of dev time saved. Zero design revisions after final handoff.
Дизайн-решения
Дизайн на будущее
Проблема. В роадмапе был запланирован MVP2 (раздел «Карты») — добавление новых разделов позже рисковало нарушить консистентность.
Решение. Дизайн-система построена вокруг масштабируемых паттернов, а не фиксированных экранов — с чёткими правилами для новых флоу, состояний и разделов.
Результат. Когда запустился MVP2, разработчики самостоятельно добавили весь раздел «Карты» — полностью консистентно с остальным продуктом.
Дизайн-решения
Аннотации
Проблема. UI в финтехе — это высокие риски: каждый незакрытый edge case означает, что разработчик додумывает сам.
Решение. Каждый экран спроектирован во всех состояниях: дефолтное, пустое, загрузка, ошибка, успех, блокирующее, а также edge cases — например, лимиты на попытки ввода пароля.
Результат. Всего два уточняющих вопроса от разработчиков за всю фазу реализации.
Результаты
✅ Дизайн выполнен за 8 недель на 800+ экранов
✅ Более 5 месяцев в продакшене с активно растущей пользовательской базой
✅ Масштабировано до MVP2 — раздел «Карты» добавлен разработчиками самостоятельно
✅ Около 1 месяца времени разработчиков сэкономлено благодаря дизайн-системе и аннотациям
✅ Всего 2 уточняющих вопроса от разработчиков за всё время реализации
✅ Положительная обратная связь от клиента и команды поддержки — меньше жалоб от пользователей
Мои заключения
Вложения в дизайн-систему и аннотации до основной работы над дизайном окупаются многократно — а работа без классических исследований заставляет выстраивать более тесные связи с аналитиками, комплаенсом и разработкой, что оказалось другим, но полезным источником сигналов.
Глубокая документация сделала команду автономной: разработчики обращались ко мне за сложными решениями, а не за рутинными. Сжатые сроки показывают, на чём на самом деле построен твой процесс — мой оказался про системное мышление в первую очередь, и только потом про экраны.
Мои работы
Редизайн ЛК брокера в B2B
Дизайн LMS системы в Ed-tech
Редизайн Ed-tech приложения
Made on
Tilda