
Полгода внутри производства
Конфигуратор изделий под заказ
Платформа для производства стекла и зеркал. Тысячи ограничений, пять ролей, делегирование по доверенности и составные заказы.
- Продуктовый дизайн
- UX-архитектура
- Исследование домена
Что за продукт
Производство стекла и зеркал: закалка, триплекс, фацет, лестницы и панно под заказ. Задача была вывести это в интернет так, чтобы человек считал цену сам, а не оставлял телефон менеджеру.
По оценке владельца, Захара, компания держит около 30% московского рынка. Считает он сам, цифру я привожу с его слов.
Как это делалось
Захар пришёл с задачей, которая на лендинг не помещалась: он хотел маркетплейс. Сначала позвал к себе на производство, я съездил, отснял цех и материал, и после этого начались созвоны.
Полгода по два-три часа в день. Захар рассказывал ограничения и нюансы производства, показывал, что и как уходит в работу и что собирается менять. Конфигураторы и механики мы собирали вдвоём.
Базу знаний и таблицы совместимости писал он, предметная модель не моя. Моя часть в том, чтобы вытащить недокументированное, разобраться самому и превратить правила в интерфейс. Показанное здесь составляет около десяти процентов бизнес-логики.
Съёмка на производстве
Съездил на завод и отснял его сам, с дрона. Своих материалов у компании не было, а показывать конфигуратор в отрыве от цеха бессмысленно: он весь про то, что там происходит.

Склад сверху. Стекло лежит здесь листами, а в цех уходит через отверстие в стене: лист подаёт кран-балка.

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

Осветлённое. Лист почти не видно, лепестки за ним не темнеют и не уходят в зелень. Так проверяется цветопередача.

Тонированное. Тот же букет за листом уходит в графит. Видно, сколько света материал забирает.

Зеркало. Сцена собрана так, чтобы в отражение попадала её часть. Без этого зеркало читается серым прямоугольником.
Что принимает станок
Съездил к станку и снял экран оператора, чтобы понять, чем вообще заканчивается заказ. Оказалось, произвольной геометрии станок не берёт: у него каталог шаблонов с кодами и к каждому свой набор букв.
На снимке шаблон S407, «неровный четырёхсторонник с острыми и тупыми углами», и пять чисел: L, H, H1, L1, L2. Больше от изделия станку ничего не нужно. Это и задало язык конфигуратора: человек выбирает форму и вписывает размеры в поля, а на выходе собирается код шаблона и те же пять значений.

Слева каталог форм. Круг, эллипс, прямоугольники с вырезами, кривизны, ступени. Всё, чего в этом списке нет, произвести нельзя, и конфигуратор обязан был это знать раньше клиента.
Чертежи фигур
Все основные фигуры станка отснял с его экрана и перерисовал заново для сайта. Тут и понадобилась тригонометрия: чтобы посчитать площадь изделия, а от неё цену, из этих букв нужно собрать формулу под каждую форму отдельно.
Поля на чертеже это ровно те величины, которые принимает станок. Подпись под чертежом это имя фигуры в самом станке, тот же код, что оператор выбирает у себя в каталоге.
Конкуренты не считают
Изделия из стекла до сих пор продают через менеджеров. Калькуляторы на сайтах отрасли считают приблизительно: человек вводит параметры, получает вилку и всё равно оставляет телефон. Дальше заказ идёт вручную, через таблицы и согласования.
У Стекла24 калькулятор считал по-настоящему ещё в старой версии сайта. Ей почти десять лет, и по меркам рынка она до сих пор одна из самых функциональных. За это время бизнес вырос, вместе с ним выросли требования, и переделывать пришлось от этой точки, а не с нуля.

Старая версия. Девять карточек с параметрами, цена и вес внизу справа. Отсюда начинали.

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

У каждого материала свой набор допустимых операций. Красное значит, что физически нельзя, и это видно до того, как человек начал собирать заказ.
Четыре входа в заказ: свои размеры, целый лист, половина листа и вызов замерщика. Раньше все четыре вели к менеджеру.
Цена, вес и срок изготовления считаются на месте. Скидка тоже, отдельной строкой.
Формы взяты из каталога станка. Всё, что здесь лежит, он умеет сделать.
Размеры подписаны теми же буквами, что принимает станок: L, H, L1, L2.
Дополнительная обработка
Прямоугольник метр на полтора закажет кто угодно. Сложность начинается там, где к изделию добавляются фацет, сверловка и вырезы: между собой они дружат не всегда, и что с чем сочетается, зависит от материала и толщины.
Фацет не может быть шире толщины стекла. Сверловка не может попасть на фацет, иначе лист лопнет прямо на станке. Всё это считается у человека в браузере, пока он собирает заказ, и на производство уходит только проверенный и оплаченный.

