Концепт сайта для B2B SaaS «Сальдо.Про»: продукт показывает себя сам

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

Концепт-проект: «Сальдо.Про» — вымышленная компания. Результатов работы здесь нет: только решения и гипотезы.

О заказчике

• Отрасль: B2B SaaS, финансовое планирование и казначейство
• Город: Москва, клиенты по всей России
• Масштаб: Команда 35 человек, продукт на рынке 3 года, около 180 компаний-клиентов
• Клиенты: Финдиректора и казначеи компаний с оборотом от 300 млн ₽ в год и 2–30 юрлицами
• Модель продаж: Демо → пилот 14 дней на данных клиента → годовой договор
• Средний чек: 24 900 ₽ в месяц, годовой контракт

Задача

«Сальдо.Про» — сервис платёжного календаря для компаний с несколькими юрлицами и десятком банковских счетов. Он собирает выписки из банков, заявки на оплату от отделов и данные 1С в одно окно и строит прогноз остатков на 13 недель вперёд. Главная ценность — кассовый разрыв видно заранее, пока его ещё можно закрыть переносом платежа, а не овердрафтом в последний день.

Покупатель продукта — финансовый директор среднего бизнеса. Это скептичный и занятой человек, который живёт в Excel и не доверяет обещаниям «цифровой трансформации». Банковские данные он отдаст только сервису, в логике которого разобрался сам. В сделке участвуют ещё двое: служба безопасности, которой нужны ответы про хранение данных и права доступа, и собственник, который подписывает бюджет и хочет понять окупаемость в часах и деньгах.

Текущий сайт продукта построен как у большинства B2B SaaS: абстрактный заголовок про «управление финансами», стоковое фото переговорной, три иконки преимуществ и кнопка «Запросить демо», за которой — звонок продажника через день-два. Интерфейса не видно, тарифы спрятаны, про безопасность — одна строка в подвале. Финдиректор уходит сравнивать дальше, а те, кто всё же оставил заявку, приходят на демо с базовыми вопросами, на которые мог ответить сайт.

Продукту нужен сайт, который продаёт так же, как хороший пресейл: показывает интерфейс на правдоподобных данных, объясняет, как считается прогноз, честно называет цену и даёт каждому участнику сделки свои аргументы.

Что мешает купить

«Не понимаю, что внутри»

Абстрактные обещания финдиректора не убеждают. Демо платёжного календаря на странице показывает интерфейс, прогноз и сценарии закрытия разрыва на правдоподобных данных — до разговора с продажником.

«Не отдам банковские данные непонятно кому»

Отдельный блок безопасности: где хранятся данные, почему сервису достаточно прав только на чтение выписок, как устроены роли и журнал действий, какие документы можно запросить.

«А прогноз вообще точный?»

Под графиком объясняем, из чего складывается прогноз: фактические остатки, согласованные заявки, регулярные платежи и правила. Пользователь видит, что это расчёт по понятным правилам, а не чёрный ящик.

«Сколько стоит и окупится ли»

Тарифы открыты. Калькулятор переводит ручную работу в часы и рубли и подбирает тариф, а допущения расчёта написаны рядом с результатом — собственнику есть что проверить.

«Внедрение займёт полгода»

Три шага подключения с оценкой времени, список интеграций и пилот на 14 дней на своих данных. Барьер «это большой проект» превращается в «это две недели проверки».

Решение

Главная идея концепта — продукт показывает себя сам. В центре страницы — интерактивное демо платёжного календаря на данных вымышленной компании «ТД Север»: четыре юрлица, одиннадцать счетов, прогноз на 13 недель. На графике видно, как остаток уходит ниже порога на девятой неделе, а боковая панель раскладывает разрыв на причины и предлагает сценарии: перенести платёж поставщику, сдвинуть закупку, привлечь овердрафт — с расчётом стоимости каждого варианта. За минуту финдиректор понимает то, что обычно узнаёт только на демо.

Графики и таблицы свёрстаны кодом — SVG и HTML, без скриншотов. Интерфейс остаётся чётким на любом экране, весит в разы меньше картинок, а данные демо можно менять в CMS вслед за продуктом. Визуальный язык сайта повторяет язык самого приложения: тёмный интерфейс, моноширинные цифры, один синий акцент и красный — только для разрыва. Сайт и продукт выглядят как одно целое, и это само по себе аргумент доверия.

Для собственника — калькулятор экономии времени. Пользователь вводит число юрлиц, счетов, заявок на оплату и часов, которые команда тратит на ручной календарь; калькулятор показывает, сколько часов в месяц освобождается, во что это обходится в деньгах и какой тариф подходит. Допущения расчёта написаны прямо под результатом, чтобы цифра не выглядела рекламной.

Для службы безопасности — отдельный блок с конкретикой: где хранятся данные, какие права сервис получает в банке, как устроены роли и журнал действий, какие документы пришлём по запросу. Финальная форма запроса демо предлагает выбрать слот в календаре и подставляет вводные из калькулятора — продажник приходит подготовленным, а демо идёт на данных, похожих на данные клиента.

Посадочная блок за блоком

