Сайт-каталог для фабрики вхідних дверей — 700+ моделей

Подробиці проєкту

Кейс: створення сайту-каталогу для компанії з продажу дверей

Клієнт: ALLUM, фабрика вхідних і міжкімнатних дверей, Київ.
Сфера: власне виробництво і продаж дверей, шоу-рум і склад.
Що робили: сайт-каталог під ключ — бриф, структура, дизайн, верстка, програмування.
Сайт: dveri.1001-lead.agency
Реклама: не запускалася — у цьому проєкті наша робота закінчується на сайті.

Двері обирають очима і за ціною. Людина хоче побачити модель, зрозуміти, чи влізе вона в бюджет, і лише потім говорити з менеджером. Отже, сайту мало бути гарним — він має замінити першу розмову: показати моделі, відфільтрувати за грошима і стилем, назвати ціну і забрати контакт.

Етап 1: Бриф — що з'ясувати перед створенням сайту по дверях

Починаємо не з макета, а з розмови. Завдання брифа — витягнути те, що власник знає напам'ять і тому не вважає важливим. Зазвичай саме це й продає.

Розбираємо частинами:

• Продукт. З чого зроблені двері, яка сталь, який утеплювач, які замки, чим модель за 11 399 ₴ відрізняється від моделі за 21 900 ₴.
• Виробництво. Своє воно чи перепродаж. У ALLUM своє — це стало першим пунктом на першому екрані, бо знімає головний страх «а раптом перекупники».
• Заперечення. Що запитують найчастіше: терміни, розміри, встановлення, що робити зі старими дверима.
• Аудиторія. Хто купує: квартира чи приватний будинок, новобудова чи заміна старих дверей. Звідси поділ каталогу на «у квартиру» і «на вулицю».
• Конкуренти. Що показують вони і чого в них немає.

З брифа одразу вийшли чотири тези, які стоять на першому екрані: власне виробництво, розстрочка 0% до 6 місяців, 700+ моделей у наявності з доставкою за 30 хвилин, виготовлення нестандартних розмірів за 7 днів. Це не вигадані переваги — це відповіді на реальні запитання покупців.

Етап 2: Збір матеріалів і фото для каталогу дверей

Каталог на 700+ моделей неможливо зібрати «по ходу справи». До верстки потрібен весь масив даних, інакше на середині проєкту з'ясовується, що в половини моделей немає фото або ваги полотна.

• Фотографії. Кожна модель — у кількох ракурсах і в інтер'єрі, а не лише «двері на білому тлі». Людина приміряє двері до свого під'їзду і коридору.
• Характеристики. Розмір, товщина полотна, сталь, замки, утеплювач, вага, клас зламостійкості, вогнестійкість.
• Ціни. Основна, стара (для показу знижки) і платіж за розстрочкою.
• Кольори. Для кожної моделі — доступна палітра плюс варіант «будь-який колір».
• Додаткові послуги. Утеплення короба, заміна листа, заміна плівки, монтаж, нічна засувка — з цінами.

Матеріали приводимо до одного вигляду: однакові пропорції фото, єдиний порядок характеристик, один формат запису ціни. Без цього каталог виглядає як склейка з різних джерел, і довіри до нього немає.

Етап 3: Прототип сайту-каталогу дверей

Прототип — це креслення сайту без кольору і картинок. На ньому дешевше сперечатися: пересунути блок у прототипі коштує п'ять хвилин, у готовій верстці — день.

Що закладали:

• Порядок екранів. Офер → каталог → технології → візуалізація → замір → відгуки → шоу-рум → контакти. Спочатку те, за чим прийшли, потім аргументи.
• Структура каталогу. Два типи дверей і чотири цінові сегменти: економ, стандарт, преміум, люкс. Людина з бюджетом 10 000 ₴ і людина з бюджетом 25 000 ₴ ідуть різними шляхами.
• Картка моделі. Що видно одразу, що розкривається по кліку, де стоять кнопки.
• Точки захоплення. Де пропонуємо залишити контакт і що даємо взамін — на кожному екрані свій привід.

Прототип узгоджуємо до дизайну. Це єдиний етап, де правки майже нічого не коштують.

Етап 4: Дизайн сайту для фабрики дверей

