Разработка сайта-каталога для поставщика промышленного клея для мебели и деревообработки КлибТехник

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

Компания

Мы подробно изучили компанию Клибтехник. 

1. Провели интервью с клиентом.

2. Проанализировали маркетинговые и рекламные материалы.

3. Составили карту пользовательских сценариев («технолог выбирает клей для ДСП», «фабрика оформляет оптовый заказ»).

Клиенты

• мебельные фабрики;
• мастерские; 
• производители дверей.

Пример аватара клиента

Марина, 35 лет, закупщик упаковочного комбината

Отвечает за снабжение предприятия, выпускающего гофрокороба и транспортную упаковку. Работает с жестким бюджетом и KPI по снижению затрат.

Потребности:

🔵  экономичный расход клея при сохранении прочности склейки;

🔵  совместимость с высокоскоростными линиями (до 300 коробов/мин);

🔵  устойчивость к низким температурам (для замороженных продуктов);

🔵  удобная фасовка для автоматизированной подачи.

Боли:

🔵  перерасход клея из‑за высокой вязкости;

🔵  забивание форсунок и простои оборудования;

🔵  расслоение коробок при транспортировке в мороз;

🔵  необходимость частой очистки оборудования.

Способы удовлетворения:

🔵  закупка клея у проверенного поставщика;

🔵  тест‑драйв на производственной линии;

🔵  обучение операторов правильной эксплуатации;

🔵  гибкая система скидок при долгосрочных контрактах.

Конкуренты

1. Изучили более 15 сайтов конкурентов и их способы привлечения внимания к своим продуктам.

2. Собрали 34 идеи для того, чтобы на их основе разработать еще более эффективные решения.

На основе полученной информации мы собрали все данные вместе.

Результаты

🔵  3 «аватара клиента»;

🔵  анализ 15 сайтов конкурентов;

🔵  список из 34 идей для реализации.

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

1. Главная страница.

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

3. Карточки товаров с фото, описанием, характеристиками.

4. Новости.

5. Контакты.

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

Результат: прототипы, документ ТЗ.

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

🔵  согласовали визуальную концепцию;

🔵  разработали  дизайн сайта для компьютера;

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

🔵  проработали UX‑элементы: формы заявки;

🔵  подобрали фотоконтент: снимки продукции.

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

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

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

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

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

🔵  добились высокого показателя загрузки сайта по PageSpeed Insights;

🔵  настроили адаптивность для различной ширины экрана от 320 до 1920 пикселей с шагом в 5 пикселей;

🔵  проанализировали отображение страницы во всех популярных браузерах.

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

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

🔵  развернули платформу «1С‑Битрикс» (лицензия «Cтандарт»);

🔵  реализовали модули:

• каталог товаров;

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

• новости;

• контакты (адрес, email, телефон, карта, часы работы);

🔵  настроили интеграцию с CRM (Битрикс24).

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

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

🔵  проверили работу всех функций (каталог, формы заявок);

🔵  протестировали адаптивность на 12 устройствах;

🔵  устранили баги, оптимизировали производительность;

🔵  перенесли сайт на основной сервер, подключили домен;

🔵  подключили Яндекс Метрику и Google Analytics.

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

Этап 7. Базовая SEO‑оптимизация

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

Мы настроили в админ-панели редактор WYSIWYG. Он понятный и удобен для создания контента и редактирования страниц. 

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

🔵  подготовили видеоинструкции по работе всех функций сайта;

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

🔵  провели демонстрацию сайта, ответили на все интересующие вопросы.

Результаты

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

🔵  готовая видеоинструкция;

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