1. Первый экран. Заголовок «Платёжный календарь, который видит разрыв заранее», подзаголовок о сборе банков, заявок и 1С в одно окно, кнопки «Запросить демо» и «Посмотреть продукт», строка доверия (пилот 14 дней, данные в РФ, только чтение). Справа — компактное окно приложения с остатком и прогнозом. Зачем: За пять секунд объясняет, что это за продукт и для кого. Интерфейс на первом экране сразу отличает сайт от конкурентов с абстрактными иллюстрациями.
2. Где уходит время. Три сцены знакомой рутины: выписки из шести банков каждое утро, заявки на оплату в почте и мессенджерах, прогноз в Excel, который устарел к обеду. Зачем: Финдиректор узнаёт свой понедельник и понимает, что сайт написан людьми, которые знают его работу. Это подготовка к демо.
3. Демо платёжного календаря. Окно приложения: выбор компании и сценария, график остатка на 13 недель с порогом и красной зоной разрыва, панель с причинами и сценариями закрытия, таблица платежей недели со статусами согласования. Зачем: Главный аргумент — продукт виден в работе. Разрыв на девятой неделе и готовые сценарии показывают ценность конкретнее любого текста.
4. Как подключить. Три шага с оценкой времени: подключить банки и 1С, настроить статьи и правила, согласовывать платежи и смотреть прогноз. Строка интеграций. Зачем: Снимает страх долгого внедрения сразу после того, как продукт понравился.
5. Калькулятор экономии времени. Четыре ввода — юрлица, счета, заявки в месяц, часы на ручной календарь — и результат: часы в месяц, стоимость ручной работы, подходящий тариф. Допущения расчёта под результатом. Зачем: Даёт собственнику аргумент в деньгах и заодно квалифицирует лида: вводные попадают в заявку на демо.
6. Для кого. Три колонки: финдиректор, казначей, собственник — что каждый видит в продукте и какие решения принимает быстрее. Зачем: Помогает переслать сайт коллегам: каждый участник сделки находит свой раздел.
7. Отзывы и безопасность. Три отзыва финдиректоров с именем, ролью и городом и блок безопасности: серверы в РФ, 152-ФЗ, только чтение выписок, роли, журнал действий, документы по запросу. Зачем: Отзывы коллег по цеху дают социальное доказательство, а безопасность здесь же закрывает главный стоп-фактор перед тарифами.
8. Тарифы. Три тарифа с ценой в месяц, лимитами юрлиц и пользователей, отметка подходящего тарифа по итогам калькулятора. Зачем: Открытая цена экономит время обеим сторонам: на демо приходят те, кому цена уже подходит.
9. Частые вопросы. Вопросы из реальных демо: чем отличается от Excel и учётной системы, что будет с данными при отказе, сколько длится пилот, можно ли без интеграции с банками. Зачем: Закрывает остаточные возражения и разгружает продажников. Ответы размечены как FAQ для поиска.
10. Запрос демо. Форма из пяти полей с выбором слота в календаре, подставленными вводными из калькулятора и описанием, что будет на встрече. Зачем: Слот вместо «мы перезвоним» убирает ожидание, а вводные позволяют показать демо на данных, похожих на данные клиента.

Механики заявки

Демо платёжного календаря на странице

График остатка на 13 недель с порогом минимального остатка, красной зоной разрыва и таблицей платежей. Переключатели «Базовый / Пессимистичный» и выбор юрлица. Микрокопирайт у графика: «Это данные вымышленной компании. На пилоте покажем ваши» — честно и сразу подводит к следующему шагу.

Сценарии закрытия разрыва

Боковая панель раскладывает разрыв на причины и предлагает варианты с ценой: перенос платежа поставщику, сдвиг закупки, овердрафт с расчётом процентов. Финдиректор видит не просто прогноз, а инструмент решения — это и есть ценность продукта.

Калькулятор с открытыми допущениями

Четыре ползунка и результат в часах и рублях. Под результатом — допущения: какую долю ручной работы снимает автоматизация и какая стоимость часа взята в расчёт. Любое число можно поменять, поэтому расчёт воспринимается как инструмент, а не как реклама.

Запрос демо со слотом

Вместо «оставьте заявку, мы перезвоним» — выбор свободного времени в календаре пресейла на ближайшие дни. Вводные из калькулятора подставлены в форму, их можно поправить. Под кнопкой — что будет на встрече: 30 минут, демо на данных вашего масштаба, план пилота.

Маршрут для безопасности

Кнопка «Для службы безопасности» ведёт к блоку с конкретными ответами и списку документов, которые пришлём по запросу. Финдиректор может переслать ссылку коллеге и не пересказывать детали своими словами.

Что замеряем после запуска

• Доля посетителей, взаимодействовавших с демо — Проверяем главную гипотезу — что интерфейс на странице интереснее текста. Считаем переключения сценариев и наведения на график.
• Конверсия в запрос демо у тех, кто трогал демо, и у тех, кто нет — Если демо работает, у первых конверсия заметно выше. Если разницы нет — пересобираем сценарий демо, а не страницу целиком.
• Доля заявок с заполненным калькулятором — Показывает, насколько калькулятор полезен как квалификация. Сравниваем с продажниками, помогают ли вводные на первой встрече.
• Доходимость до встречи — Слот вместо обратного звонка должен сокращать потери между заявкой и демо. Сравниваем со старым процессом по данным CRM.
• Переход из демо-встречи в пилот — Косвенно проверяем, приходят ли с сайта более подготовленные клиенты. Измеряем в CRM по источнику лида.
• Просмотры блока безопасности и пересылка ссылки — Если блок читают часто, выносим его в отдельную страницу с документами и делаем точкой входа для ИТ и безопасности.

Стек

Next.js, TypeScript, SVG / D3-scale, Headless CMS, Bitrix24 API, Яндекс Метрика, Сервис бронирования слотов.

Все кейсы · Услуга · Калькулятор стоимости