Закажите сайт по телефону 8-800-5555-864

Сайт фабрики «Брянский лес»: когда цветов как колец на спиле дерева

Заказчик: Брянский лес
Разработчик: Red Collar
Редакция CMS: UMI.CMS Lite , дополнительный модуль: Каталог
Сайт: b-les.com

О компании

«Плюс UMI.CMS в том, что она позволяет разработчику подстраивать работу стандартных модулей под свои задачи», — комментируют разработчики.

Фабрика «Брянский лес» располагается в Брянске и занимает два гектара земли, где более сотни рабочих каждый день создают эстетичные и качественные двери.

Специалисты работают на европейском оборудовании, используют только проверенные материалы и держат марку производства на уровне премиум-класса с 1995 года. У компании широкая география работы — сеть фирменных магазинов в Москве и многочисленные дилеры в регионах России.

Специалисты работают на европейском оборудовании

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

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

Создать сайт для такой компании — большая ответственность

Кто покупает двери

Целевая аудитория «Брянского леса» — мужчины и женщины от 25 лет, семейные пары, которые делают ремонт. Уровень достатка — средний и выше среднего. Плюс компания ориентирована на партнёрство с дизайнерами и архитекторами.

Компания ориентирована на партнёрство с дизайнерами и архитекторами

Зачем новый сайт

Свой первый сайт «Брянский лес» создал в 2014 году, попутно размещая каталоги продукции на сторонних сервисах. Сайт почти пятилетней давности был традиционным для того времени: блочные страницы без анимаций, статичные фотографии продукции, грубо и неудобно разделенные категории.

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

Уникальный запоминающийся сайт, чтобы догнать и перегнать конкурентовГлавная страница старого сайта «Брянский лес»

Задача

Основная задача нового сайта — представление компании и ее продукции. Он должен формировать имидж премиум-класса и повышать доверие к производителю.

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

Концепцию, которая выделяет компанию на рынке

Поиск лучшего решения

Структура сайта

Об удобстве посетителя сайта дизайнер думает ещё на этапе разработки User Flow — карты пути пользователя. Анализирует, какой представитель ЦА зайдет на сайт, что ему будет интересно и что он захочет найти — и создает структуру и дизайн под его задачи.

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

Подбери себе дверь всего за пять кликов!

Первое впечатление — самое важное

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

«

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

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

»

Владимир Лукашов,

 creative frontend developer,
Red Collar
Владимир Лукашов, Red Collar

Человек выбирает дверь

В каталоге сделали умный динамический фильтр, он максимально упростит процесс выбора модели — от материала до цвета двери:

  1. У каждой двери вокруг есть короб. Разработчики сделали так, что короб подбирается к цвету двери автоматически и оттенок не надо искать вручную.
  2. Цена модели меняется динамически при изменении параметров — пользователь сразу видит конечную стоимость комплекта.
  3. Все выбранные фильтры в каталоге прописываются в URL страницы, а значит вы можете сохранить или поделиться ссылкой на собранные вами двери.
  4. Есть подсказки, что ещё полезного можно найти у компании: раздвижные двери, плинтуса и стеновые панели.
  5. Когда вы меняете конфигурацию фильтра, новые модели появляются мгновенно. Для этого использовалась технология Ajax: запрос к серверу происходит без перезагрузки страницы.

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

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

«Умная» фильтрация товара

Фото интерьеров вдохновляют на покупку

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

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

Фото интерьеров вдохновляют на покупку

На чем строится сайт

«

Это большой и сложный проект. Весь функционал сайта «Брянский лес» сделан на базовых инструментах UMI.CMS с частичной кастомной модификацией модулей. И плюс платформы в том, что она позволяет разработчику подстраивать работу стандартных модулей под свои задачи

»

Богдан Лотарев,

 backend developer,
Red Collar
Богдан Лотарев, Red Collar

Что в итоге

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

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

Новый фирменный стиль компании Брянский лес

Всё это помогло компании подняться на новый уровень. Именно полноценная и тщательная работа, направленная как на внутренние процессы, так и на имидж, помогает компании вырасти по всем фронтам.

Награды

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

Проект взял серебро на Рейтинге Рунета 2018 в номинации "Мебель и интерьер"