Разработка сайта для производителя смазочных материалов

Во время работы над проектом мы разработали сайт для производителя и разработчика смазочных материалов. Наша команда превратила запутанный ассортимент в понятную и удобную систему. Мы детально проработали структуру каталога (индустриальные масла, смазки, технические жидкости), упростила навигацию и путь пользователя. В результате количество заявок выросло уже в первые месяцы после запуска.

Создать функциональный сайт‑каталог, который наглядно продемонстрирует весь ассортимент продукции. Клиенты смогут быстро находить нужные товары по техническим характеристикам и оформлять заказ.

• разработать понятный каталог продукции с фильтрацией по ключевым параметрам

• создать информативные карточки товаров с техническими характеристиками, фото и документацией

• сделать удобную форму заявки на партнерство

• создать личный кабинет для дилеров-оптовиков

Этап 1. Маркетинг

Собрали информацию по принципу трех «К»: Компания, Клиенты, Конкуренты.

• провели интервью с клиентом

• проанализировали маркетинговые материалы и техническую документацию

• составили карту пользовательских сценариев (например, «механик ищет масло по допускам», «оптовик сравнивает цены и условия поставки»)

• сформировали образ целевой аудитории:

• автосервисы и СТО

• промышленные предприятия

• оптовые покупатели и дистрибьюторы

• частные автовладельцы с повышенными требованиями;

• создали «аватары клиента» для разных сегментов

• проанализировали боли и потребности (поиск по допускам, сравнение цен, быстрая подача заявки)

• изучили 15 сайтов конкурентов в нише смазочных материалов

• определили их слабые места — неудобные каталоги без технических фильтров, слабая визуализация преимуществ

• составили список из 36 идей для реализации

• 4 «аватара клиента»
• анализ 15 конкурентов
• список из 36 идей для реализации
• заложили основу для сайта, который закрывает страхи клиентов и подчеркивает преимущества оригинальных смазочных материалов

Этап 2. Проектирование

На основе аналитики спроектировали структуру сайта-каталога и ключевые функции, чтобы сократить путь от просмотра товаров до заказа.

• Главная страница

• Каталог продукции

• Карточки товаров

• О компании

• Подбор аналога (по марке и типу продукта)

• Новости

• Инновации

• фильтрация товаров

• форма заявки на партнерство

• личный кабинет для дилеров

Сложные функции мы описали в техническом задании (ТЗ). ТЗ сделали лаконичным, без повторов и лишней информации.

• прототипы страниц
• документ ТЗ
• создали карту сайта и сценарии взаимодействия, которые сокращают путь клиента от просмотра к заказу.

Этап 3. Дизайн сайта

• разработали дизайн с учетом результатов маркетингового этапа

• создали адаптивные макеты для планшета и смартфона

• проработали UX‑элементы: фильтры, карточки товаров, форма заявки, кнопка «Подобрать аналог»

• согласовали визуальную концепцию (корпоративные цвета, шрифты, стиль подачи технической информации)

• дизайн‑макеты всех страниц
• визуальная подача стала коммерчески понятной для клиента и удобной для выбора товаров

Этап 4. Верстка

• сверстали макеты с использованием HTML, CSS и JavaScript
• оптимизировали скорость загрузки (сжатие изображений, кеширование)
• обеспечили адаптивность для разных браузеров и устройств
• добавили микроанимации для улучшения UX

• готовые HTML‑страницы сайта
• сайт стал быстрым, стабильным и удобным для пользователей на разных устройствах

Этап 5. Разработка (back‑end)

Этап 6. Тестирование и запуск

• проверили работоспособность всех функций (фильтры, формы, личный кабинет);
• протестировали адаптивность на разных устройствах;
• устранили баги и оптимизировали скорость загрузки;
• перенесли сайт на основной сервер и подключили домен.

• готовый к запуску сайт-каталог
• проект полностью подготовлен к полноценной эксплуатации и продажам

Этап 7. Обучение

• подготовили видеоинструкции по управлению контентом
• провели онлайн-консультацию для сотрудников
• показали, как работать с материалами на сайте
• передали документацию по администрированию

• подготовленная документация
• готовая инструкция
• менеджер заказчика получил навыки самостоятельного управления сайтом
• после запуска заказчик получил не только готовый сайт, но и понятный инструмент, которым команда может управлять самостоятельно