От PDF к интерактивной витрине: как мы пересобрали продажи для QBIK — лидера рынка ивент-конструкций

QBIK — лидер в производстве модульных деревянных конструкций и организации масштабных мероприятий в России. Компания создает пространства для фестивалей, выставок, ярмарок и праздников для топовых брендов: Самокат, Парк Горького, Сбер, Авито и др.

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

→ → → Сперва QBIK обратились к нам за SEO-продвижением.

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

→ → → В итоге совместно с клиентом приняли решение полностью обновить официальный сайт. Перед нами стояли четыре ключевые задачи:

1. Сделать сайт максимально удобным для пользователей;

2. Подчеркнуть адаптивность и гибкость компании;

3. Наглядно показать масштаб проектов QBIK;

4. Увеличить органический трафик из поисковых систем.

Совместно с заказчиком мы решили, что нужно создать платформу, на которой будут полноценный интернет-магазин, 3D-конфигуратор, страницы услуг и полноценное портфолио QBIK.

На данный момент мы уже:

• Создали сайт QBIK с функционалом интернет-магазина;

• Проработали страницы услуг;

• Оцифровали большую часть каталогов заказчика;

• Создали отдельные страницы товаров по большим категориям;

• Создали внутри сайта лендинги об ивентах QBIK;

• Собрали портфолио компании;

• Создали 3D-конфигуратор;

• Оптимизировали структуру сайта;

• Реализовали SEO-рекомендации для всех новых страниц;

Так сайт выглядел до нашей работы:

А так по результатам нашего редизайна:

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

Проблема №1: слабая SEO-оптимизация сайта QBIK. Поисковые системы отдают предпочтение ресурсам с высокими поведенческими метриками, а не просто с большим объемом контента.

​Проблема №2: архитектурная запутанность. Пользователи терялись в навигации, не могли быстро найти нужный каталог или просмотреть ассортимент.

Нам нужно было кардинально реструктурировать сайт, чтобы улучшить UX/UI — и через это устранить обе проблемы.

→ → → Мы решили полностью пересобрать архитектуру сайта.

Чтобы сайт не потерял SEO-вес, мы оставили часть SEO-страниц. «Под нож» же пошли:

• Дублирующие друг друга страницы. Например, в старой версии сайта одновременно существовали страницы «Выставочные модули», «Выставочные модули для фестиваля», «Фестивальные модули» и «Выставочные модули для презентаций», содержащие идентичные товары.

• Страницы с непопулярными запросами. Например, запросы «аренда ресепшн» исчисляются не сотнями и тысячами, а десятками и не являются релевантными для клиента.

• Страницы малых категорий. Далеко не все категории были нужны. Например, в разделе «Ярмарки» была подкатегория «Прилавки», и внутри неё было три страницы с прилавками разных размеров. Чтобы читатель в будущем мог найти товары таких категорий, мы встроили их прямо в каталог товаров.

Раньше весь огромный ассортимент QBIK «прятался» в PDF-файлах. Команда создавала PDF-каталоги, прикрепляла их к страницам и периодически обновляла.

От этого было тяжело всем. Команде приходилось постоянно обновлять PDF. Потенциальный покупатель с трудом ориентировался в каталогах. А компании было сложно продавать кастом — прописать все опции в каталоге было невозможно.

→ → → Мы сделали понятный каталог на сайте и упростили процессы.

Оцифровали и актуализировали большую информацию о товарах. Вывели её на страницу каталога.

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

Мы использовали разные приёмы для фокуса внимания пользователя на результате работы QBIK.

→ → → На первом экране — максимум ключевой информации без визуального шума.

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

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

→ → → Добавили на сайт микроанимации, чтобы оживить интерфейс и привлечь внимание к ключевым элементам

Например, когда человек наводит мышку на карточку товара, то та «поднимается», а на фоне меняется цвет:

