Кейс / 03 · ЛЮМЕН ПРОМ

Инженерный каталог, который собирает спецификацию

Каталог промышленного освещения с фильтрами, расчётом количества светильников и формированием запроса коммерческого предложения.

  • РольДизайн и разработка
  • СтекHTML / CSS / JS
  • ТипB2B-каталог

Посмотреть живой сайт ↗

Первый экран каталога ЛЮМЕН ПРОМ: техническая схема светильника с размерами и кнопками расчёта
Задача

Инженеру недостаточно красивой карточки: нужны параметры, сравнение и расчёт под помещение, который можно отправить в закупку.

Что сделал

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

Что получилось

Статическая версия каталога, не зависящая ни от одной внешней библиотеки. Воронка «расчёт → спецификация → КП» закладывается аналитикой до публикации.

01 / Контекст и задача

Инженеру нужны параметры

Инженеру недостаточно красивой карточки товара. Нужны параметры, сравнение, расчёт под помещение и спецификация, которую можно отправить в закупку.

02 / Интерфейс: почему так

UI

Интерфейс как техпаспорт

  1. D1

    Чертёж вместо рендера

    Первый экран построен на технической схеме светильника — вид сбоку и снизу, размеры, подпись «СХЕМА / МАСШТАБ 1:5 / РАЗМЕРЫ СПРАВОЧНО». Инженер узнаёт язык своей документации, а не рекламной съёмки.

  2. D2

    Моноширинные подписи и плотная сетка

    Служебные подписи набраны моноширинным, характеристики идут строкой спецификации — световой поток, класс пыле-влагозащиты, рабочий диапазон температур. Всё как в опросном листе, по которому инженер реально выбирает.

  3. D3

    Расчёт внутри сайта

    Площадь, высота и требуемая освещённость превращаются в количество приборов и оценку эксплуатации — без Excel на стороне клиента. Кнопка «Рассчитать светильники» стоит в hero рядом с «Запросить КП».

  4. D4

    Спецификация как тележка

    Выбранные позиции накапливаются в «Запросе КП» со счётчиком в шапке и уходят в заявку с суммарной мощностью. Каталог заканчивается не «спасибо за обращение», а документом для закупки.

  5. D5

    Работа без мыши

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

03 / Технические решения

Что внутри

Интерфейс как техпаспорт

Плотная сетка, чертежи и моноширинные параметры соответствуют контексту промышленного продукта.

Расчёт внутри сайта

Площадь, высота и требуемая освещённость превращаются в количество приборов и оценку эксплуатации.

Спецификация сохраняется

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

Архитектура работы

Интерфейссценарии пользователя
→
Логикаправила и данные
→
Интеграциисервисы и запуск

04 / Результат

Статическая версия каталога

Собрана статическая версия каталога без библиотек. Перед публикацией проводится проверка контрольного расчёта, клавиатурной навигации и стабильности загрузки шрифтов.

Что бы измеряли

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

Контакты

Похожая задача? Разберём.

Обсудить проект в Telegram +7 922 607 06 37 Заполнить заявку
Следующий кейс КОНТУРКаркасные дома: смета до звонка