not the same
● E-commerce · Автозапчастини · Україна

Panda Auto Parts: магазин автозапчастин з нуля та близько п'яти редизайнів

Panda Auto Parts продає запчастини для Chery, Geely, Great Wall, BYD, Zeekr, Tesla, електромобілів Volkswagen та інших марок, а також автотовари. Ми розробили магазин з нуля й провели близько п'яти редизайнів: від першої версії з акцентом на три популярні моделі до поточного каталогу на 13 марок.

Клієнт
Інтернет-магазин автозапчастин, Україна
Що зробили
Розробка з нуля, близько п'яти редизайнів
Стек
Laravel, Vue.js, PHP
Сайт
panda-auto.com.ua
Проєкт Panda Auto Parts
01 Про проєкт

Магазин починався із запчастин до китайських авто й ріс разом з ринком: зараз у каталозі марки від Chery та Lifan до Zeekr, BYD і Tesla. Покупець зазвичай шукає деталь під конкретну машину, тому весь каталог побудований від марки й моделі. Ми зробили першу версію магазину, а потім провели близько п'яти редизайнів, щоразу спрощуючи підбір і оформлення замовлення.

Що зробили
UX/UI-дизайнРозробка з нуляРедизайниКаталог за марками й моделямиОформлення замовленняПідтримка
Технології
LaravelVue.jsPHPUI/UX
02 Дизайн

Стиль

Фірмовий зелений і талісман-панда в логотипі. Поточна версія світла: сірий фон, білі картки, зелені кнопки купівлі та кольорові бейджі «Panda рекомендує», «Гарантія», «Топ продажів».

Фірмовий зелений
#26A600
Кнопки
#208E00
Фон
#F2F2F2
Картки
#FFFFFF
Текст
#000000
Бейдж гарантії
#FFA309
ШрифтиGotham Pro
03 Екрани

Було: перша версія

Перший дизайн із Figma: бічна панель «Машини / Запчастини», швидкі входи в каталоги Chery Amulet, Geely CK і Geely MK, кошик-шторка з рекомендаціями та оформлення з Новою поштою, самовивозом і кур'єром по Харкову.

Головна
Картка товару
Картка товару
Кошик
Кошик
Оформлення замовлення
Оформлення замовлення
04 Екрани

Стало: поточний сайт

Зараз на головній меню з вкладками «Машини», «Запчастини», «Автотовари», логотипи 13 марок, банери акцій, рекомендовані товари, запчастини для ТО й відео з YouTube-каналу магазину.

Головна
05 Мобільна версія

Мобільна версія

На телефоні пошук завжди в шапці, марки – плиткою, розділи моделі розкриваються акордеоном, а кнопки «Купити» й «Купити в 1 клік» стоять одразу під ціною.

Головна
Головна
Каталог моделі
Каталог моделі
Картка товару
Картка товару
06 Завдання

Завдання

  • 01Підбір під автоШлях марка → модель → група запчастин, щоб людина бачила лише те, що підходить до її машини.
  • 02Довіра до деталіЯкість (оригінал, ліцензія, аналог), країна, виробник, гарантія й застосовність прямо в картці.
  • 03Швидке замовленняОформлення на одній сторінці та купівля в 1 клік.
  • 04Розвиток дизайнуБлизько п'яти редизайнів без зупинки продажів під нові марки й асортимент.
07 Ключові рішення

Ключові рішення

Підбір за маркою й моделлю
Рішення 01

Підбір за маркою й моделлю

Каталог починається з марки та моделі: Chery Tiggo 7, Geely Emgrand, BYD Song Plus, Zeekr 001 і десятки інших. На сторінці моделі групи запчастин з ілюстраціями: гальмівна система, двигун, електрика, ТО, коробка передач, кузов, охолодження, підвіска. Пошуку за VIN на сайті немає: є пошук за назвою, артикулом або кодом з вибором області.

Фільтри й лістинг
Рішення 02

Фільтри й лістинг

Ліворуч фільтри за виробником із пошуком, наявністю (зокрема «Відправлення сьогодні» й «Чекаємо на постачання»), якістю (аналог, ліцензія, оригінал), гарантією від 1 до 12 місяців і ціною. У картці лістингу бейджі, прапор країни, логотип бренду, рейтинг і застосовність з об'ємом двигуна; сортування за популярністю, назвою, ціною й рейтингом.

Картка товару
Рішення 03

Картка товару

Код і артикул, артикули замінників, застосовність за моделлю й двигуном, країна виробництва, гарантія. Поруч «Купити» й «Купити в 1 клік», обране, порівняння, способи доставки й оплати, термін відправлення. Вкладки характеристик, опису й відгуків, нижче схожі товари.

Оформлення замовлення
Рішення 04

Оформлення замовлення

Одна сторінка без зайвої навігації: дані покупця, місто з підказками популярних міст, спосіб оплати (при отриманні, передплата за IBAN, онлайн карткою, Google Pay, Apple Pay, Privat24), промокод і підсумок праворуч.

08 Стек

Інтеграції та стек

LaravelVue.jsPHPNova PoshtamonobankGoogle PayApple PayPrivat24Оплата за IBANBinotelGoogle Tag ManagerMeta PixelTikTok PixelYouTube

Хочете такий самий проєкт?

Опишіть завдання – протягом робочого дня відповімо із запитаннями та попередньою оцінкою термінів.

Відповімо протягом робочого дня
Написати нам