Сайт фабрики «Брянский лес»: когда цветов как колец на спиле дерева
Заказчик: Брянский лес
Разработчик: Red Collar
Редакция CMS: UMI.CMS Lite , дополнительный модуль: Каталог
Сайт: b-les.com
О компании
«Плюс UMI.CMS в том, что она позволяет разработчику подстраивать работу стандартных модулей под свои задачи», — комментируют разработчики.
Фабрика «Брянский лес» располагается в Брянске и занимает два гектара земли, где более сотни рабочих каждый день создают эстетичные и качественные двери.
Специалисты работают на европейском оборудовании, используют только проверенные материалы и держат марку производства на уровне премиум-класса с 1995 года. У компании широкая география работы — сеть фирменных магазинов в Москве и многочисленные дилеры в регионах России.
В «Брянском лесе» убеждены: качество превыше всего, поэтому максимум внимания уделяется контролю создания продукции. Каждый этап, от первоначальной обработки леса до выбраковки, происходит строго в соответствии с требованиями и стандартами производства.
Создать сайт для такой компании — большая ответственность и сложность, надо отразить высокий уровень в каждой мелочи сайта, правильно сформировать имидж и передать позиционирование.
Кто покупает двери
Целевая аудитория «Брянского леса» — мужчины и женщины от 25 лет, семейные пары, которые делают ремонт. Уровень достатка — средний и выше среднего. Плюс компания ориентирована на партнёрство с дизайнерами и архитекторами.
Зачем новый сайт
Свой первый сайт «Брянский лес» создал в 2014 году, попутно размещая каталоги продукции на сторонних сервисах. Сайт почти пятилетней давности был традиционным для того времени: блочные страницы без анимаций, статичные фотографии продукции, грубо и неудобно разделенные категории.
В 2017 году компания поняла, что уровень их сайта уже не соответствует ни имиджу, ни уровню компетенций. Что для привлечения желаемых клиентов следует обновить образ и позиционировать себя в премиум-сегменте. Нужен был уникальный запоминающийся сайт, чтобы догнать и перегнать конкурентов.
Главная страница старого сайта «Брянский лес»
Задача
Основная задача нового сайта — представление компании и ее продукции. Он должен формировать имидж премиум-класса и повышать доверие к производителю.
Для этого агентству предстояло разработать уникальную концепцию, которая выделит компанию на рынке. А также показать многообразие и ценовой ряд товаров с помощью удобного каталога продукции.
Поиск лучшего решения
Структура сайта
Об удобстве посетителя сайта дизайнер думает ещё на этапе разработки User Flow — карты пути пользователя. Анализирует, какой представитель ЦА зайдет на сайт, что ему будет интересно и что он захочет найти — и создает структуру и дизайн под его задачи.
Здесь важно минимизировать количество кликов на сайте — чтобы всё было очевидно и понятно, а пользователь доходил до желаемого действия как можно быстрее. Например, найти каталог дверей можно в один клик, подобрать лучшую для себя дверь — за пять кликов.
Первое впечатление — самое важное
На приветственном слайде решили обе задачи сайта: сделали обзор основных коллекций дверей через необычный интерактив — спил дерева. Таким образом, показали большой ассортимент продукции, разнообразие цветов и объединили с имиджевым решением. Переключение между коллекциями происходит через интерактивные годовые кольца.
Мы искали формат работы с изображением в браузере, который даст самую четкую картинку и при этом не потеряет качества на любом разрешении экрана. Сначала между цветами колец делали переходы на CSS, но при увеличении размера края маски размывались — на больших экранах всё становилось нечетким, поэтому перешли на SVG и решили задачу с качеством и оптимизацией иллюстраций лучшим образом.
Сделали интересное для пользователя взаимодействие: когда проводишь курсором по кольцам, любое из колец активирует анимацию на соседних элементах, от чего они съезжаются или разъезжаются и появляется приятная физическая волна. Действительно приятный сайт, который, как и бренд, запомнится человеку надолго — состоит как раз их таких мелочей
»Владимир Лукашов,
creative frontend developer,Red Collar
Человек выбирает дверь
В каталоге сделали умный динамический фильтр, он максимально упростит процесс выбора модели — от материала до цвета двери:
- У каждой двери вокруг есть короб. Разработчики сделали так, что короб подбирается к цвету двери автоматически и оттенок не надо искать вручную.
- Цена модели меняется динамически при изменении параметров — пользователь сразу видит конечную стоимость комплекта.
- Все выбранные фильтры в каталоге прописываются в URL страницы, а значит вы можете сохранить или поделиться ссылкой на собранные вами двери.
- Есть подсказки, что ещё полезного можно найти у компании: раздвижные двери, плинтуса и стеновые панели.
- Когда вы меняете конфигурацию фильтра, новые модели появляются мгновенно. Для этого использовалась технология Ajax: запрос к серверу происходит без перезагрузки страницы.
Для карточки товара придумали оригинальное имиджевое решение, которое стало отличительной чертой каталога: дверь уже при открытии страницы занимает бОльшую часть экрана, что позволяет покрутить её и рассмотреть во всех деталях без единого клика и без использования скролла — только перемещением курсора.
Для удобства выбора товара в каталоге спроектировали «умную» фильтрацию. Товары фильтруются пошагово, и результаты каждого следующего шага перестраиваются в зависимости от предыдущего фильтра. А названия самих фильтров обозначаются не только текстом, но и «говорящими» иконками.
Фото интерьеров вдохновляют на покупку
Отобрали самые эстетичные фотографии реальных интерьеров с продукцией «Брянского леса» и поместили в раздел «Двери в интерьере». Так пользователь понимает, как выглядит вещь в реальной жизни, и вдохновляется на покупку.
Чтобы помочь перейти в каталог, сделали перелинковку и возможность попасть туда прямо из раздела: та дверь, что использовалась в интерьере, ведет на карточку идентичной модели.
На чем строится сайт
Это большой и сложный проект. Весь функционал сайта «Брянский лес» сделан на базовых инструментах UMI.CMS с частичной кастомной модификацией модулей. И плюс платформы в том, что она позволяет разработчику подстраивать работу стандартных модулей под свои задачи
»Богдан Лотарев,
backend developer,Red Collar
Что в итоге
Тесное сотрудничество с клиентом позволило сделать тщательно продуманный сайт с полноценным каталогом продукции. Это корпоративный и одновременно имиджевый сайт с эстетичными деталями, воплощенный с помощью современных технологий разработки.
Чтобы имидж компании был един и верно подан, параллельно с разработкой сайта Red Collar создали заказчику новый логотип: сделали его природным и эстетичным, изящно свернув ветку дуба в букву «Б». А также разработали фирменный стиль, вплоть до бейджей и формы работников брендовых магазинов.
Всё это помогло компании подняться на новый уровень. Именно полноценная и тщательная работа, направленная как на внутренние процессы, так и на имидж, помогает компании вырасти по всем фронтам.
Награды
Проект взял серебро на Рейтинге Рунета 2018 в номинации «Мебель и интерьер», чем доказал высокий уровень качества исполнения и решения поставленных задач.