Пескоструй для этого материала недоступен, и это видно сразу. Набор операций пересобирается под выбранное стекло.
Чертёж собирается на глазах: оси, размеры, пронумерованные углы. От них дальше считаются все отступы.
Фацет 2 мм, минимальный отступ сверловки от него 4 мм. Правило написано рядом с чертежом, а не спрятано в примечании к прайсу.
Отверстие попало на фацет. Лист от такого лопнет на станке, поэтому заказ дальше не уйдёт, пока человек не сдвинет сверловку.
Произвольное отверстие задаётся диаметром и отступами по X и Y от левого нижнего угла. Ровно теми величинами, которые принимает станок.
Девять типовых вырезов: под мебельную петлю, фитинг, душевой коннектор, розетку. Каждый со своей геометрией.
У выреза свой набор полей: размер петли, расположение, отступы от того же угла.
Корзина
Дальше идёт оформление, четыре шага. В корзине у каждой позиции свой срок изготовления, и выбирает его человек, а не менеджер. Срочность двигает цену в обе стороны: за скорость доплата, за готовность подождать скидка.

Вес, сумма, скидка и промокод считаются на лету. Вес тут не для красоты, от него зависит доставка.
Цена падает от количества, и пороги написаны прямо у позиции. Человек видит, что выгоднее взять пять штук, до того как спросит менеджера.
Переключатель срочности стоит у каждой позиции отдельно. Заказ редко нужен целиком и сразу, и цена подстраивается под то, что нужно быстро.
На крупной сумме предлагается собрать заказ дешевле. Это не баннер, а вход в разговор о персональной скидке.
Способ получения
Позиции одного заказа готовы не одновременно. Поэтому заказ разбивается на отгрузки: можно забрать всё разом, дождавшись последней позиции, а можно получать по мере готовности.
Стекло нужно к восьмому ноября, зеркало к двадцатому. Две отгрузки, у каждой свой способ получения, своя дата и своя стоимость доставки.

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

Расчёт сохраняется под своим именем и отдаётся ссылкой. Отсюда растёт кабинет партнёра: дизайнер считает, клиент оплачивает.
Весь заказ собран в один список: что куда едет, каким способом и в какой день. Последняя проверка перед оплатой.
Карта, наличные или счёт для юрлица. При оплате картой заказ уходит в работу сразу, без ожидания платёжки.
Заказ создан
Последний экран. Номер заказа, QR-код для оплаты по СБП и адреса, откуда можно забрать. То, что до оплаты заказ на производство не уйдёт, сказано прямо здесь, а не в письме следом.

QR-код для оплаты по СБП. Человек платит телефоном, не вводя карту и не дожидаясь счёта.
Заказ создан, но ждёт оплаты, и об этом сказано красным на самом видном месте. Рядом кнопка вызвать менеджера, если что-то смущает.
Два пункта самовывоза с часами работы и схемой проезда к каждому.
Карта прямо на странице. Забирать стекло едут на машине, и адрес строкой тут помогает меньше, чем точка.
Личный кабинет
После оформления человек попадает в кабинет. Внутренних страниц там несколько десятков, показываю три, по которым видно, как устроено остальное.
Кабинет держит не только заказы: организации, представители, адреса доставки, возврат средств, замеры, образцы, прайс-лист. Всё то, что в обычном магазине решается перепиской с менеджером.

Номер кабинета и персональная скидка первой строкой. Скидка уже применена в расчётах.
Реферальная ссылка со счётчиком приглашённых: к стекольщикам приходят по рекомендации.
Слева всё меню кабинета. Счётчик у «заказов, которые ждут оплаты» зовёт туда, где нужно действие.
Четыре карточки на то, за чем заходят чаще всего. Остальное лежит в меню.

Причины обращения выбираются из списка. Стекло бьётся и приезжает некомплектом, и эти случаи названы прямо, а не спрятаны под «другой вопрос».
История обращений со статусом: есть ответ, ожидает ответа, завершено. Человек видит, кто кому должен ответить.
Фотографии прикладываются здесь же. Брак стекла спорить словами бесполезно, нужен кадр.
Канал ответа выбирает сам человек: почта, телефон или оба.

