Кейс з розробки сайту інтернет-магазину теплових насосів HeatPumps
Тематика: Продаж теплових насосів та встановлення систем опалення для дому, забезпечення тепла в оселі.
Регіон: Латвія (можливо подальше масштабування на країни Європи).
Проблематика: розробка власного сайту стала актуальна та необхідна для масштабування бізнесу та залучення нових клієнтів.
Задачі: створення сайту інтернет-магазину на CMS WordPress, з розробкою структури та індивідуальним дизайном, забезпечення адаптивності сайту під мобільні пристрої.
- розробка структури сайту та концепту дизайну
- розробка онлайн-калькулятора для розрахунку потрібної потужності теплового насосу
- зручна та зрозуміла фільтрація товарів в каталозі
- розробка eCommerce проєкту на CMS WordPress з нуля
- адаптивна верстка сайту (мобільні пристрої, планшети, десктоп)
- реалізація двох мовних версій на сайті
- адаптація адміністративної панелі для зручного керування
- створення інструкції з користування сайтом
- підключення аналітики на сайт
Сайт був створений як інтернет-магазин, з можливістю оплати товарів безготівковим способом. На етапі розробки сайту онлайн-оплати не підключали, так як специфіка вибору продукції досить складна, зазвичай клієнту необхідна консультація щодо монтажу, точної вартості та характеристик.
Розробка онлайн-калькулятора на сайті
Онлайн – калькулятор було створено для зручності розрахування потужності теплового насосу, для цього клієнту потрібно зробити 3 кроки: обрати площу будинку, енергоефективність та натиснути на розрахунок потужності. Це допомагає клієнту простіше зорієнтуватися в виборі та самостійно розглянути варіанти теплових насосів на сайті, які можуть йому підійти.
Розробка Головної сторінки
Головною метою було розробити зручну структуру сайту. Головна сторінка має надати відвідувачам всю загальну інформацію про переваги компанії та про теплові насоси, що пропонуються, підкреслюючи їх переваги та функціональні можливості. Простий і зручний інтерфейс допомагає користувачам швидко орієнтуватися на сайті та отримувати необхідні дані.
Головна сторінка сайту структурована так, щоб максимально ефективно представити переваги компанії та продукції. Під головним банером розміщені інформаційні блоки, які коротко описують ключові переваги компанії. Ці блоки супроводжуються іконками, що візуально підкреслюють сильні сторони співпраці з компанією. Зокрема, наголошується на тому, що компанія є офіційним представником відомого бренду виробника теплових насосів в Латвії.
Основний акцент на головній сторінці зроблено на перевагах замовлення продукції саме у цієї компанії. Відвідувачі можуть ознайомитися з гарантіями, інформацією про партнерів та популярними товарами. Основний товар — тепловий насос — представлений у вигляді продаючого баннера, що підкреслює всі переваги покупки теплового обладнання.
В нижній частині сторінки розміщена контактна інформація та форма для безкоштовної консультації. Користувачі можуть залишити запит або питання, а також знайти основні контактні дані компанії, такі як телефон, адреса та електронна пошта.
Реалізація каталогу на сайті та фільтрації
Каталог теплових насосів представлений у вигляді списку товарів із зображеннями, короткими описами та цінами. Кожен товар має окрему картку, яка містить основну інформацію про продукт, а також можливість перейти на окрему внутрішню сторінку для отримання розгорнутої інформації. Всі товари впорядковані в логічній структурі, що дозволяє користувачам легко орієнтуватися в асортименті. Інтуїтивно зрозумілий інтерфейс каталогу сприяє зручному перегляду і вибору продукції.
Навігація по продукції. На сторінці передбачені фільтри, які дозволяють користувачам вибрати продукцію за певними параметрами, такими як виробник, потужність, тип насоса та вартість. Функція фільтрації дозволяє користувачам ефективно знаходити потрібні товари, що покращує загальний користувацький досвід.
Розробка сторінки товару
При розробці кожної сторінки товарів ми візуально підкреслювали переваги продукції: використовували іконки, які допомагають користувачам зручно і швидко побачити основні переваги, виробника, потужності, клас енергоефективності, температуру та інші характеристики які допоможуть зорієнтуватися потенційному клієнту для вибору товару.
Кнопки заклику до дії та форми на сайті
Для більш активного залучення клієнтів та фокусу на основних діях на сайті, ми впровадили такі кнопки заклику до дії:
- Кнопка з текстом “Learn more”: на головній сторінці перенаправляє відвідувачів на сторінку з детальною інформацією про теплові насоси.
- Запит на дзвінок: дозволяє швидко зв’язатися з компанією для отримання консультації.
- Кнопка В2В: для клієнтів, які бажають стати партнерами або купують техніку для бізнесу.
- Обрати модель насосу: на головній сторінці для легкого вибору теплових насосів.
- Форма безкоштовної консультації: для отримання експертної допомоги безкоштовно.
- Форма запиту на розрахунок: з можливістю завантажити свій проєкт для отримання точного розрахунку.
CMS: WordPress (WooCommerce)
Шрифти: Google Font API, Twitter Emoji (Twemoji)
JS-бібліотеки: LazySizes, jQuery UI, jQuery
Плагіни WordPress: WPMU DEV Smush, Contact Form 7, Polylang, Woocommerc
Аналітика: Google Analytics, GA4, Google Tag Manager
Оптимізація швидкості завантаження
Створення інструкції з користування сайтом
Для полегшення роботи з адміністрування сайтом для нашого клієнта та його менеджерів, ми підготували докладну інструкцію, яка включає базові моменти з управління. В ній містяться кроки, необхідні для адміністрування сайту: додавання нових товарів, зміни цін, створення акцій, перегляду оформлених замовлень та зміни статусу замовлень.
Результати
Сайт має чітку та логічну структуру, що дозволяє користувачам швидко знаходити необхідну інформацію. Використання якісних зображень та інтуїтивно зрозумілих іконок підвищує привабливість сторінки. Сторінка добре оптимізована для перегляду на різних пристроях, що забезпечує комфортне користування як на комп’ютерах, так і на мобільних пристроях.
Інтернет-магазин теплових насосів HeatPumps був успішно розроблений та впроваджений на платформі CMS WordPress. В процесі роботи ми реалізували всі побажання клієнта, врахували необхідність адаптивності, налаштували роботу сайту як торгового майданчика.