MVP B2B-финтех-платформы Debit-Pay — кейс Ярослава Столбова, Senior Product Designer

MVP B2B-финтех-платформы Debit-Pay (Debit-Pay, 2024)

MVP B2B-финтех-платформы: задолженности, контрагенты, финансирование

Debit-Pay — B2B-платформа для управления дебиторской задолженностью. Она должна была помочь компаниям проверять контрагентов, рассчитывать финансирование, проводить сделки и готовить документы в одном продукте

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

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

Структура продукта и карта основных экранов

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

Основные этапы работы с задолженностью

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

Карточка сделки, её этапы и состояния

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

Компоненты и основные правила дизайн-системы

Кроме интерфейса платформы, с нуля спроектировал лендинг Debit-Pay. Его задача — понятно объяснить сложный B2B-продукт и привести потенциального клиента к заявке. Выстроил страницу вокруг основных вопросов бизнеса: как работает платформа, какие задачи решает, сколько стоят услуги, как проходят расчёты и защищаются данные. Собрал в одном сценарии преимущества, возможности, стоимость, шесть этапов работы, блок о безопасности, ответы на вопросы и форму заявки. На странице было много обязательной информации, поэтому особое внимание уделил структуре и визуальной иерархии. Разделил длинный материал на понятные блоки, выделил ключевые преимущества и добавил повторные точки входа в заявку. Сохранил общий визуальный язык продукта и сделал лендинг самостоятельной точкой знакомства с Debit-Pay

Посмотреть лендинг целиком

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

Десктопная и мобильная версии продукта

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

Контакты: korewamolotov@gmail.com · Telegram @exxidea · Санкт-Петербург