Поиск по адресу доставки, коду товара или номеру заказа, плюс фильтр по контрагенту. У постоянного клиента заказов десятки.
Статус читается с одного взгляда: выдан, оплачен, когда и кем получен, от какого лица оформлен.
Ответ по обращению висит прямо на той позиции, к которой относится, а не отдельным разделом.
Курьер и доверенность, по которой он передал заказ. Стекло часто принимает не заказчик, и след об этом остаётся.
Заказ разбит на доставки ровно так, как его собирали в чекауте, и у каждой позиции виден свой срок изготовления.
Доверенности
Стекло редко принимает тот, кто его заказал. На объекте стоит прораб или строитель, замер принимает третий человек, а платит четвёртый. Поэтому у заказа есть доверенности: заказчик передаёт право на замер и на получение конкретного заказа, поимённо и с телефоном.

Замер по адресу и получение заказа доверяют по отдельности.
Пока представитель не подтвердил себя, доверенность ничего не открывает.
Представителей столько, сколько нужно: на объекте их обычно несколько.
Отозванные уходят в архив с датой и временем. След, кто имел доступ.
Как её выдают
Четыре состояния одной механики. Заказчик вводит имя, фамилию и телефон, выбирает канал (Telegram, WhatsApp или СМС) и отмечает, что доверяет: замер по адресу, получение заказа по номеру или то и другое.
Представителю приходит ссылка, он подтверждает свой номер кодом из сообщения, и только после этого доверенность становится действующей. Разрешения потом переписываются или отзываются, третья форма именно про это.
Что видит представитель
Экран того, кому доверили. Заказ он видит, а QR-код на получение закрыт, пока не принял доверенность и не подтвердил, что с правилами доставки ознакомлен.

Заказ он видит, но владельцем не становится: состав и сроки не поменяет.
QR закрыт, пока не принял доверенность и правила доставки хрупкого груза.
Логист с прямым телефоном: стекло возят по договорённости.
Способ отгрузки и дата запуска в производство, чтобы приехать вовремя.
Хранение бесплатно десять рабочих дней. Сказано на экране, а не в договоре.
Проблемы и решения
Заказчик хотел вырастить сайт: из лендинга с калькулятором сделать полноценную платформу. Заказ перестал заканчиваться корзиной, и в него пришли десятки видов обработки, админка производства, кабинет партнёра, чертёжное пространство замерщика.
У каждого участника процесса свои ограничения, и учитывать их надо все сразу: заказ проходит через всех по очереди и ломается там, где о следующем не подумали.
Клиент
Проблемы- Простые калькуляторы не дают заказать сложное изделие.
- Цена оказывается предварительной.
- Для оформления всё равно нужен менеджер.
- Реальные сроки и стоимость понять тяжело.
РешениеСамостоятельный расчёт, оформление и оплата онлайн.
Дизайнер или прораб
Проблемы- Нужно согласовать проект с заказчиком.
- Добавить собственную комиссию.
- Передать клиенту счёт на оплату.
- Координировать замер, доставку и монтаж.
РешениеОтдельный кабинет партнёра, откуда клиенту выставляют готовые расчёты.
Менеджер
Проблемы- Сложные составные заказы.
- Контроль скидок, наценок и прибыли.
- Стыковка производства и логистики.
- Проверка технической возможности изготовления.
РешениеЕдиная система управления заказами и производством.
Замерщик
Проблемы- Нестандартная геометрия.
- Кривизна стен и монтажные зазоры.
- Вырезы и примыкания до миллиметра.
- Разговор с заказчиком, дизайнером и строителями сразу.
РешениеЧертёжное пространство и инструменты замера прямо на объекте.
Доставка и монтаж
Проблемы- Размеры лифтов и проёмов.
- Работа через доверенных лиц на объекте.
- Риск повредить хрупкое изделие.
РешениеТребования доставки учитываются ещё на этапе проектирования заказа.
Зеркальные панно
Дальше идут калькуляторы под конкретные изделия. Каждое считается по-своему, и общий калькулятор им не годится: у панно свой раскрой, у зеркала с подсветкой электрика, у триплекса слои, у фартука стены.
Это сокращённые версии, для обычного человека. У панно есть ещё профессиональная, заметно сложнее, её тут не показываю.

