Прототип выплат, пересобранный в B2B-продукт для показа партнёрам
NVP — финтех-платформа для компаний с большими командами фрилансеров: онбординг, проверки и выплаты самозанятым, ИП и исполнителям по ГПХ. Мы спроектировали UX/UI продукта и его публичный сайт.
- Клиент
- NVP
- Отрасль
- Финтех-платформа
- Год
- 2026
- Услуги
- Продуктовый дизайн, SaaS, Финтех
день от брифа до первого редизайна прямо в коде продукта
экранов прототипа разобрали до первого пикселя
блоков дашборда пересобрали вокруг денег и рисков
типа исполнителей — один сценарий выплат
Задача
На каждого исполнителя, которому платит компания, нужны договор, акт приёмки, а если он самозанятый — ещё и чек. К тому же массовые выплаты могут привести к блокировке счёта компании. У NVP был рабочий прототип для всего этого, но он выглядел как внутренний инструмент, а в мае его предстояло показать партнёрам. Продукт должен был восприниматься как серьёзный B2B-сервис — и на ноутбуке, и на телефоне.
Наш подход
Мы проектировали на компонентах shadcn/ui, на которых построен сам продукт, поэтому первый редизайн заработал в его коде уже на следующий день. Ключевое решение — поставить риски рядом с деньгами. На каждом экране рядом с суммой видны документы, проверки и лимиты, и менеджер замечает проблему до оплаты.
Выплата — это финал задания. Когда проверены человек, договор и работа, деньги уходят сами.
Что мы сделали
01
Дашборд
Первый экран после входа, сделанный к майскому показу партнёрам. Мы пересобрали семь блоков прототипа в одну иерархию: наверху деньги и риски, ниже динамика и комплаенс, затем воронки.
- 4 KPI-карточки: от оборота до открытых предупреждений
- Динамика оборота с переключателем периода
- Шкала комплаенса и просроченные документы
- Воронки онбординга и заданий
02
Разовая выплата
Создать задание — значит создать выплату, и менеджеры делают это весь день. Мы разбили форму на три шага: исполнитель, работа, оплата. Договор, акт приёмки и проверки исполнителя — прямо внутри формы.
- Три шага: исполнитель, работа, оплата
- Карточка проверенного исполнителя наверху
- Акт приёмки подписывается OTP-кодом
- Состояния: пустая, заполненная, ошибка, успех
03
Массовые выплаты
Крупные выплаты приходят реестрами в Excel. Мы спроектировали загрузку в четырёх состояниях — от перетаскивания файла до результата — и таблицу ошибок, где ещё до согласования указаны строка, поле и способ исправления.
- Зона загрузки, обработка, результат, таблица ошибок
- Дубли, лимиты и пропуски по каждой строке
- Проверка патента и по реестру контролируемых лиц
- Чистые строки уходят на согласование, остальные ждут
Как это работает
- 1
Приглашение
Компания приглашает исполнителей любого из трёх типов
- 2
Документы
Исполнитель загружает документы через защищённый кабинет
- 3
Проверки
Проверка патента и по реестру контролируемых лиц до начала работ
- 4
Задание
Менеджер ставит задание и ведёт его до приёмки
- 5
Подписание
Исполнитель подписывает договор и акт OTP-кодом
- 6
Согласование
Менеджеры готовят реестр, уполномоченные сотрудники его согласуют
- 7
Выплата
Деньги уходят с номинального счёта в банк или на кошелёк
Продукт вживую
nvp-platform.ru
Результаты
- 01Финальный дашборд сдан за 15 дней — точно к майскому показу партнёрам
- 02Одна форма для задания и его выплаты: пустая, заполненная, с ошибками и успешно отправленная
- 03Загрузка реестра в четырёх состояниях, ошибки — с указанием строки, поля и способа исправления
- 04Публичный сайт, который проводит посетителя по шести модулям продукта
Технологии
- Дизайн
- Figma · компоненты · автолейаут
- UI-кит
- shadcn/ui · Base UI · Recharts · Lucide
- Фронтенд
- Next.js · React · Tailwind CSS · TypeScript
- Платформы
- Десктопный веб · мобильный веб · PWA
Следующий кейс · Esturión de Sarrión
Интернет-магазин премиальной икры, трюфелей и вагю
Обсудим
Есть проект? Разберём его за 30 минут.
Расскажите, что вы создаёте. Уже на первом созвоне вы получите прямой ответ о сроках, команде и подходе.