Контакты
Главная · десктоп
2023Сайт марки профессиональной автохимииUX/UI-дизайн, разработка

ENDIGO: сайт автохимии, где мастер СТО находит средство по симптому поломки, а не по артикулуENDIGO

  • Web
  • Mobile
  • Автохимия
  • B2B
Главная · десктоп
01 / 04
Задача

ENDIGO — российская марка профессиональной автохимии: очистители сажевого фильтра и кондиционера, пенная раскоксовка, смазки и сервисные спреи. Покупают её не автовладельцы в рознице, а сервисные центры, автомойки и магазины автозапчастей, причём через региональных дистрибьюторов. Мастер приходит на сайт с конкретной поломкой: машина дымит, контакт окислился, прикипел болт. Артикул вроде DX112 ему ничего не скажет. Нужен был сайт, который переводит поломку в название средства и сразу подсказывает, у кого его купить в своём регионе.

Решение

Три входа в каталог вместо одного. Схема автомобиля на главной: выбираешь дверь, капот, колесо, стекло, корпус или бак, и справа остаются только средства для этой части машины. Страница «Проблемы и их решения» собрала 44 типовых симптома с поиском: вводишь «масло» — список сам раскрывает подходящую проблему и показывает средство. А «Где купить» по стране, региону и типу продаж выдаёт контакт менеджера и точку на карте. Тёмный фон, фиолетовый цвет баллонов и спорткар, который въезжает на первый экран, делают сайт похожим на саму марку, а не на прайс-лист.

Сроки

3 недели

Стек
  • Joomla
  • Bootstrap 5
  • jQuery
  • Owl Carousel
  • AOS
  • Яндекс.Карты
Результат

Каталог из шести разделов, от сервисных продуктов до средств для дизеля и кондиционеров. У каждого средства своя страница: артикул, объём, три главных преимущества, способ применения, предупреждения и видео. 44 проблемы приводят к нужному средству за один клик, а дилеров можно искать по 69 регионам России и Казахстана. Кнопка «Стать дистрибьютором» открывает заявку прямо со страницы дилеров.

Главные фишки

01

Подбор по схеме автомобиля

Блок «Поможем с выбором» на главной: при наведении на часть машины она выделяется на схеме, линия ведёт от неё к списку, и в списке остаются только подходящие средства. На телефоне схему заменяют шесть кнопок с теми же зонами, потому что навести курсор там нельзя.

02

Проблемы и их решения

Отдельная страница на языке мастера: «Синий дым», «Жрёт масло», «Лампа мигает», «Прикипел колёсный диск». Каждый пункт раскрывается в карточку средства с фото, артикулом и описанием. Поиск подсвечивает совпадение и сам прокручивает к нему, а поле поиска остаётся закреплённым наверху, пока листаешь длинный список.

03

Где купить

Марка продаётся через дистрибьюторов, поэтому у сайта нет корзины, зато есть поиск продавца. Три фильтра (страна, регион, опт или розница) оставляют нужные карточки: визитка менеджера, почта, телефон с добавочным и Яндекс Карта с точкой продажи.

04

Страница средства

Карточка товара отвечает на вопросы мастера по порядку: что это и в каком объёме, три главных преимущества крупными цифрами, как применять и чего делать нельзя. Рядом видео и кнопка «Проблемы и их решения», если нужно сверить симптом.

44типовые проблемы с готовым решением
6зон автомобиля в подборе средства
69регионов в поиске дилера

Сделаю похожий проект для вас – сам, от макета до запуска

Ключевые экраны

ENDIGO: Первый экран
ENDIGO: Поможем с выбором
ENDIGO: Проблемы и их решения
ENDIGO: Где купить
01Цель: сразу сказать, для кого эта химия

Первый экран

Крупное название марки, спорткар в фирменном цвете и подзаголовок про сервисные центры.

  1. 1Название марки набрано во всю правую колонку в том же фиолетовом, что и баллоны ENDIGO на полке.
  2. 2При загрузке спорткар въезжает в кадр и мигает фарами: автохимия показана через машину, а не через баллон.
  3. 3Подзаголовок сразу называет аудиторию — сервисные центры по ремонту и обслуживанию. Кнопка ведёт прямо в каталог.
  4. 4Три преимущества закрывают главные вопросы закупщика СТО: работает ли, безопасно ли для мастеров и почему дешевле импорта.
02Цель: подобрать средство, не зная артикулов

Поможем с выбором

Схема автомобиля вместо списка категорий: выбираешь часть машины и видишь, что для неё есть.

  1. 1Машина на схеме разбита на шесть зон: дверь, капот, колесо, стекло, корпус и бак. Каждую можно выбрать прямо на картинке.
  2. 2Линия ведёт от схемы к списку, а в списке остаются только средства для выбранной зоны: здесь пенная раскоксовка и цитрусовый очиститель.
  3. 3Если поломка понятна, а часть машины нет, кнопка ведёт на страницу «Проблемы и их решения».
03Цель: перевести симптом в название средства

Проблемы и их решения

44 поломки словами мастера, и у каждой готовое средство.

  1. 1Поиск закрепляется наверху, пока листаешь список. Ввёл «масл» — страница сама прокрутила к подходящей проблеме.
  2. 2Совпадение подсвечено, а пункт «Жрёт масло» раскрыт без лишнего клика.
  3. 3Внутри — карточка средства: фото баллона, название, артикул для заказа и кнопка «Доп. информация» на страницу товара.
  4. 4Пункты написаны так, как их формулирует мастер: «Дымит», «Контакт окислился», «Клемма аккумулятора белого цвета».
04Цель: довести до дистрибьютора в своём регионе

Где купить

Корзины нет: марка продаётся через дилеров, поэтому сайт ищет продавца.

  1. 1Три фильтра: страна, регион и тип продаж — опт или розница. Список регионов зависит от выбранной страны.
  2. 2«Стать дистрибьютором» открывает форму заявки: страница работает и на покупателей, и на будущих партнёров.
  3. 3Яндекс Карта показывает точку продажи выбранного дилера.
  4. 4Карточка менеджера с визиткой и фото, почтой и телефоном с добавочным: клиент звонит сразу нужному человеку. Личные данные на скриншоте скрыты.

Нужен похожий проект?

Расскажите о задаче, и я предложу решение и сроки.

Следующий кейсСоюз вокалистовВеб-платформа