EVA-килимки купують під конкретне авто, тож сайту виробника замало гарних фото — він має допомогти знайти свою модель і зібрати комплект. На прикладі EVACraftAuto розповідаю, як я зробив лендінг із підбором за маркою, моделлю та роком, конструктором килимка, комплектами з цінами й формами заявок.
Про компанію та завдання
EVACraftAuto — український виробник автомобільних килимків з EVA-матеріалу. Компанія працює у Львові й відправляє замовлення по всій Україні. Килимки виготовляють за оригінальними лекалами для кожної моделі авто за 1–2 дні, а до них можна замовити підп’ятники різної форми й шильди з логотипом марки. На сайті компанія пише про 3500+ моделей авто і 150+ варіантів виконання для однієї машини.
EVA-килимок добирають під конкретний автомобіль, тому в покупця завжди три запитання: чи є лекала для моєї машини, скільки коштує комплект і як він виглядатиме в салоні. Лендінг мав відповідати на них без дзвінка, тож у центрі сторінки — підбір за автомобілем і конструктор килимка. Решта блоків іде в тому порядку, у якому виникають запитання: чому вам можна довіряти, скільки це коштує, чи є моя машина, яким буде мій килимок і що станеться після замовлення.
Шапка, перший екран і аргументи виробника
Шапка — біла панель із заокругленими краями поверх першого екрана: логотип, меню «Каталог», «Переваги», «Наші роботи», «Співпраця», «Контакти», «FAQ», іконки Telegram і Viber та жовта кнопка з номером телефону. Під нею — затемнене фото EVA-килимка в салоні, заголовок «Автомобільні килимки нового покоління», назва бренду жовтим і підпис «Виробник автомобільних килимків із EVA матеріалу». Кнопка одна — «Конструктор»: вона одразу веде до найкориснішого інструмента сторінки.
Далі лендінг відповідає на запитання «чому саме ви». Блок «Чому варто обрати EVACraftAuto?» — шість карток із жовтими іконками:
- індивідуальні лекала для будь-якого авто;
- матеріал, який не вбирає вологу, стійкий до зношування й легко миється;
- виготовлення на замовлення за 1–2 дні;
- понад 13 кольорів основи та 15 варіантів кольору канту;
- підп’ятники різної форми й шильди з логотипом авто;
- доставка по всій Україні.
За ним — блок «Про нас» на темному фото салону з трьома пронумерованими фотокартками «Чому ми?» та інфографіка «Перевага автокилимків EvaCraftAuto»: навколо комплекту килимків дугою розставлено сім переваг — від екологічного матеріалу й оригінальних кріплень до 3500+ моделей авто та лазерного крою. Темні графітові секції чергуються на сторінці зі світлими кремовими, а фірмовий жовтий виділяє кнопки, ціни й вибрані варіанти.
Шість комплектів із цінами
Блок «Комплекти» відповідає на запитання про ціну ще до розмови з менеджером. У кожній із шести карток — ціна в гривнях у жовтій рамці, вигляд автомобіля згори, де жовтим підсвічено килимки з комплекту, кругла вставка з фактурою матеріалу та список складу:
- Basic — 1 350 грн: будь-який ряд легкового авто;
- Багажник — 1 590 грн: килимок у багажник і система липучок;
- Comfort — 1 990 грн: два передні й два задні килимки, перемичка на тунель, оригінальні кріплення та липучки до підлоги;
- Style — 2 900 грн: усе з Comfort, а ще чотири шильдики з логотипом авто й металевий підп’ятник;
- Comfort Plus — 3 430 грн: склад Comfort і килимок у багажник;
- Elite — 4 340 грн: передні й задні килимки, перемичка, кріплення та липучки, чотири шильдики й металевий підп’ятник.
Схема машини працює швидше за будь-який список: покупець за секунду бачить, які зони салону закриє комплект.
Підбір за маркою, моделлю та роком
Перше, що хоче знати власник машини, — чи є лекала для його авто. Тому підбір за автомобілем стоїть окремим блоком безпосередньо перед конструктором і складається з трьох кроків:
- марка — випадний список «Оберіть бренд» і сітка плиток із логотипами й назвами марок; спершу видно чотири ряди, решту відкриває кнопка «Показати більше»;
- модель і рік випуску — два випадні списки в один рядок;
- кнопка «Очистити пошук» скидає вибір, якщо потрібно підібрати килимки для іншої машини.
Логотип упізнають швидше, ніж назву в довгому списку, тому сітка марок — найкоротший шлях до своєї машини. А тих, хто не знайшов своєї моделі, сторінка не відпускає: одразу після конструктора стоїть темна картка «Не знайшли свій автомобіль?» з полями «Телефон», «Ім’я» та «Опис», кнопкою «Надіслати» й машиною під жовтим чохлом.
Конструктор EVA-килимків
Конструктор — головний інструмент лендінгу: він замінює довге листування про те, яким буде килимок. Ліворуч — велике зображення килимка: на скриншоті він жовтий, з фактурою «ромб», саме як вибрано в налаштуваннях праворуч. Під ним — три фото готових килимків у салонах і чесне застереження: фото універсальне, ви отримаєте килимки під конфігурацію саме вашого авто, а колір на екрані може трохи відрізнятися.
Праворуч — картки з параметрами, і поруч із назвою кожного в жовтій рамці виводиться поточний вибір: «Перший, другий ряди», «Ромб», «Жовтий», «Чорний». Покупець обирає:
- комплектацію — чотири іконки автомобіля згори з підсвіченими рядами та ціною: 1 350, 1 990, 3 430 і 1 590 грн;
- тип матеріалу — зразки фактур у кружечках, серед них «ромб» і «соти»;
- колір килимка — 13 зразків із фактурою матеріалу;
- колір канту — окрема палітра у два ряди;
- шильд із маркою авто — зображення шильда й випадний список;
- підп’ятник — один із трьох на вибір: EVA (безкоштовно), квадратний або фігурний.
Унизу — блок «Загальна сума» з підсумком і жовта кнопка «Замовити комплект». Покупець збирає килимок сам, бачить, що вийде, і приходить до замовлення з готовим рішенням — менеджерові лишається уточнити деталі телефоном.
Етапи роботи, фото робіт і «до/після»
Замовити простіше, коли зрозуміло, що буде далі, і видно справжні роботи:
- «Як ми працюємо?» — чотири картки зі стрілками: вибір комплекту або заявка на сайті, дзвінок менеджера протягом 30 хвилин, виготовлення за 1–2 робочі дні й доставка Новою поштою;
- «Наші роботи» — слайдер фото килимків у салонах із підписами моделей, від BMW X5 до Mazda CX-5; активний слайд ширший за сусідні, гортати можна стрілками й крапками;
- «До/після» — слайдер порівняння: жовтий повзунок ділить кадр на старий текстильний килимок і новий EVA-килимок у тому самому салоні, а стрілки й крапки перемикають пари фото;
- «Бажаєте придбати килимки вигідно?» — форма персональної пропозиції на тлі темного салону: телефон та ім’я.
Часті запитання й контакти
Останні сумніви перед замовленням лендінг розвіює в блоці «Поширені запитання» — акордеоні із семи запитань: гарантія, що робити, якщо килимки не підійшли, термін служби, запах, гіпоалергенність EVA, міцність матеріалу і як укладати килимок. Відповідь розгортається після натискання жовтої кнопки з плюсом. Наприклад, про запах: нові килимки можуть пахнути, але запах вивітрюється за 2–3 дні й не повертається навіть у спеку.
Наприкінці сторінки — контакти: телефон, місто й пошта на тлі мапи світу та форма з полями «Ім’я», «Пошта», «Тема», «Повідомлення» й кнопкою «Надіслати повідомлення».
Що важливо в сайті виробника автокилимків
Автокилимки мають величезну кількість варіантів: марка, модель, рік, комплектація, матеріал, два кольори й аксесуари. З досвіду цього проєкту, сайт такого виробника продає, коли:
- підбір за автомобілем на видноті — покупець спершу перевіряє, чи є його машина, і лише потім дивиться на ціни;
- ціни видно одразу — готові комплекти закривають запитання «скільки це коштує»;
- є конструктор — людина сама збирає килимок і бачить результат, а не описує його словами в месенджері;
- фото справжніх робіт підписані моделями авто — власник Tucson шукає очима свій Tucson;
- порівняння «до/після» показує різницю з текстильним килимком наочніше за будь-який опис;
- для нестандартних випадків є коротка форма — «не знайшов своєї машини» не має означати «пішов до конкурента».
Якщо ви виробляєте автоаксесуари чи інший товар «під розмір», продумайте заздалегідь, які параметри обирає покупець, у якому порядку і що він має побачити до замовлення. Тоді лендінг із конструктором і підбором за авто стане не вітриною, а інструментом продажу.
Деталі проєкту
Тип проєктулендінг із конструктором замовлення
КатегоріяЛендінг
ТехнологіїHTML5, CSS3, JavaScript
Рольрозробка лендінгу: верстка сторінки, підбір за маркою, моделлю та роком, конструктор килимка, слайдери, акордеон і форми заявок
КлієнтEVACraftAuto
КраїнаУкраїна
Що зроблено
- Вибудував порядок блоків лендінгу за запитаннями покупця — від першого екрана до замовлення
- Зверстав перший екран із кнопкою «Конструктор» і шапку з меню, Telegram, Viber і телефоном
- Зверстав блоки переваг: шість карток «Чому варто обрати», «Про нас» та інфографіку EVA-килимків
- Зібрав шість карток комплектів із ціною, схемою авто та складом
- Зробив підбір за авто: сітку логотипів марок із «Показати більше», вибір моделі й року, скидання пошуку
- Зібрав конструктор EVA-килимків: комплектація, тип матеріалу, колір килимка й канту, шильд, підп’ятник і загальна сума
- Зробив слайдер «Наші роботи» та слайдер порівняння «До/після»
- Зверстав етапи роботи, акордеон частих запитань і контакти
- Зробив три форми заявок: «Не знайшли свій автомобіль?», персональна пропозиція та форма в контактах
Результат
- Лендінг виробника EVA-килимків, який веде від першого екрана до замовлення комплекту
- Підбір за маркою, моделлю та роком і конструктор килимка із загальною сумою
- Шість комплектів із цінами та складом — ціну видно до дзвінка
- Фото робіт із моделями авто, порівняння «до/після» й відповіді на часті запитання
- Три форми заявок, зокрема для тих, хто не знайшов свого авто
Переглянути сайт проєкту