Разработка сайта компании Torex

Редизайн был связан с обновлением оформления салонов производителя. Мы использовали фирменные цвета компании, при этом сайт был достаточно сложным по функционалу, поэтому было решено сделать дизайн современным и лаконичным.

Конструктор упрощает выбор товара для дилеров и B2C-клиентов, позволяя быстро найти дверь по определенному набору параметров:

• серии;
• рисунку внутренней и внешней отделки;
• цвету внутренней и внешней отделки;
• фурнитуре;
• стороне петель;
• размеру;
• цене.

«Торекс» производит более миллиона вариантов дверей, конфигуратор позволяет быстро выбрать параметры и визуально оценить, как товар будет выглядеть.

Интеграция с «1С» дает возможность работать с остатками дилеров — покупатели видят, какой товар есть в наличии и в каком магазине.

Комментарий эксперта:

Роман Цветков

руководитель проекта

«Для клиентов важна визуализация: отделка, рисунок, разрезы, раскладки начинок, возможность посмотреть в готовом или собственном интерьере. Мы все это учли.»

Техническая сторона разработки:

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

Скорость работы продукта, универсальность использования на различных устройствах обеспечил фронтальный фреймворк Vue.js.

Комментарий эксперта:

Андрей Попов

Тимлид разработки

«Конфигуратор из пользовательского инструмента превратился в инструмент продаж в салонах, где на большом тачскрине выводился конфигуратор, и клиент мог собрать дверь. Модуль визуализации двери оказался настолько универсальным, что его добавили в карточки товаров. Пользователь мог увидеть изображение двери, выбирая нужные параметры, даже если ее не было в каталоге.»

Работа с отзывами занимает особое место, так как большинство из них относится именно к дилерам, поэтому нам нужно было выстроить следующий алгоритм:

1. Дилер / завод получает отзыв.
2. В личном кабинете необходимо дать ответ/решить проблему клиента.
3. Отзыв публикуется на сайте с официальным ответом.

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

• преимущества каждого продукта;
• особенности каждой модели с точки зрения производства и эксплуатации.

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

Для принятия решения покупателю важно увидеть товар в готовом интерьере/экстерьере. Мы внедрили такой функционал. При этом посетитель сайта может загрузить свой интерьер и оценить, как в него впишется та или иная дверь.

Наложение на свой интерьер — одна из составных частей модуля визуализации конфигуратора. Пользователь фотографирует интерьер, если он пользуется сайтом с мобильного устройства, или загружает изображение с десктопа. Далее с использованием Three.js в качестве сцены накладываем это изображение в качестве фона и добавляем ранее отрендеренный рисунок, как 3D-модель.

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

Пользователь получает готовое фото интерьера — дверь встает ровно в проем.

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

• Стимулирование спроса на отдельные модели.
• Качество рекламных материалов. Зачастую оно страдало из-за большого объема.
• Отсутствие единого механизма анонсирования новинок.
• Отсутствие аналитики по вовлечению посетителей в акции.
• Работа с текущей аудиторией;
• Высокая стоимость поддержки рекламных акций на сайте.

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

Мы сформировали:

• единый центр управления акциями без необходимости добавлять промо-материалы для каждого товара вручную;
• единую структуру таргетинга акций.

Комментарий эксперта:

Роман Цветков

руководитель проекта

«Есть много регионов, в которых цены на двери отличаются из-за разной стоимости логистики. Мы разработали систему, которая позволяет выводить новые цены на сайтах производителя и дилеров только после согласования с заводом.»

При планировании сайта мы учли максимальное количество факторов:

• сильные и слабые стороны конкурентов;
• бизнес-цели;
• критерии выбора продукции;
• структуру спроса в поисковых сетях;
• путь клиента и барьеры при покупке;
• особенности товарного ассортимента;
• брендбук;
• требования к контенту;
• позиционирование и т. д.

Комментарий эксперта:

Роман Цветков

руководитель проекта

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

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

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

• B2B — помощь с выбором, максимальная визуализация, донесение позиционирования.
• B2B — удобная IT-экосистема для роста продаж.
• C2C — возможность делиться и рекомендовать.
• C2B — сбор обратной связи и из предпочтения пользователей.

Уникальный функционал. Чтобы сделать сайт мы 3,5 месяца писали систему, которая позволила централизовать ассортимент и выгрузить весь каталог, то есть более 100 000 уникальных сочетаний цветов, отделок, моделей. Систему используют более 500 дилеров для заказа товаров в свои магазины со складов завода.

В результате после проектирования, разработки прототипов, дизайна и верстки мы сделали сайт, который позволяет без лишних кликов выбрать именно свою дверь.