ЗадачаENDIGO — российская марка профессиональной автохимии: очистители сажевого фильтра и кондиционера, пенная раскоксовка, смазки и сервисные спреи. Покупают её не автовладельцы в рознице, а сервисные центры, автомойки и магазины автозапчастей, причём через региональных дистрибьюторов. Мастер приходит на сайт с конкретной поломкой: машина дымит, контакт окислился, прикипел болт. Артикул вроде DX112 ему ничего не скажет. Нужен был сайт, который переводит поломку в название средства и сразу подсказывает, у кого его купить в своём регионе.
РешениеТри входа в каталог вместо одного. Схема автомобиля на главной: выбираешь дверь, капот, колесо, стекло, корпус или бак, и справа остаются только средства для этой части машины. Страница «Проблемы и их решения» собрала 44 типовых симптома с поиском: вводишь «масло» — список сам раскрывает подходящую проблему и показывает средство. А «Где купить» по стране, региону и типу продаж выдаёт контакт менеджера и точку на карте. Тёмный фон, фиолетовый цвет баллонов и спорткар, который въезжает на первый экран, делают сайт похожим на саму марку, а не на прайс-лист.
Стек- Joomla
- Bootstrap 5
- jQuery
- Owl Carousel
- AOS
- Яндекс.Карты
РезультатКаталог из шести разделов, от сервисных продуктов до средств для дизеля и кондиционеров. У каждого средства своя страница: артикул, объём, три главных преимущества, способ применения, предупреждения и видео. 44 проблемы приводят к нужному средству за один клик, а дилеров можно искать по 69 регионам России и Казахстана. Кнопка «Стать дистрибьютором» открывает заявку прямо со страницы дилеров.
Главные фишки
01Подбор по схеме автомобиля
Блок «Поможем с выбором» на главной: при наведении на часть машины она выделяется на схеме, линия ведёт от неё к списку, и в списке остаются только подходящие средства. На телефоне схему заменяют шесть кнопок с теми же зонами, потому что навести курсор там нельзя.
02Проблемы и их решения
Отдельная страница на языке мастера: «Синий дым», «Жрёт масло», «Лампа мигает», «Прикипел колёсный диск». Каждый пункт раскрывается в карточку средства с фото, артикулом и описанием. Поиск подсвечивает совпадение и сам прокручивает к нему, а поле поиска остаётся закреплённым наверху, пока листаешь длинный список.
03Где купить
Марка продаётся через дистрибьюторов, поэтому у сайта нет корзины, зато есть поиск продавца. Три фильтра (страна, регион, опт или розница) оставляют нужные карточки: визитка менеджера, почта, телефон с добавочным и Яндекс Карта с точкой продажи.
04Страница средства
Карточка товара отвечает на вопросы мастера по порядку: что это и в каком объёме, три главных преимущества крупными цифрами, как применять и чего делать нельзя. Рядом видео и кнопка «Проблемы и их решения», если нужно сверить симптом.
44типовые проблемы с готовым решением
6зон автомобиля в подборе средства
69регионов в поиске дилера
Сделаю похожий проект для вас – сам, от макета до запуска
Ключевые экраны
01Цель: сразу сказать, для кого эта химия
Первый экран
Крупное название марки, спорткар в фирменном цвете и подзаголовок про сервисные центры.
- 1Название марки набрано во всю правую колонку в том же фиолетовом, что и баллоны ENDIGO на полке.
- 2При загрузке спорткар въезжает в кадр и мигает фарами: автохимия показана через машину, а не через баллон.
- 3Подзаголовок сразу называет аудиторию — сервисные центры по ремонту и обслуживанию. Кнопка ведёт прямо в каталог.
- 4Три преимущества закрывают главные вопросы закупщика СТО: работает ли, безопасно ли для мастеров и почему дешевле импорта.
02Цель: подобрать средство, не зная артикулов
Поможем с выбором
Схема автомобиля вместо списка категорий: выбираешь часть машины и видишь, что для неё есть.
- 1Машина на схеме разбита на шесть зон: дверь, капот, колесо, стекло, корпус и бак. Каждую можно выбрать прямо на картинке.
- 2Линия ведёт от схемы к списку, а в списке остаются только средства для выбранной зоны: здесь пенная раскоксовка и цитрусовый очиститель.
- 3Если поломка понятна, а часть машины нет, кнопка ведёт на страницу «Проблемы и их решения».
03Цель: перевести симптом в название средства
Проблемы и их решения
44 поломки словами мастера, и у каждой готовое средство.
- 1Поиск закрепляется наверху, пока листаешь список. Ввёл «масл» — страница сама прокрутила к подходящей проблеме.
- 2Совпадение подсвечено, а пункт «Жрёт масло» раскрыт без лишнего клика.
- 3Внутри — карточка средства: фото баллона, название, артикул для заказа и кнопка «Доп. информация» на страницу товара.
- 4Пункты написаны так, как их формулирует мастер: «Дымит», «Контакт окислился», «Клемма аккумулятора белого цвета».
04Цель: довести до дистрибьютора в своём регионе
Где купить
Корзины нет: марка продаётся через дилеров, поэтому сайт ищет продавца.
- 1Три фильтра: страна, регион и тип продаж — опт или розница. Список регионов зависит от выбранной страны.
- 2«Стать дистрибьютором» открывает форму заявки: страница работает и на покупателей, и на будущих партнёров.
- 3Яндекс Карта показывает точку продажи выбранного дилера.
- 4Карточка менеджера с визиткой и фото, почтой и телефоном с добавочным: клиент звонит сразу нужному человеку. Личные данные на скриншоте скрыты.
Нужен похожий проект?
Расскажите о задаче, и я предложу решение и сроки.