Створили інтернет-магазин одягу із кастомною адмінпанеллю та складською системою
Послуги: UX/UI-дизайн, розробка інтернет-магазину, frontend на Next.js, backend на Laravel, складська система, інтеграції Algolia, Monobank і Checkbox
Магазин на OpenCart втрачав стабільність, коли реклама в Instagram, Reels або Stories одночасно приводила велику кількість покупців.
Одяг для жінок, чоловіків і дітей, аромати та товари для дому потрібно було розподілити за категоріями, характеристиками й товарними варіаціями без перевантаження каталогу.
У картках потрібно одночасно показувати актуальну ціну, попередню вартість, суму економії, відсоток знижки та обмежений час дії пропозиції.
Команді була потрібна внутрішня система для роботи з товарами, доступними розмірами, складськими даними та операціями після оформлення покупки.
Інтерфейс магазину розробили на Next.js, а керування товарами, складом і замовленнями перенесли в кастомну адмінпанель на Laravel.
В адмінпанелі об’єднали роботу з асортиментом, товарними варіаціями, залишками та даними замовлень, щоб команда керувала ними в одному середовищі.
Система швидко знаходить потрібні позиції у великому каталозі та формує релевантну видачу без тривалого перегляду категорій.
Покупець оплачує замовлення через Monobank, а Checkbox використовується для роботи з фіскальними чеками.
Товари можна сортувати й фільтрувати за розміром, кольором, тканиною та ціною, а структура категорій веде від основного напряму до конкретної групи продукції.
Фото, короткі відеопрезентації, кольори, розміри, наявність, відгуки, акційні умови, доставка й повернення доступні до додавання товару в кошик.
Каталог, побудований навколо звичної логіки вибору
- Основні напрями винесені у верхнє меню
- Підкатегорії залишаються перед очима
- Фільтри розташовані над товарною видачею
- Щільність сітки можна змінювати
Навігацію побудували як послідовне звуження вибору. Покупець переходить від одного з п’яти основних напрямів до конкретної категорії, відбирає товари за потрібними характеристиками та змінює формат сітки залежно від зручного способу перегляду. Усі інструменти залишаються на сторінці каталогу, тому користувач не втрачає сформовану видачу.
Як зберегли легкість сторінок із великою кількістю товарів
- Білий фон залишає простір між елементами
- Великі фотографії формують головний акцент
- Картки не перевантажені декоративними рамками
- Назва, ціна та економія мають окремі рівні
Візуальну систему побудували навколо фотографій продукції, а службові елементи зробили компактними й передбачуваними. Навіть у щільній сітці картки не зливаються між собою: покупець одразу розрізняє модель, назву, актуальну ціну та розмір економії.
Які акценти підтримують стиль GOU
- Червоний логотип у центрі шапки
- Темна смуга основної навігації
- Чорні кнопки та цінові плашки
- Зелені позначення економії
Акційна пропозиція, яку легко оцінити до вибору товару
-
Знижка показана у відсотках
Позначка над назвою одразу пояснює масштаб акційної пропозиції
-
Стара й актуальна ціни розташовані поруч
Покупець бачить різницю без самостійних розрахунків
-
Економію винесено в окремий блок
Сума оплати та збережені кошти подані як два пов’язані показники
-
Таймер показує строк дії пропозиції
Часове обмеження видно до вибору кольору, розміру й додавання в кошик
Товарна сторінка, де модель можна розглянути й одразу обрати
- Великі фотографії показують товар із різних ракурсів Галерея займає основну частину екрана й не поступається місцем службовим елементам
- Фото доповнені короткими відеопрезентаціями Покупець бачить модель у русі, а не лише на статичних кадрах
- Доступні кольори представлені мініатюрами Кожен варіант можна оцінити візуально до переходу між товарами
- Розміри розташовані перед кнопкою покупки Покупець обирає потрібний варіант і одразу додає товар у кошик
Ліва частина сторінки відповідає за візуальне знайомство з моделлю, права — за конкретний вибір. Назва, рейтинг, ціна, наявність, колір, розмір і кнопка покупки розташовані послідовно, тому основний сценарій не розпадається між вкладками та додатковими вікнами.