Или, например, на странице портфолио при наведении на строку конкретного проекта — строка меняет цвет, а маленькая иллюстрация увеличивается, закрывая соседние строки.

→ → → Интегрировали проекты QBIK во все ключевые разделы сайта

Проекты QBIK — это крупные фестивали и коллаборации с топовыми брендами, поэтому для формирования доверия к компании мы сразу показываем эту информация посетителям.

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

А вот в случае с катками применили иной подход. У QBIK огромный опыт по решениям в этом направлении — нам важно было показать масштаб портфолио. Поэтому в этом разделе мы сразу показываем их количество.

→ → → Наглядно показываем продукцию QBIK

Каждая страница сочетает рендеры товаров и реальные фото с мероприятий. Так посетитель сразу видит, как конструкция выглядит вживую и как её применить на своем ивенте. Например, теперь страница парковых павильонов на 60% состоит из фотографий — мы используем их в разделе с портфолио, и, конечно, в карточках товаров.

→ → → Демонстрируем масштаб работы QBIK

Например, на лендинге про каток мы показали, как клиент может спланировать и выстроить весь объект. Это помогает найти общий язык с теми, кто хочет заказать масштабный проект для конкретного объекта. Людям проще выбрать одного подрядчика и получить решение под ключ, а не привлекать десяток разных компаний — так что мы сразу показываем такую возможность при работе с QBIK.

Добавили в такие элементы анимации и реальные фотографии объектов QBIK.

→ → → Показываем рендеры товаров и товары вживую

Сами по себе рендеры на сайте показываем «чистыми» — техническими, сохраняющими лаконичность и минимализм. Но, когда пользователь наводит на них курсор — он видит уже реальную фотографию объектов.

→ → → Добавляем больше жизни через атмосферные видео-ролики

Клиент понимает, насколько важен визуал и правильная презентация работы — поэтому мы добавили на сайт ролики, в которых таймлапсом показывается возведение объектов командой QBIK.

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

Также ранее сайт был монолитным на 1С-Битрикс, но новые страницы мы реализовали на React+Next и таким образом постепенно переводим весь сайт в формат SPA. Благодаря этому нам удалось качественно увеличить скорость работы и загрузки сайта — теперь время загрузки DOM сократилось до 1,8 с, что соответствует стандарту Google «хорошо» по Core Web Vitals (LCP).

→ → → Решили две главные проблемы прошлого каталога товаров и услуг QBIK:

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

Компания предлагает много вариантов своим покупателям:

• QBIK может кастомизировать любой товар;

• Этот товар могут предоставить в аренду или продать;

• У QBIK можно купить услугу установки и услугу демонтажа.

Но это многообразие не получалось отразить в PDF-каталогах. В итоге цены выглядели так:

Проблема 2. Цена «от…» на товары и услуги QBIK. А это всегда мощный барьер для принятия решения покупателем.

Если пользователю трудно оценить бюджет, его первое желание — найти «что-то попроще». Он просто уйдёт с сайта, даже если компания может лучше выполнить его запрос.

→ → → Наше решение этих 2 проблем на новом сайте QBIK.

Вот так теперь выглядит каталог и карточки товаров и услуг QBIK:

Теперь пользователь получает сразу все детали стоимости товаров. Он видит все возможности:

• Сбор своей комплектации из множества элементов (полноценный конструктор);

• Покраску модуля или его элементов в нужный цвет;

• Форматы аренды под разные сроки;

• Форматы покупки.

Описания мы сделали максимально лаконичными: в тексте прописываем характеристики и комплектацию товаров. Всё остальное пользователь сам увидит на интерактивной 3D-модели.

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

Всё это радикально упрощает принятие решения — и посетитель с большей вероятностью совершит покупку.

→ → → Заказывать товары «под ключ» в B2B обычно сложно.

Если посетитель не нашёл для себя подходящий товар, ему нужно:

• составить ТЗ;

• найти потенциальных подрядчиков;