Шесть серий, и у каждой свой раскрой. Серия меняет не отделку, а то, как поделено полотно.
Внутри серии модель: Орион, Кристалл, Куб, Ромб малый и большой, Феникс. Показаны фотографиями, словами такой рисунок не передать.
Размер задаётся у всего полотна, от 300 до 3100 мм по каждой стороне.
Обработка идёт поверх раскроя: вырезы, отверстия, пескоструй, подсветка, подложка МДФ, рамка.
Полотно режется на ромбы и собирается обратно. Размер элемента меняет и рисунок, и число деталей, которые поедут на станок.
Просят приложить фотографию места установки. Зеркало показывает то, что напротив, и без снимка клиент не поймёт, что увидит.
Зеркало интерьерное
Зеркало с подсветкой ближе к светильнику, чем к зеркалу. Кроме стекла тут электрика: цвет свечения, яркость, рассеиватель и то, чем свет включают.
Шесть шагов, пронумерованных подряд, от вида зеркала до того, как оно повесится на стену.

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

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

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

Замер цепляется к заказу тремя способами: по телефону, номеру кабинета или номеру заявки. В руках у замерщика может быть любой из них.
До пяти фотографий объекта. За день объектов несколько, и через неделю по памяти уже не разобрать, где какой.
Кто присутствовал на замере. Поле на будущее: когда размеры не сойдутся, разговор начнётся именно с него.
Замер лифта по семи буквам. Из таких замеров копится база, и по ней заранее видно, влезет ли стекло в два с половиной метра или его понесут на руках.
Замер предварительный и финишный. За месяц стройки стена может прирасти парой миллиметров штукатурки, и стекло уже не встаёт.
Бланк замера, снятый на телефон. Дальше его подтверждает заказчик, и спорить о размерах становится не с кем.
Лестницы и ограждения
Второй профессиональный калькулятор считает лестницы. Собирается по готовым пунктам: тип пролёта, крепление, геометрия, а размеры вносятся по ступеням.
Из любимого в этом проекте: сложную лестницу сначала делают из картона, примеряют на объекте и только потом изготавливают в стекле. Ошибка в стекле стоит дороже, чем весь картон.

Пролёт бывает маршевым или балюстрадным, и от этого зависит вся дальнейшая форма.
Типы лестниц показаны схемами. Нарисованы основные, в жизни их заметно больше.
Места остекления отмечают прямо на изометрии, по номерам. Так не спутаешь, какой участок считается.
Замер идёт либо по ступени с вылетом, либо по подступёнку. Величины разные, и путать их нельзя.
У каждой ступени своя высота и ширина, рядом галки крепления и шва. Стекло длиннее трёх метров не делают, поэтому на длинном марше шов неизбежен.
Бланк замера от руки. Лестницу словами не опишешь.
Чертёжное пространство
Самая профессиональная часть. Чертёжное пространство нужно, чтобы прямо на объекте, с планшета или ноутбука, начертить нестандартную форму с точностью до миллиметра и отправить её на производство.
Каждая операция задаётся числами, а не рисуется на глаз: у дуги радиус и хорда, у выреза отступы от угла, у пескоструйной линии толщина. Иначе станок такое не примет.

Вырезы. Каталог справа, параметры выбранного рядом с фигурой. Сверху красным висит предупреждение, что вырез не проходит по условиям размещения.

Линии пескоструем. Матовые полосы задаются отступом и толщиной линии, а не рисуются на глаз.

Дуги. Грань становится дугой по радиусу и хорде. Обратно в прямую одной кнопкой.

Покраска. Цвет по RAL с номером, область задаётся размерами и отступами от каждого края.

Пескоструй. Матовая область целиком, с отступами от четырёх краёв и кнопкой инвертировать.

Произвольные отверстия. Диаметр и отступы по X и Y. Сверху выравнивание, чтобы отверстия встали в ряд.
Менеджерская панель управления
Последний экран уже не калькулятор. Это панель, из которой менеджер ведёт производство, и своя админка у менеджеров была задолго до меня, лет десять. Работают в ней люди, которые помнят её наизусть, так что речь шла про доработку. Все нужные изменения она пережила ещё до моего прихода.
Здесь заказ уже не про выбор материала. Строка это позиция на производстве, с обработкой, закалкой, покрытием, упаковкой, весом и сроком. Отсюда заказ уходит в цех.

Расчёт назван по объекту и привязан к заказчику. У менеджера их десятки сразу.
Заказ поделён по комнатам. У каждой группы свой итог, вес и срок, и отгружается она отдельно.
В строке всё для производства: обработка, вырезы, закалка, покрытие, упаковка, вес, срок.
Иконки строки: скидка, вложение, ссылка на оплату этой позиции, ускорить, скопировать.
Каталог фурнитуры с фильтром по покрытию: хром, бронза, золото, чёрный.
Итог считается сразу в трёх величинах: деньги, метры с килограммами и дни.

