Разработка сайта-каталога смазочных материалов Katana Oil

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

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

Компания:

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

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

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

Клиенты:

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

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

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

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

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

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

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

Конкуренты:

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

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

На основе данных сформировали «Чемодан знаний».

Результат:

• 4 «аватара клиента»;

• анализ 15 конкурентов;

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

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

Используя «Чемодан знаний», спроектировали ключевые страницы:

• главная страница;

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

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

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

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

• «О компании»;

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

• «Новости»;

• «Инновации».

Прототипы

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

Результат:

• прототипы страниц;

• документ ТЗ.

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

Что сделали:

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

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

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

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

Результат: дизайн‑макеты всех страниц.

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

Что сделали:

• сверстали макеты с использованием HTML, CSS и JavaScript;

• оптимизировали скорость загрузки (сжатие изображений, кеширование);

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

• добавили микроанимации для улучшения UX.

Результат: готовые HTML‑страницы сайта.

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

Разработали сайт katana‑oil.ru на платформе «1С‑Битрикс» (лицензия «Малый бизнес»).

Реализовали модули:

• каталог продукции с фильтрацией по виду масла;

• карточки товаров с техническими характеристиками, описанием, фото и возможностью скачать сертификат;

• формы заявок (на консультацию и партнерство);

• «Подбор аналогов» (по марке и названию продукта);

• «О компании» (география присутствия, производство, сертификаты);

• «Новости» (экспертный контент);

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

Дополнительно:

• настроили кеширование и оптимизировали производительность;

• провели SEO‑оптимизацию (ЧПУ, метатеги, микроразметка);

• Настроили CMS для гибкости управления;

Результат: готовый сайт альфа‑версии.

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

Что сделали:

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

• протестировали адаптивность на разных устройствах;

• устранили баги и оптимизировали скорость загрузки;

• перенесли сайт на основной сервер и подключили домен.

Результат: готовый сайт.

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

Мы максимально подготовили платформу для удобного управления менеджерами заказчика. Они могут пользоваться ей легко и интуитивно понятно без знания кода, правил верстки и языков программирования.

1. Мы сделали систему внутри Битрикса максимально простой, убрали лишние элементы из интерфейса. 

2. Настроили работу удобного редактора Wysiwyg (похож на MS Word). Он удобен для создания контента и редактирования страниц.

Для удобной работы менеджера со стороны заказчика мы:

• подготовили видеоинструкции по управлению контентом;

• провели онлайн‑консультацию для сотрудников;

• продемонстрировали функционал сайта и ответили на вопросы.

Результаты:

• подготовленная документация;

• готовая инструкция;

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