• выслать им ТЗ;

• ответить на вопросы;

• получить смету;

• выбрать подрядчика;

• ещё 2 недели отмахиваться от менеджеров других подрядчиков, пытающихся продать свои решения.

→ → → Мы радикально упростили процесс с помощью конфигуратора

Теперь на сайте QBIK пользователь может зайти в 3D-конфигуратор и собрать то, что решит его задачу. Вот как это происходит.

В шапке сайта справа есть кнопка «Собери QBIK». Она сделана максимально яркой и показывает, что у компании есть кастомные решения.

При нажатии на кнопку пользователь попадает на страницу с товарами, которые можно собрать под себя — боксы, павильоны, амбары, призмы, комплекты для пикника, лавки и даже указатели.

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

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

В самом конфигураторе можно выбрать любые детали:

• фартук,

• фриз,

• стены,

• крышу,

• отопление,

• освещение,

• заглушки на столбы,

• распорки,

• окна и двери,

• бетонные блоки,

• рольставни,

• защиту от дождя.

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

Вся эта механика радикально упрощает процесс заказа — а заодно демонстрирует возможности индивидуализации решений QBIK. Это существенно повышает доверие к бренду.

Но на создании самого конфигуратора мы не остановились — предусмотрели возможность скорректировать готовый заказ.

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

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

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

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

Всё это было сложно в реализации и ни одно решение не вписывалось в ограниченный бюджет.

→ → → Поэтому мы «пересобрали» работу самого конфигуратора.

Теперь, когда пользователь собирает свою конфигурацию, он формирует уникальный URL. В этом URL «зашиты» все параметры конфигурации — основа, все детали и их цвета, даже надписи на меловых досках.

Так, в самом начале вы выбираете «основу» кастомного товара — и это сразу прописывается в ссылке.

Вместо https://qbik.ru/shop-qbik вы получаете, например, https://qbik.ru/shop-qbik/qbik-box-3x3/

Если вы добавите задние стены, ссылка вновь обновится — https://qbik.ru/shop-qbik/qbik-box-3x3/?configurator=%5B%7B"code"%3A"стены_задние_из_фанеры"%2C"count"%3A1%7D%5D

Что интересно — такая ссылка действует вообще для всех. Вы можете перейти по ней прямо сейчас — и в вашем конфигураторе уже будет QBIK BOX 3×3 с задними стенами.

Это позволяет удобно делиться собранным кьюбиком со своими коллегами и руководством.

Ссылка работает даже в режиме инкогнито — сборка полностью восстанавливается

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

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

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

В результате нашей совместной с клиентом работы сайт QBIK превратился в интерактивный онлайн-магазин с 3D-конфигуратором, каталогом товаров, портфолио и страницами услуг. Переход с монолитного 1С-Битрикс на React + Next.js сделал его SPA-приложением с значительно повышенной скоростью загрузки — 1,8 секунд (стандарт Google «хорошо» по Core Web Vitals (LCP

Сайт закрывает все задачи, поставленные на старте работы:

✔️ Время, которое пользователи проводят на сайте, выросло на 61%, а глубина просмотра — на 99% благодаря SEO-оптимизации, поведенческим улучшениям и новой архитектуре. Кроме того, процент отказов снизился на 5%. Такое улучшение поведенческих метрик позитивно влияет на ранжирование в поисковиках.

✔️ Удобства для пользователей достигли за счет упрощенной навигации (убраны дубликаты и мелкие категории), микроанимаций и логичной структуры — пользователи теперь находят каталог и товары за 1–2 клика.

✔️ Адаптивность подчеркнули через 3D-конфигуратор с уникальными URL для кастомных сборок, демонстрацию масштаба (объем портфолио) и реальные фото/видео на всех страницах.

✔️ Масштаб проектов показан интегрированно — в карточках товаров, лендингах и конфигураторе, с таймлапс-видео возведения объектов.

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