Сайт под ключ завода производителя мебели на заказ

Предпроектная аналитика

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

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

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

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

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

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

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

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

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

Прототипы сайта и каталога

Проект был объёмным и сложным как с точки зрения функционала, так и организации структуры и навигации на сайте.

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

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

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

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

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

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

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

Дизайн сайта мебельного завода

Так как требовалось перейти из бюджетного в более высокий ценовой сегмент, стандартный шаблонный дизайн был неприемлем. WebValley Studio специализируется на уникальных сайтах с привлекательным дизайном, поэтому для команды студии этот проект был особенно интересным и вдохновляющим. Мы применили стиль минимализм, большое количество свободного пространства и сделали акцент на продуктах компании. Элитная мебель красива сама по себе. Задача дизайнера — представить её таким образом, чтобы впечатлить клиента и вызвать у него желание приобрести товар. Поэтому в проекте использованы шикарные фотографии и рендеры, без излишних декоративных элементов.

У ЛМЗ был брендбук с цветовой палитрой и шрифтом, но недостаточно проработанный. Основной фирменный цвет — ярко-зелёный — выглядел дёшево, поэтому мы предложили выбрать более глубокий, солидный оттенок зелёного и добавить к нему дополнительный цвет, гармонирующий с основным. Таким цветом стал приглушённый оранжевый — спокойный, благородный оттенок, который не раздражает глаз.

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

Шрифт Inter — простой и элегантный, легко читается и подходит для заголовков
и основного текста. Он доступен для коммерческого использования.

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

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

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

Для проекта были выбраны иконки в едином стиле — с плавными линями
и закруглёнными углами.

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

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

К примеру, альтернативные варианты блоков с формой и УТП:

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

Разработка сайта мебельной компании

Сайт создан с использованием чистого кода и натяжкой на CMS 1С-Битрикс Аспро.
В процессе разработки была создана административная панель, позволяющая заказчику самостоятельно вносить изменения в тексты, редактировать фото- и видеоконтент,
а также добавлять новые товары, новости и статьи. Административная панель также является выгодным вложением в будущее продвижение, поскольку значительно ускоряет процесс внесения правок и создания новых страниц на сайте.

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

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

Дизайнерская фишка сайта — оригинальные стрелки для слайдеров, залипающие на курсор мыши: