™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_0
Назад

Інтернет-магазин Automoil

™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_1
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_2
Automoil: гібридна B2B/B2C платформа для продажу автохімії з інструментами підвищення середнього чеку

Ринок автохімії та детейлінгу перенасичений, а покупцеві часто важко зорієнтуватися серед тисяч схожих засобів. Компанія Automoil поставила перед нами завдання створити інтернет-магазин, який не просто демонструє товар, а виступає в ролі експертного консультанта, допомагаючи підібрати правильний догляд за авто, та одночасно слугує зручним інструментом закупівель для бізнес-клієнтів (СТО, мийок).
Ми розробили платформу на CMS Drupal, яка поєднує стильний "темний" дизайн, швидку навігацію та потужний функціонал для роботи з різними типами аудиторії.

Завдання №1: збільшити середній чек через "розумні" комплекти

У ніші автодогляду товари часто купують наборами (наприклад, "підготовка до зими" або "повна мийка"). Продавати по одній баночці — неефективно.

Наше рішення — модуль "Комплекти":

Ми реалізували гнучкий функціонал створення товарних наборів.
– Логіка "Разом дешевше". Адміністратор може формувати комплекти з різних товарів, встановлюючи на них спеціальну знижку.
– Інтеграція в картку товару. Якщо користувач переглядає товар, який входить до складу набору, система автоматично пропонує купити весь комплект з вигодою ("До комплекту входять...").
– Окремий розділ. Створено посадковий розділ "Комплекти" та "Подарункові набори" для швидкого вибору готових рішень.

Це технічне рішення стимулює користувачів купувати більше позицій за одне замовлення.

Завдання №2: реалізувати роботу з гуртовими клієнтами (B2B)

Клієнти Automoil — це не лише приватні автовласники, а й професійні детейлінг-студії та магазини, які мають персональні умови співпраці.
Наше рішення — персоналізований кабінет та ціноутворення:

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

Завдання №3: спростити навігацію у складному асортименті

Каталог автохімії може налічувати тисячі позицій. Головним викликом UI/UX дизайну було допомогти користувачеві знайти потрібне за лічені секунди.

Наше рішення — система тегів та швидкий підбір:
– Блок "Знайди за хвилину": на головній сторінці реалізовано віджет зі швидкими сценаріями ("Підготовка до зими", "ТО-10 тис. км"), що одразу веде на відфільтровану видачу.
– Система маркування: впроваджено систему візуальних міток (must-have, pro-level, new, sale), що дозволяє миттєво ідентифікувати товари для професіоналів або бестселери для новачків.
– Візуальні категорії: розділ "Все розкладено по поличках" використовує великі графічні елементи для інтуїтивної навігації між групами товарів.

Результат: експертний e-commerce
Сайт Automoil став цифровим відображенням експертності компанії. Завдяки продуманій системі комплектів він ефективно продає супутні товари, а розділення B2B та B2C функціоналу дозволяє зручно обслуговувати як звичайних водіїв, так і професійні сервіси на одній платформі.
Що ми зробили
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_3
UI/UX, дизайн
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_4
Програмування
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_5
Верстка
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_6
Наповнення
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_7
Тестування
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_8
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_9
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_10
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_11
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_12
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_13
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_14
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_15
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_16
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_17
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_18
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_19
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_20
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_21
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_22
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_23
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_24
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_25
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_26
Затрачено часу
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_27
Інтернет-магазин Automoil На ноутбуці
Інтернет-магазин Automoil На планшеті
Головна сторінка
™ Глянець, студія веб-дизайну — Інтернет-магазин Automoil_28
Інструменти і технології
які ми використали в роботі над сайтом
Drupal 10
SASS
CSS3
HTML5
JavaScript
PhpStorm
PHP
MySQL
JQuery
AJAX
Symfony
Twig
Composer
Git
Figma
Adobe Photoshop
ChatGPT
Інтернет-магазин Automoil
Внутрішні сторінки
Налаштування доступності
Налаштування контрасту
Розмір шрифту
Міжбуквенний інтервал
Міжрядковий інтервал
Зображення
Шрифт
Скинути налаштування