Разработка сайта одного из крупнейших производителей отопительного оборудования в СНГ

Недавно мы спроектировали, разработали и запустили новый сайт «Теплодара». В этом кейсе расскажем, что мы сделали за 200 часов проектирования и 1000 часов разработки, покажем, что у нас получилось в итоге, и поделимся результатами, которые получила компания после обновления сайта. Спойлер: продажи выросли в 2 раза!

Клиент:

Компания «Теплодар» — один из крупнейших российских производителей отопительного оборудования (печей, котлов и сопутствующих товаров). Модель дистрибуции — через дилеров в 100+ городах России и СНГ, региональных дистрибьюторов, а также в сети фирменных магазинов и интернет-магазине.

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

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

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

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

Далее рассмотрим, как изменился каждый раздел сайта.

Пользователи заходят на сайт с главной страницы только по брендовым запросам вроде «компания “Теплодар”» или по прямым ссылкам. Поэтому основная задача страницы — рассказать о бренде и направить пользователя к выполнению нужного сценария.

Прежняя главная страница

ОБРАТИТЕ ВНИМАНИЕ:

Каталог товаров — самый просматриваемый раздел на сайте. К нему обращаются 78 % посетителей сайта, и именно с него на сайт заходят более 50 % аудитории. Для сравнения: на главную заходят лишь 18 %, а на страницу «О компании» — 2 %. Поэтому основная задача каталога — сразу зацепить пользователя: сориентировать по ассортименту и ключевым фишкам продукции, помочь с выбором, рассказать о подходе компании и выгодах сервиса.

Прежняя страница каталога

ОБРАТИТЕ ВНИМАНИЕ:

Карточка товара — это точка принятия решения. Если на странице каталога покупатель присматривался к ассортименту, то на карточке он максимально погружен в процесс выбора и близок к решению купить. Поэтому здесь располагаем все, что может повлиять на это решение.

Прежняя карточка товара

ОБРАТИТЕ ВНИМАНИЕ:

Карточка аккумулирует все возможности сайта и компании. Поэтому почти каждую новую фичу на сайте нужно дублировать в карточке:

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

Прежний каталог сопутствующих товаров

Страницы корзины и оформления заказа — это почти очередь в кассу. Здесь мы работаем с максимально заинтересованной аудиторией. Задача — всячески упростить процесс и не нагружать пользователя лишней информацией.

Прежняя корзина и оформление заказа

ОБРАТИТЕ ВНИМАНИЕ:

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

Прежний личный кабинет

ОБРАТИТЕ ВНИМАНИЕ:

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

Прежняя страница «Обзоры»

ОБРАТИТЕ ВНИМАНИЕ:

Это интерактивный способ выбора нужной модели, вовлечение пользователя в диалог. Калькулятор во многом дублирует фильтры, но с его помощью проще донести важность некоторых вопросов при выборе котла/печи. Сюда пользователь попадает из каталога, когда он уже увидел фильтры. Задача страницы с калькулятором — помочь разобраться в ассортименте и вовлечь в выбор эмоционально.

Прежний калькулятор дымохода

ОБРАТИТЕ ВНИМАНИЕ:

У компании 5 типов партнеров:

Для каждого типа предусмотрена своя страница.

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

Прежний раздел для партнеров

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

Например, так выглядел прототип карточки продукта:

В данном случае сайт — больше, чем интернет-магазин, потому что «Теплодар» — не просто продавец, а производитель, которому нужно взаимодействовать с разными группами партнеров. Поэтому мы расписали потребности всех типов аудиторий и проектировали сайт таким образом, чтобы на каждом шаге от точки входа на сайт у аудитории было все необходимое для совершения конверсионного действия.

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

В результате мы создали новую структуру сайта и 50 уникальных страниц в разных состояниях со всей логикой поведения элементов.

Частично в процессе проектирования мы разработали и контент — там, где он определял дальнейший дизайн. Например, наполнение страниц для потенциальных партнеров:

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

Здесь 2 подтипа аудитории:

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

Для них страницы: «Главная для партнеров», «Поставщикам», «Личный кабинет поставщика», «Контакты для партнеров».

Здесь 2 подтипа аудитории:

Для них страницы: «Главная для партнеров», «Магазинам», «Личный кабинет дилера», «Контакты для партнеров», «Каталог», «Обзоры».

Здесь 2 подтипа аудитории:

Для них страницы: «Главная для партнеров», «Сервисным центрам», «Личный кабинет сервисного центра», «Контакты для партнеров», «Каталог», «Обзоры».

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

Для них страницы: «Главная для партнеров», «Продавцам-консультантам», «Личный кабинет продавца», «Каталог», «Обзоры».

У дизайна были следующие задачи:

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

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

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

Строгого брендбука у компании не было, единственное требование — использовать логотип без изменений:

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

Было создано 22 сложных уникальных страницы в дизайне сайта во всех возможных состояниях. Все страницы представлены в двух разрешениях: для максимального экрана десктопа (1440 px) и для минимального экрана смартфона (400 px). Для прочих устройств прописаны правила адаптации контента.

Для развития сайта без дизайнера создали UI-kit, в котором прописали принципы дизайна и динамики по клику/наведению курсора на все возможные элементы:

Когда в развитии сайта потребуется добавить на него элемент — например, текст, кнопку или картинку, — можно без привлечения дизайнера сделать это по примерам из UI-kit. Это позволит сайту долго оставаться стильным, так как точечные доработки не будут выбиваться из единой дизайн-концепции.

Разработка велась на «Битриксе» в редакции «Бизнес». Ключевая задача на этом этапе — работать без «костылей», по максимуму используя штатные возможности системы. Цель — как можно дольше сохранять адекватную стоимость сопровождения и снизить риски непредсказуемого поведения сайта при дальнейших доработках или обновлениях CMS.

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

Детализированное техническое задание и подробно описанная на этапе проектирования безнес-логика повлияли на скорость работы и минимизировали количество вопросов вроде «Как это должно работать?».

Для ускорения реализации мы декомпозировали техническое задание, а работу над независимыми или слабо зависимыми друг от друга модулями распределили между несколькими разработчиками. В проекте приняли участие 8 frontend- и backend-программистов. С одной стороны, такая степень распределенности задач позволяет быстро работать, но с другой — требует от команды большей слаженности, постоянного контроля качества кода, оперативного тестирования готовых частей проекта. Каждое техническое решение согласовывалось с техлидом, а вопросы по бизнес-логике оперативно отрабатывались менеджером проекта.

Все перечисленное позволило нам обеспечить требуемый глобальным дедлайном высокий темп работ и при этом сохранить техническую целостность проекта и высокую производительность кода.

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

Для каталога мы:

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

После переработки текущей информации мы составили документ с рекомендациями по управлению контентом, включающий в себя как инструкцию по админке, так и стилевые рекомендации для производства новых визуалов (баннеры, фото товаров, оформление акций и новостей):

С самого начала сайт проектировался с учетом требований SEO. Все решения проектировщик согласовывал с SEO-специалистом. Если представления о «хорошей странице для пользователей» и «хорошей странице для поисковых роботов» расходились, они вместе искали решение, устраивающее всех.

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