Двері — товар про безпеку і надійність. Звідси темна гама, цегла і метал у тлі, червоний акцент на діях. Дизайн тут не прикраса, а спосіб сказати «це серйозно» до того, як людина прочитає перше слово.

• Товар великим планом. Фото дверей займає більшу частину картки. Усе інше — підпис до нього.
• Ціна читається першою. Нова ціна велика і червона, стара — закреслена поруч.
• Мітки-ярлики. «Топ продажів», «Акція», «Розстрочка 0%» — вони допомагають обрати тому, хто не розбирається у дверях.
• Одна кнопка на картці. «Детальніше» — не змушуємо вирішувати на етапі перегляду.

Етап 5: Розробка каталогу дверей із фільтром

Каталог на сотні позицій — це не набір сторінок, а система. Клієнт має додавати моделі сам, без програміста, інакше сайт застаріє за місяць.

• Моделі як записи в адмінці. Кожні двері — картка з полями: ціна, стара ціна, платіж, розміри, замки, вага, кольори, галерея. Додати модель — заповнити форму, а не кликати розробника.
• Фільтр за параметрами. Тип дверей, діапазон ціни повзунком, цінова категорія, стиль. Підбір іде без перезавантаження сторінки.
• Адаптив. Окреме опрацювання мобільної верстки: з телефона дивляться каталог лежачи на дивані, і там картка має читатися так само, як на десктопі.
• Швидкість. Стиснення зображень і відкладене завантаження — інакше каталог із сотнями фото відкривається вічність.
• Службові сторінки. Доставка і монтаж, оплата і розстрочка, портфоліо робіт, новини, співпраця для дилерів, контакти з картою.

Маркетингові інструменти конверсії на сайті з продажу дверей

Гарний сайт без механіки заявок — це візитівка. Ми закладаємо в сайт кілька різних способів залишити контакт, бо люди приходять на різній стадії вибору. Хтось готовий замовити сьогодні, хтось лише дивиться, і втрачати другого не можна.

• PDF-каталог як лід-магніт. «Закритий розпродаж зі знижками до 70%» — файл в обмін на телефон. Людина ще не готова купувати, але вже готова подивитися ціни. Каталог іде у Viber або Telegram, і листування починається саме.
• Дві кнопки в картці. «Замовити двері» — для готових. «Викликати замірника» — для тих, хто сумнівається: безкоштовний виїзд ні до чого не зобов'язує, а менеджер уже у квартирі клієнта.
• Безкоштовна 3D-візуалізація. Двері в інтер'єрі покупця. Привід залишити контакт для того, хто обирає між двома моделями.
• Розстрочка окремим блоком. Платіж на місяць показаний прямо в картці поруч із ціною. Двері за 11 399 ₴ і «1 899 ₴ на місяць» — різні за складністю рішення.
• Додаткові послуги в картці. Утеплення, заміна плівки, монтаж, засувка — середній чек зростає до того, як заявка пішла менеджеру.
• Месенджери замість форми. Viber і Telegram на видних місцях: частина людей не телефонує принципово.
• Шоу-рум і відгуки. Адреса, фотографії залу і відгуки покупців — для тих, кому треба помацати двері руками.

Усього на сайті дев'ять форм збору контактів, і вони не дублюють одна одну: у кожної свій привід і своя стадія готовності.

Результат: сайт-каталог для компанії з продажу дверей

Фабрика ALLUM отримала сайт-каталог, який працює як перший менеджер: показує 700+ моделей, фільтрує їх за грошима і стилем, називає ціну і платіж за розстрочкою та забирає контакт дев'ятьма різними способами.

• Каталог оновлює сам клієнт. Нова модель додається через адмінку за кілька хвилин.
• Заявка приходить із контекстом. Видно, яку модель дивилася людина і що вона обрала: замовлення, замір або каталог.
• Сайт готовий під рекламу. Структура і посадкові під кожен сегмент уже є — якщо фабрика вирішить запускати трафік, переробляти нічого не доведеться.

Рекламу в цьому проєкті не запускали, тому цифр за заявками тут немає. Кейс — про те, як збирається сайт-каталог, а не про рекламний результат.

Як ми це робили — покроково

Механіка, за якою зібраний цей проєкт, розібрана окремо:

• Сайт-каталог для продажу дверей: що в ньому має бути — бриф, збір матеріалів, фільтр, картка моделі та дев'ять форм збору контактів.