Разработка сайта с индивидуальным дизайном для EcoHeat: как за 5 месяцев закрыть потребности 4 сегментов ЦА на одном ресурсе

Продуктовая линейка EcoHeat включает материалы с разными характеристиками и пользователю, не обладающему строительным образованием, сложно ориентироваться в этих параметрах.

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

Также, чтобы сайт был готов к поисковому продвижению без доработок после запуска, подключили SEO-специалистов: собрали семантическое ядро по всем группам товаров, проанализировали частотность запросов для B2C- и B2B-сегментов.

На основе этого разработали структуру сайта, которая:

• для частных лиц — группирует товары по понятным сценариям («Для пола», «Для стен», «Для теплого пола»);

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

• для дилеров и строительных компаний — выделяет отдельный раздел «Партнерам» с условиями сотрудничества и контактами профильных отделов.

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

Клиент предоставил брендбук EcoHeat с утвержденными цветами, шрифтами и стилистикой оформления.

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

Мы разработали дизайн-макеты, где:

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

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

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

Брендбук был создан в первую очередь для полиграфии и упаковки, поэтому некоторые решения, например, использование фирменного цвета на больших площадях, на экране выглядели агрессивно.

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

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

Изоляционные материалы — товар, в котором покупателю важно подтверждение качества, безопасности и правильности применения.

Поэтому мы предусмотрели на сайте разделы с инструкциями по монтажу (в формате PDF для скачивания), сертификатами соответствия, а также блоками с частыми вопросами (FAQ), которые помогают отработать возражения и снизить количество обращений в поддержку.

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

Помимо B2C-сегмента сайт должен был работать и на привлечение дилеров, оптовых покупателей и строительных компаний.

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

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

Клиент четко обозначил: интернет-магазин с корзиной не нужен, но пользователь должен иметь возможность быстро его купить, после изучения. Поэтому мы предложили решение: прямые переходы на маркетплейсы.

Процесс реализации:

• в каждой карточке товара добавили блок с иконками Ozon, Wildberries, Яндекс Маркет;

• для каждого товара клиент предоставил прямые ссылки на соответствующие карточки на маркетплейсах;

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

У некоторых товаров не было карточек на всех трех маркетплейсах, поэтому мы сделали отображение иконок динамическим: если ссылка есть — иконка активна, если нет — не показывается. Это избавило от визуального шума и не создавало у пользователя ложных ожиданий.

Дополнительно: реализовали блок «Где купить» с интерактивной картой точек продаж и списком партнеров. Для B2B-аудитории оставили форму заявки и контакты отдела по работе с партнерами.

Чтобы сайт был готов к продвижению с первого дня, мы подключили SEO-специалистов еще до старта разработки.

Что сделали на предпроектном этапе:

• собрали семантическое ядро по всем категориям товаров;

• проработали структуру URL;

• заложили в ТЗ правильную верстку с учетом заголовков H1-H3, микроразметки Schema.org и адаптивной верстки под мобильные устройства.

Что сделали перед релизом:

• прописали уникальные метатеги (title, description) для всех страниц каталога и карточек товаров;

• настроили файл robots.txt, карту сайта sitemap.xml;

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

• настроили индексацию в Яндекс.Вебмастер и Google Search Console.

Также, в процессе работы потребовалась более плотная координация с клиентом из-за того, что контент (тексты, описания товаров) предоставлялся постепенно, но в итоге сэкономило время на финальной доработке. Параллельно с наполнением сайта, мы сразу оптимизировали страницы, чтобы не возвращаться к ним повторно.

Результат: после запуска клиент начал продвижение без необходимости доработки. Все технические требования SEO были выполнены еще на этапе разработки сайта.