Разработка калькулятора стоимости и его виджета
+22%
к конверсии в заявку
-15–20%
времени принятия решения
снижение нагрузки
на менеджеров
2023
Discovery
66БИТ — компания, специализирующаяся на разработке ПО и информационных систем для B2B и B2C клиентов.
Основной сайт работал по классической модели продажи услуг: пользователь изучал кейс или услугу, затем оставлял заявку и далее общался с менеджером, который рассчитывал стоимость вручную.
В продукте отсутствовала прозрачность стоимости до контакта с менеджером, что влияло на конверсию и качество входящих лидов.
💡 Инсайты:
Пользователи ожидают увидеть, хотя бы примерную стоимость до контакта;
Отсутствие цены = высокий уровень недоверия и неопределённости;
Значительная часть пользователей не готова оставлять заявку вслепую;
Менеджеры тратят время на базовые ответы на вопросы;
Лиды приходят с разным уровнем понимания проекта.
Продуктовая проблема
Долгий и непрозрачный процесс расчёта стоимости, пользователи уходили на первом этапе.
Задача
Упростить вход в продукт и повысить конверсию в заявку.
Этапы работы
• анализ задачи;
• логика калькулятора;
• user flow;
• wireframes;
• прототип;
• UI дизайн;
• подготовка в разработку;
• дизайн-ревью.
JTBD 1
Когда я рассматриваю подрядчика для разработки, я хочу понять примерную стоимость проекта, чтобы оценить, подходит ли мне этот бюджет.
JTBD 2
Когда я готовлюсь к контакту с компанией, я хочу заранее разобраться в параметрах проекта, чтобы говорить с менеджером предметно.
Продуктовая стратегия
Цель — снизить неопределенность до первого контакта через самостоятельную оценку стоимости.
Ключевые принципы:
• упрощение сложного сценария;
• пошаговое раскрытие параметров;
• прозрачная, но не жёсткая модель цены;
• интеграция в существующий пользовательский путь.
UX/UI решения
Структура:
Калькулятор реализован как один экран с последовательной логикой выбора параметров, отражающих путь разработки:
• наличие технического задания;
• дизайн (свой / шаблонный);
• верстка;
• лицензии (1С-Битрикс);
• разработка;
• наполнение контентом;
• интеграции.
Каждый параметр влияет на итоговую стоимость.
Ключевые UX решения:
Последовательная логика выбора
Сложный процесс разработки был переведён в понятные шаги внутри одного экрана, чтобы пользователь двигался по логике «от идеи до релиза».Постепенное раскрытие информации
Каждый блок раскрывает следующий уровень сложности, снижая когнитивную нагрузку.Объяснение параметров
Рядом с параметрами добавлены интерактивные подсказки (иконка с вопросом), объясняющие влияние выбора на проект.Прозрачная модель стоимости
Цена пересчитывается в процессе выбора параметров, но представлена как ориентировочная, чтобы не создавать ложных ожиданий.Визуальная обратная связь
Добавлены сценарии и вариации стоимости при изменении параметров (например, частые опции или скидочные сценарии).Фокус на одном действии
Каждый экранный блок содержит одно действие, что снижает когнитивную нагрузку и удерживает пользователя в сценарии.
Системный подход
Калькулятор был реализован в рамках существующей дизайн-системы компании:
Использовала готовые UI-компоненты (чекбоксы, кнопки, поля);
Соблюдала единую визуальную структуру сайта;
UI-kit обеспечивал консистентность как на странице, так и в виджетах.
Работа с командой
Работа велась в тесной связке с продукт-менеджером (постановка задач и логика продукта), разработчиками (прямая коммуникация и передача логики через созвоны) и главным дизайнером (визуальная система и ограничения UI).
Результат
После внедрения:
Менеджеры начали получать более тёплых и подготовленных клиентов, которые уже понимали примерный бюджет и структуру будущего проекта.
Это сократило цикл общения и повысило эффективность продаж.
+22%
к конверсии в заявку
-15–20%
времени принятия решения
снижение нагрузки
на менеджеров
Пруфы
Другие мои проекты
Разработка калькулятора стоимости и его виджета
+22%
к конверсии в заявку
-15–20%
времени принятия решения
снижение нагрузки
на менеджеров
2023
Discovery
66БИТ — компания, специализирующаяся на разработке ПО и информационных систем для B2B и B2C клиентов.
Основной сайт работал по классической модели продажи услуг: пользователь изучал кейс или услугу, затем оставлял заявку и далее общался с менеджером, который рассчитывал стоимость вручную.
В продукте отсутствовала прозрачность стоимости до контакта с менеджером, что влияло на конверсию и качество входящих лидов.
💡 Инсайты:
Пользователи ожидают увидеть, хотя бы примерную стоимость до контакта;
Отсутствие цены = высокий уровень недоверия и неопределённости;
Значительная часть пользователей не готова оставлять заявку вслепую;
Менеджеры тратят время на базовые ответы на вопросы;
Лиды приходят с разным уровнем понимания проекта.
Продуктовая проблема
Долгий и непрозрачный процесс расчёта стоимости, пользователи уходили на первом этапе.
Задача
Упростить вход в продукт и повысить конверсию в заявку.
Этапы работы
• анализ задачи;
• логика калькулятора;
• user flow;
• wireframes;
• прототип;
• UI дизайн;
• подготовка в разработку;
• дизайн-ревью.
JTBD 1
Когда я рассматриваю подрядчика для разработки, я хочу понять примерную стоимость проекта, чтобы оценить, подходит ли мне этот бюджет.
JTBD 2
Когда я готовлюсь к контакту с компанией, я хочу заранее разобраться в параметрах проекта, чтобы говорить с менеджером предметно.
Продуктовая стратегия
Цель — снизить неопределенность до первого контакта через самостоятельную оценку стоимости.
Ключевые принципы:
• упрощение сложного сценария;
• пошаговое раскрытие параметров;
• прозрачная, но не жёсткая модель цены;
• интеграция в существующий пользовательский путь.
UX/UI решения
Структура:
Калькулятор реализован как один экран с последовательной логикой выбора параметров, отражающих путь разработки:
• наличие технического задания;
• дизайн (свой / шаблонный);
• верстка;
• лицензии (1С-Битрикс);
• разработка;
• наполнение контентом;
• интеграции.
Каждый параметр влияет на итоговую стоимость.
Ключевые UX решения:
Последовательная логика выбора
Сложный процесс разработки был переведён в понятные шаги внутри одного экрана, чтобы пользователь двигался по логике «от идеи до релиза».Постепенное раскрытие информации
Каждый блок раскрывает следующий уровень сложности, снижая когнитивную нагрузку.Объяснение параметров
Рядом с параметрами добавлены интерактивные подсказки (иконка с вопросом), объясняющие влияние выбора на проект.Прозрачная модель стоимости
Цена пересчитывается в процессе выбора параметров, но представлена как ориентировочная, чтобы не создавать ложных ожиданий.Визуальная обратная связь
Добавлены сценарии и вариации стоимости при изменении параметров (например, частые опции или скидочные сценарии).Фокус на одном действии
Каждый экранный блок содержит одно действие, что снижает когнитивную нагрузку и удерживает пользователя в сценарии.
Системный подход
Калькулятор был реализован в рамках существующей дизайн-системы компании:
Использовала готовые UI-компоненты (чекбоксы, кнопки, поля);
Соблюдала единую визуальную структуру сайта;
UI-kit обеспечивал консистентность как на странице, так и в виджетах.
Работа с командой
Работа велась в тесной связке с продукт-менеджером (постановка задач и логика продукта), разработчиками (прямая коммуникация и передача логики через созвоны) и главным дизайнером (визуальная система и ограничения UI).
Результат
После внедрения:
Менеджеры начали получать более тёплых и подготовленных клиентов, которые уже понимали примерный бюджет и структуру будущего проекта.
Это сократило цикл общения и повысило эффективность продаж.
+22%
к конверсии в заявку
-15–20%
времени принятия решения
снижение нагрузки
на менеджеров